Vue中watch的用法

watch的作用

1、在vue中watch用来监听数据的变化，一旦发生变化可以执行一些其他操作

2、watch就是当值第一次绑定的时候，是不会执行监听函数的，只有值诞生改变才会执行。如果需要在第一次绑定的时候也执行函数，则需要用到immediate属性，比如当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate设为true。

3、handler方法：immediate表示在watch中首次绑定的时候，是否执行handler，值为TRUE则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化时才执行

4、deep，当需要监听一个对象的变化时，普通的watch方法无法监听带对象内部属性的变化，只有data中的数据才能够坚挺到变化，此时需要deep属性进行深度监听，设置deep：true，当对象的属性较多是，每个属性的变化都会执行handler

// 1. 普通数据类型：
         <input type="text" v-model="userName"/>  
        //监听   当userName值发生变化时触发
        watch: {
            userName (newName, oldName) {
                console.log(newName)
            }
        }
        
        watch: {
            userName: {
                handler (newName, oldName) {
                    console.log(newName)
                },
                immediate: true
            }
        }
缺点：
只有一个缺点 就是当值第一次绑定的时候 不会执行监听函数，只有当值改变的时候 才会执行
如果我们想在第一次绑定的时候执行此监听函数 则需要 设置 ** immediate为true**

//2.  对象类型：
当需要监听对象的改变时，此时就需要设置deep为true
        <input type="text" v-model="cityName.name" />
        data (){
            return {
                cityName: {name:'北京'}
            }
        },
        watch: {
            cityName: {
                handler(newName, oldName) {
                    console.log(newName)
                },
                immediate: true,
                deep: true
            }
        }
注意点：如果对象的属性较多，可以之监听某一个属性    'cityName.name':
//只监听对象的其中一个属性值
watch: {
    'cityName.name': {
        handler(newVal, oldVal) {
            console.log(newVal, oldVal)
        },
        deep: true,
        immediate: true
    }

//注意点：
在watch中不要使用箭头函数，因为箭头函数中的this是指向当前作用域

watch和computed的区别

1、computed是计算属性；watch是监听，监听data中的数据变化。

2、computed支持缓存，当其依赖的属性的值发生变化时，计算属性会重新计算，反之，则使用缓存中的属性值；watch不支持缓存，当对应属性发生变化的时候，响应执行。

3、computed不支持异步，有异步操作时无法监听数据变化；watch支持异步操作。

4、computed第一次加载时就监听；watch默认第一次加载时不监听。

5、computed中的函数必须调用return；watch不是。

6、使用场景：

computed：一个属性受到多个属性影响，如：购物车商品结算。

watch：一个数据影响多条数据，如：搜索数据。

数据变化响应，执行异步操作，或高性能消耗的操作，watch为最佳选择。

简单说一下computed和watch的区别。

先看代码，两者怎么实现的。

<div id="app">
        <input type="text" v-model="firstName"><br>
        <input type="text" v-model="lastName"><br>
        <h2>{{fullName()}}</h2>
    </div>
<script>
  var app = new Vue({
            el: '#app',
            data: {
                firstName: '张',
                lastName: '三',
                fullName: '张三'
            },
            // watch 监视、监听，在此处定义监听器
            // 作用：监视data中的数据变化
            watch: {
                // 侦听器以函数的形式定义，函数名称就是监视的数据的名称，参数就是数据变化后的新值
                firstName(val) {
                    console.log(val);
                    this.fullName = val + this.lastName;
                },
                lastName(val) {
                    console.log(val);
                    this.fullName = this.firstName + val;
                }
            }
        })
        //计算属性方式实现
        var app = new Vue({
            el: '#app',
            data: {
                firstName: '张',
                lastName: '三',
            },
            computed: {
                // 计算属性在某些场景下（此示例），要比侦听器代码精简。
                fullName() {
                    return this.firstName + this.lastName;
                }
            }
        })
</script>