First
data 和 computed都是响应式的,先看看官方的说法:Data:
Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化。
深入理解响应式原理:当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。每个组件实例都有相应的 watcher 实例对象,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter 被调用时,会通知 watcher 重新计算,从而致使它关联的组件得以更新。原理如下图:2.两者的区别:
- data中的属性并不会随赋值变量的改动而改动,(赋值变量类似:num1: aaa.bbb这种,而这种是直接赋值:num1: "aaa")
当需要这种随赋值变量的改动而改动的时候,还是用计算属性computed合适
如果实在要在data里面声明属性,可以先赋一个值,然后在methods里面定义方法操作该属性,效果等同,也会有响应式测试以下代码感受以下:num1是data中的变量,其初始值为:{ {num1}}
点击按钮后,data中的num1变化为:{ {num1}}
点击按钮后,computed中的c_num1变化为:{ {c_num1}}
1.data定义的属性不会因为它的赋值变量的变化而变化
2.computed定义的属性会随它的赋值变量的变化而变化
以上代码转载自