computed是计算属性

computed是计算属性：减少模板{{}}的复杂度。
在模板中放入太多的逻辑会让模板过重且难以维护。对于任何复杂逻辑，你都应当使用计算属性 把复杂的运算逻辑写到computed的函数里面，再在模板里引用就使逻辑变得简单明了了
使用方法：
computed与data并列，将一系列操作封装成一个方法，放到computed里，调用时直接写方法名，不用加( )

  1. new Vue({
  2.   el:"#app",
  3.   data:{
  4.     user:{
  5.       email:"dong@qq.com",
  6.       nickname:"oldUath",
  7.       phone:"12812345678"
  8.     }
  9.   },
  10.   //计算属性
  11.   computed:{
  12.     displayName(){
  13.         //返回一个结果
  14.       const user=this.user
  15.       return user.nickname ||user.phone||user.email
  16.     }
  17.   },
  18.   template:`
  19.       <div>
  20.       {{displayName}}
  21.       </div>
  22.   `
  23. })

watch侦听器

watch：侦听器：观察Vue实例上的数据变动,只要指定的数据改变就会执行预定的函数
当需要在数据变化时执行异步或开销较大的操作时;在vue里面如果把一个对象原封不动的再赋值给他，那么他的地址就变了

  1. <div id="app">
  2.         {{msg}} 
  3.         <br> 
  4.         改变了吗? {{isChange}}
  5.         <button @click="change">改变</button>
  6.     </div>
  7.     new Vue({
  8.       el: "#app",
  9.       data: {
  10.             msg:'欲穷千里目',
  11.           isChange:'No'
  12.       },
  13.         watch:{
  14.         //只要msg改变,这个方法就会执行
  15.         msg(val,oldVal){
  16.             this.isChange = 'Yes'
  17.         }
  18.       },
  19.       methods:{
  20.         change(){
  21.             this.msg = '更上一层楼'
  22.         }
  23.       }
  24.     })
  25. 复制代码

methods方法 ：事件处理函数

computed 与 watch和 methods的异同?

  • computed就是计算属性的意思，是计算一个值的，不需要加括号可以当属性一样来用，根据依赖会自动缓存，如果依赖不变，computed的值就不会重新计算；
  • watch就是监听的意思，没有缓存。watch有两个选项，第一个是immediate表示是否在第一次渲染时执行这个函数，第二个是deep，监听一个对象是否要看这个对象里面属性的变化，如果某个属性变化了就去执行这一个函数
  • computed 和 methods 相比，最大区别是computed 有缓存：如果 computed 属性依赖的属性没有变化，那么 computed 属性就不会重新计算。methods 则是看到一次计算一次。
  • watch 和 computed 相比，computed 是计算出一个属性，有缓存，而 watch 则可能是做别的事情，无缓存，如上报数据