computed 与 watch和 methods的异同之处

computed是计算属性

computed是计算属性：减少模板{{}}的复杂度。

在模板中放入太多的逻辑会让模板过重且难以维护。对于任何复杂逻辑，你都应当使用计算属性 把复杂的运算逻辑写到computed的函数里面，再在模板里引用就使逻辑变得简单明了了

使用方法：

computed与data并列，将一系列操作封装成一个方法，放到computed里，调用时直接写方法名，不用加( )

new Vue({
  el:"#app",
  data:{
    user:{
      email:"dong@qq.com",
      nickname:"oldUath",
      phone:"12812345678"
    }
  },
  //计算属性
  computed:{
    displayName(){
        //返回一个结果
      const user=this.user
      return user.nickname ||user.phone||user.email
    }
  },
  template:`
      <div>
      {{displayName}}
      </div>
  `
})

watch侦听器

watch：侦听器：观察Vue实例上的数据变动,只要指定的数据改变就会执行预定的函数

当需要在数据变化时执行异步或开销较大的操作时;在vue里面如果把一个对象原封不动的再赋值给他，那么他的地址就变了

    <div id="app">
        {{msg}} 
        <br> 
        改变了吗? {{isChange}}
        <button @click="change">改变</button>
    </div>

    new Vue({
      el: "#app",
      data: {
            msg:'欲穷千里目',
          isChange:'No'
      },
        watch:{
        //只要msg改变,这个方法就会执行
        msg(val,oldVal){
            this.isChange = 'Yes'
        }
      },
      methods:{
        change(){
            this.msg = '更上一层楼'
        }
      }
    })

methods方法 ：事件处理函数

computed 与 watch和 methods的异同?

• computed就是计算属性的意思，是计算一个值的，不需要加括号可以当属性一样来用，根据依赖会自动缓存，如果依赖不变，computed的值就不会重新计算；

• watch就是监听的意思，watch有两个选项，第一个是immediate表示是否在第一次渲染时执行这个函数，第二个是deep，监听一个对象是否要看这个对象里面属性的变化，如果某个属性变化了就去执行这一个函数

• computed 和 methods 相比，最大区别是computed 有缓存：如果 computed 属性依赖的属性没有变化，那么 computed 属性就不会重新计算。methods 则是看到一次计算一次。

• watch 和 computed 相比，computed 是计算出一个属性，而 watch 则可能是做别的事情，如上报数据