watch和computed的使用及区别
一、watch侦听器
watch侦听器允许开发者监听数据的变化，从而针对数据的变化做特定的操作。
immediate选项
默认情况下，组件在初次加载完毕后不会调用watch侦听器。如果想让watch侦听器立即被调用，则需使用immediate选项。
deep选项
当watch侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。需要使用deep选项
监听对象单个属性的变化
<template><input type="text" v-model.trim="msg"><input type="text" v-model.trim="info.msg"><input type="text" v-model.trim="info.value">
</template>
<script>
export default {data(){return{msg:'zs',info:{msg:'',value:''}}},watch:{//简写，用于基本的 watch 需求。不支持更多配置选项，如 immediate 和 deep。// msg(newVal,oldVal){// console.log('newVal,oldVal', newVal,oldVal);// },msg:{handler(newVal,oldVal){console.log('newVal,oldVal', newVal,oldVal);},immediate:true},info:{handler(newVal,oldVal){console.log('深度监听对象属性newVal,oldVal', newVal,oldVal);},immediate:true,deep:true},'info.msg':{handler(newVal,oldVal){console.log('监听单个属性newVal,oldVal', newVal,oldVal);},immediate:true,deep:true}}
}
</script>二、计算属性computed
计算属性本质上是一个function函数，可以监听data中数据的变化，并return一个计算后的值，供组件渲染dom时使用。
计算属性会缓存计算的结果，只有在计算属性的依赖项发生变化时，才会重新计算。
计算属性只能当作普通数据项使用，不能当作方法调用（不能使用括号调用）。
<template><div><input type="text" v-model.number="num"></div><div>{{ plus }}</div>
</template>
<script>export default {name:'demo',data(){return{num:111}},computed:{plus(){return this.num*2}}}
</script>三、计算属性和侦听器的区别
应用场景不同：
计算属性侧重于监听多个值的变化，最终计算并返回一个新值
侦听器侧重于监听单个数据的变化，最终执行特定的业务处理，不需要有任何返回值