vue-watch 基本使用以及高价使用以及回调函数的详细

Watch的使用场景

1，主要任务就是监控变量的变化，一个数据影响多个数据

watch的特点：

1.当变量变化时调用函数

2.如果不设置immediate则在初始绑定值时不会执行

watch有两个选项：

1.deep选项：表示深层遍历，当需要监控对象内部值的变化时，可以在选项参数中指定 deep: true。注意监听数组的变动不需要这么做

2.immediate选项：如果在选项参数中指定 immediate: true，将立即触发监控中变量的函数（如果我们需要在最初绑定值的时候也执行监控函数，就需要用到immediate属性）

一，在vue中基本用法

FirstName:

data() {

            return {

              firstName: 'Dawei',

            }

        },

Watch:{

//firstName是data的return返回对象中的数组变量，newName是属性变化后的值，oldName是属性变化前的值

firstName(newName, oldName) {

          // this.fullName = newName + ' ' + this.lastName;

          console.log(newName)

          console.log(oldName)

        },

}

二，使用 immediate和handler

使用场景：

当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行

当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate设为true

firstName:{

          handler(newName, oldName){

            console.log(newName)

            console.log(oldName)

          },

          immediate: true

        }

监听的数据后面写成对象形式，包含handler方法和immediate，之前我们写的函数其实就是在写这个handler方法；

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

三，deep

当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。

  firstName:{

          handler(newName, oldName){

            console.log(newName)

            console.log(oldName)

          },

          deep: true,

          immediate: true

        }