- A+
所属分类：Web前端
使用watch来侦听data中数据的变化，watch中的属性（watch是对象格式）一定是data 中已经存在的数据。
使用场景：数据变化时执行异步或开销比较大的操作。
a. 监听器监听data中数据的变化（当前）
b. 监听器watch属性值是一个对象
c. 监听器对象里的属性就是data中已经存在的数据的名
d. 监听器里面属性的值是一个处理函数。函数有2个形参：新值、旧值
e. watch默认只能监听字面量（data中的表面数据，不能监听data中的数组对象等里面数据的变化）
想要监听对象里面的数据，需要深度监听
语法：
objname: {handler(val),deep: true}
函数handler参数就一个：对象是引用传值
深度监听的处理函数的名字handler不能变其他的，只能是这个名字
watch与computed的区别？
a. 在实现相同功能的时候，计算属性的代码复杂度要比监听器要低；
b. 计算属性支持深度监听（默认）
后期使用上如何选择？
a. 能用计算属性就用计算属性；
b. 如果是异步等代码，这个时候可以优先考虑watch
c. 在深度监听的时候建议考虑计算属性
d. 只是学习测试的时候，看你心情
<div class='app'> <input type="text" placeholder="姓" v-model="xing"> <input type="text" placeholder="名" v-model="ming"> <input type="text" placeholder="姓名" v-model="xm" > </div> </body> <script src='./js/vue.js'></script> <script> new Vue({ el: '.app', data: { message: '', directives: '', xing:'', ming:'', xm:'', }, watch:{ // 监听姓的变化,具有两个参数，分别表示新的数据和旧的数据 xing:function(x,j){ // console.log(x,j); // 将新的数据复制到“姓名”中 this.xm = x + this.ming }, ming:function(x,j){ this.xm = this.xing + x } } })
深度监听：
将需要监听的数据放置到一个对象中，在html标签元素的自定义属性v-model的值上添加对象的名称，最后在监听中使用深度监听的语法
HTML语句 <input type="text" placeholder="姓" v-model="name.xing"> <input type="text" placeholder="名" v-model="name.ming"> <input type="text" placeholder="姓名" v-model="name.xm" > //数据： data: { name:{ xing:'', ming:'', xm:'', } }, //监听： watch:{ // 监听这个对象 name:{ // 第一个值适用于监听的函数，具有一个参数，表示这个对象 handler(val){ // console.log(val) val.xm = val.xing + val.ming }, // 深度监听的标志 deep:true } }
使用计算属性
HTML <input type="text" placeholder="姓" v-model="xing"> <input type="text" placeholder="名" v-model="ming"> <input type="text" placeholder="姓名" v-model="xm" > 直接在data里面添加： xing:'', ming:'', 计算属性： computed:{ xm(){ return this.xing + this.ming } }
使用计算属性（深度）：
HTML更改
<input type="text" placeholder="姓" v-model="name.xing"> <input type="text" placeholder="名" v-model="name.ming"> <input type="text" placeholder="姓名" v-model="xm" >
数据修改
name:{ xing:'', ming:'', }
计算属性
computed:{ xm(){ return this.name.xing + this.name.ming } }
