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