computed与watch的区别

• computed：计算属性，用于派生数据。业务逻辑处理，根据页面中某个值的变化而变化，做一些数据处理过滤，只能处理同步代码。另外，也可以通过函数改变，但是computed只在数据属性变化时重新计算，computed会把值缓存起来供下次使用

• computed 的缓存机制是怎样的？

  computed 通过依赖追踪实现缓存。首次计算时会收集所有依赖的响应式数据，当依赖变化时标记为'脏'，下次访问时重新计算。依赖不变时直接返回缓存值。

• methods：函数每次调用都会执行

• watch：数据监听执行副作用，如异步请求、DOM操作，监听页面中某个特定状态的变化，监听的对象或变量必须在data里面声明，也可以监听路由的变化

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

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'，
    user: {
      id: '001'
    }
  },
  // 计算属性
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }，
  // 数据监听
  watch:{
    message:function(newVal, oldVal){
        this.fullname = this.lastname + " " + this.firstname
    }
    user: {
      handler: function(newVal, oldVal){
        console.log(oldVal.id)
      }，
      deep: true  // 深度监听 对象中的属性发生改变
    },
    '$route.path': function (newVal, oldVal) {
       if (newVal !== oldVal) {
          console.log('路由变化');
       }
    },
    $route( to , from ){   
      console.log( to , from )
      // to , from 分别表示从哪跳转到哪，都是一个对象
      // to.path  ( 表示的是要跳转到的路由的地址 eg: /home );
   }
})