vuejs页面上要用的参数。是否有必要提前在data里面定义呢？

Question

vuejs页面上要用的参数。是否有必要提前在data里面定义呢？
好像不定义。也可以直接用。
写不写有什么区别呢？
举个例子：比如需要一个user的对象：
user：{id：''，name：''}
还是写成user：{}

Answer 1

• 是否有必要提前在data里面定义呢？

看场景

• 有什么区别？

1. user：{id：''，name：''}

这种方式，id和name属性能进行双向数据绑定，this.user.name = '张三'赋值时,页面能实时发生变化。

1. user：{}

这种方式，id和name属性不能进行双向数据绑定，this.user.name = '张三'赋值时,页面不能实时发生变化。

• 为什么出现这种情况

vue利用Obeject.defineProperty来监听属性变动,将data里的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter，给这个对象的某个值赋值，就会触发setter，以达到双向绑定的效果。

Answer 2

Vue 2

1. 如果需要响应式（即赋值时自动刷新视图），那么最好在 data 里定义
2. 如果需要响应式，但在开发时没法定义，可以后期用 Vue.set，this.$set 添加响应式变量
3. 如果不需要响应式，那么不定义也无所谓。因为定义需要付出更高的成本，所以我偶尔也会故意不定义。

Vue 3

因为采用了 Proxy，可以拦截所有对对象的操作，所以无所谓定义不定义。