data
data是一个对象,和数据相关的属性一般都放在data中,data对象内部所有的内容都是成对的,也就是键值对,我们叫属性比如site、url、alexa、msg这样的属性是我们自己定义的Vue内部把data中的属性使用数据代理的方式直接绑定到了vm对象上属性会被忽略。大概来说,data
应该只能是数据 -
不推荐观察拥有状态行为的对象。一旦观察过,不需要再次在数据对象上添加响应式属性。因此推荐在创建实例之前,就声明所有的根级响应式属性。
computed
computed是计算属性,也就是计算值,它更多用于计算值的场景。具有缓存性,computed的值在getter执行后是会缓存的,只有在它依赖的属性值改变之后,下一次获取computed的值时才会重新调用对应的getter来计算。computed适用于计算比较消耗性能的计算场景。
watch
更多的是「观察」的作用,类似于某些数据的监听回调,用于观察props
$emit或者本组件的值,当数据变化时来执行回调进行后续操作。无缓存性,页面重新渲染时值不变化也会执行。
三者之间的区别
data属性的值,不会随赋值变量的改动而改动。如果要改变这个属性的值,则需要直接给data属性赋值,视图上对这个属性的显示才会变。
computed属性,属于持续变化跟踪。在computed属性定义的时候,这个computed属性就与给它赋值的变量绑定了。改变这个赋值变量,computed属性值会随之改变。当我们要进行数值计算,而且依赖于其他数据,那么把这个数据设计为computed。
如果你需要在某个数据变化时做一些事情,使用watch来观察这个数据变化