Vue回头路（一）

 

 

1.计算属性

 <div id="example">
   <p>Original message: "{{ message }}"</p>
   <p>Computed reversed message: "{{ reversedMessage }}"</p>
 </div>

 var vm = new Vue({
   el: '#example',
   data: {
     message: 'Hello'
   },
   computed: {
     // 计算属性的 getter
     reversedMessage: function () {
       // `this` 指向 vm 实例
       return this.message.split('').reverse().join('')
     }
   }
 })

Computed	计算属性是基于它们的响应式依赖进行缓存的只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。	简单来说呢，就是计算属性的结果是可以进行缓存的。 1. 适用于一些重复使用数据或复杂及费时的运算。我们可以把它放入computed中进行计算, 然后会在computed中缓存起来, 下次就可以直接获取了。 2. 如果我们需要的数据依赖于其他的数据的话, 我们可以把该数据设计为computed中。
Method	当检测到数值存在变化后，直接调用对应的方法，进行计算。但是不缓存结果。	Method并非是响应式的。只有当Dom中发生一些事件需要作出回应时，或者被一些其他指令调用
Watch	设置对某个属性进行监听，当检测到属性变化时出发对应的规则	只能检测一个属性，但是一般来说 Try to use computed properties for everything. If it won’t work as a computed property, use a watcher.

 

譬如1中所举的例子，我们通过methods或者watch也可以实现相同的效果，那么他们的区别在哪呢？

2.Compted || Methods || Watch

 

如上，当message发生变化以后，由于data的message已经和当前的vm.message 进行绑定，故也会修改vm.message 的值，同时 所有依赖于该值的绑定都会刷新，因此导致触发vm.reversedMessage