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 则可能是做别的事情，如上报数据
