Vue——监听器watch

使用watch来侦听data中数据的变化，watch中的属性（watch是对象格式）一定是data 中已经存在的数据。

使用场景：数据变化时执行异步或开销比较大的操作。

典型应用：http://www.pinyinzi.cn/

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
        }
     }