vue计算属性

87 阅读1分钟

计算属性理解

计算属性computed是返回的是一个对象,组件里的data返回的是一个函数(为了避免组件多次复用造成的数据相互影响),而computed是依赖于data的,控制了data组件间相互隔离,也就等于控制了computed相互隔离

计算属性的setter

vue计算属性默认情况下就是一个getter,值的变化依赖响应式数据的变化,不是响应式的数据不会变化,会一直读取缓存的值。特殊情况下,想要手动改变计算属性的值,就可以利用setter函数(本质上式在setter里面改变计算属性所依赖的响应式数据的值)

image.png

image.png 现在再运行 vm.fullName = 'John Doe' 时,setter 会被调用,vm.firstName 和 vm.lastName 也会相应地被更新

计算属性setter的使用场景

input这种需要双向绑定的时候可以使用 image.png