new Vue() 成员
el
该 Vue() 对象绑定在哪个元素上
<div id="app111">
</div>
<!-- Script -->
<script>
new Vue({
el: '#app111'
})
</script> data
绑定数据
computed vs methods vs watch
三者能打到同样的效果。
基础的计算用 computed，大多数情况应该尽量用 computed。
不想缓存计算结果，每次调用都要重新计算函数用 methods。
数据变化时执行异步或开销较大的操作时用 watch。
下面程序有个疑问：timeVar 注释掉后 ctime2() 也不会实时更新了。
computed
对于比较复杂的计算逻辑，不要直接在 {{}} 中写，放在 computed 里。
变量是根据 data 中已有的数据算出来的，用 computed，依赖的数据变动会导致该变量及时更新。下面的例子中，当 vm.message 发生改变时，所有依赖 vm.reversedMessage 的绑定也会更新。
computed 的变量默认只有 getter，即只能读取，意味着不能直接修改 vm.reversedMessage，只能通过修改 vm.message 来达到目的。可以自定义 setter 方法。
计算属性是基于它们的响应式依赖进行缓存的。即只在依赖变量变动时才执行一次函数并缓存结果，别人每次 get 该 computed 的值时直接拿缓存结果，不会再执行函数。比如 message 从 Hello 变成 woo 时，reversedMessage 会重新计算，但以后每次访问 reversedMessage 都不会再重新计算了，除非 message 再变动。
methods
和 computed 不同的是不会缓存结果，每次调用都会执行函数。
其余好像和 computed 一样，依赖的变量变动也会导致 methods 执行。
watch
可以观察和响应 Vue 实例上的数据变动，能打到和 computed methods 一样的效果，但是基础的计算最好使用 computed，避免滥用 watch。
当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
可以看一下官方示例，访问了网络。
Last updated
Was this helpful?