watch单个监听
computed多个监听
当watch监听复杂数据类型的时候需要做深度监听deep
watch深度监听deep表达式：

// 深度监听 watch:{ msg:{ handler(val, oldval){ if(val.text == 'love'){ alert('I Love You') } }, deep:true//开启深度监听 } }

watch深度监听

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script type="text/javascript" src="vue.js"></script><div id="app"> <div>watch监听器</div> <input type="text" v-model="msg.text"></div><script type="text/javascript"> new Vue({ el:'#app', data(){ return { msg:{text:''}, } }, // 深度监听 watch:{ msg:{ handler(val, oldval){ if(val.text == 'love'){ alert('I Love You') } }, deep:true//开启深度监听 } } })</script></body></html>

watch监听

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script type="text/javascript" src="vue.js"></script><div id="app"> <div>watch监听器</div> <input type="text" v-model="msg"></div><script type="text/javascript"> new Vue({ el: '#app', data() { return { msg: '' } }, // 深度监听 watch: { msg: { handler(val, oldval) { if (val == 'love') { alert('I Love You') } } } } })</script></body></html>

computed多监听

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script type="text/javascript" src="vue.js"></script><div id="app"> <div>computed监听</div> <br> (<input type="text" v-model="n1">+ <input type="text" v-model="n2">)* <input type="text" v-model="n3">={{result}}</div><script type="text/javascript"> new Vue({ el:'#app', data(){ return { n1:'', n2:'', n3:'' } }, // computed监听多个 computed:{ result(){ return (Number(this.n1)+Number(this.n2))*Number(this.n3) } } })</script></body></html>