Vue 组件中5种Watch形式的应用
解释

watch是一个对象，这个对象的键是须要察看的表达式，值能够是间接办法、办法名、蕴含选项的对象等等，Vue实例会在实例化时调用$watch(), 遍历watch对象的每一个属性，并且察看。

留神，本文不会论述watch对象的具体实现源码，只是介绍watch对象键值的五种应用形式。

格局：
watch {    { [key: string]: string | Function | Object | Array }}
应用形式：

  1. 最间接的，间接用办法作为回调函数（或者说作为值）。

    // 咱们用vue的v-model指令来验证下watch对象的性能<div>  <p>{{msg}}</p>  <input v-model="msg"></div>
    // pattern1 directly method valuewatch {    // msg1 为表达式， function(oldVal, newVal)为匿名函数，作为回调函数    msg1: function (newVal, oldVal) {        console.log("oldVal is: " + oldVal + " newVal is: " + newVal);    }}

    在双向绑定输入框输出一些值后，看console里watch对象的成果：

    // 初始值为init，输出init1之后的console输入oldVal is: init newVal is: init1

    留神，回调函数的第一个参数是新的值，第二个是旧的值。

  2. 函数名作为值

    // 同样用v-model验证成果<div>  <p>{{msg2}}</p>  <input v-model="msg2"></div>
    // pattern 2 use function name as valuewatch {    msg2: "methodway"}methods: {    methodway (newVal, oldVal) {      console.log("oldVal is: " + oldVal + " newVal is: " + newVal);    }}

    console输入：

    // 初始值为init，输出init1之后的console输入oldVal is: init newVal is: init1

  3. 察看键为对象/数组时，须要追加选项deep

    当咱们的被观察者是一个对象/数组的时候，咱们扭转了对象外部属性的值，用通常的watch形式是捕获不到的。因为对于数组、对象自身来说，它并没有扭转。这个时候须要加上选项deep: true

    <div>  <p>{{msg3.attr1}}</p>  <input v-model="msg3.attr1"></div>

    如果应用通常形式，扭转了msg3的attr1属性值，watch并不会响应。须要加上deep选项：

    watch {    msg3: {      handler: function (newVal, oldVal) {          console.log("oldVal is: " + oldVal + " newVal is: " + newVal);      },      // 加上这个选项之后，不管被嵌套得多深，被察看的对象的property一旦扭转都会响应      deep:true    }}

    然而在这里的一个输入会有一个问题，尽管你能捕捉到对象的变更，然而你会发现oldVal和newVal是一样的，console输入：

    // 对象的回调函数种，oldVal和newVal是统一的oldVal is: {"attr1":"123","attr2":"2"} newVal is: {"attr1":"123","attr2":"2"}

    也就是说，尽管咱们能捕捉到变动，然而从watch对象外面的回调来说，咱们无奈精确抓取到变动的属性。如果想做到这点，咱们能够独自察看对象的某个属性msg3.attr1或者应用computed做中间层来察看。

    // computed做中间层，留神，并不是非要这样多写一层进行察看，能够间接察看属性computed: {  msg3attr() {    return this.msg3.attr1;  }}watch {    msg3attr:       function(newVal, oldVal) {          console.log("oldVal is: " + oldVal + " newVal is: " + newVal);      }}

    这样就能察看到属性值的变动：

    oldVal is: "12" newVal is: "123"

  4. 实例化后立即回调

    咱们有时候会有要求Vue对象实例化后，立即回调某一个Watch对象的键值。这个时候只须要加上一个选项immediate: true即可

    <div>  <p>{{msg4}}</p>  <input v-model="msg4"></div>
    watch {  msg4: {    handler(newVal, oldVal) {      console.log("this should be called immediately.");    },    // 加上immediate选项后，实例化后立即回调一次    immediate:true  },}

    console输入：

    // 留神，咱们并没有扭转input的值，实例化之后立即进行了回调this should be called immediately.

  5. 回调函数数组

    如果咱们有多个回调函数须要执行，咱们能够将Watch的值赋值为一个数组，数组内的函数将被逐个调用。

    <div>  <p>{{msg5}}</p>  <input v-model="msg5"></div>
    watch {  msg5: [    "methodchain1",    function methodchain2(oldVal,newVal) {      console.log("second method");    },    {      handler(newVal, oldVal) {      console.log("third method")    },deep:true    }  ]},methods: {  methodchain1(newVal, oldVal) {    console.log("first method");  }}

    当msg5变更之后，console的输入：

    // 回调函数被逐个调用first methodsecond methodthird method

  • 值得一提的是，watch对象中，有时候键能够省略，咱们用键的名字间接用作回调函数的名称，同样能失常察看到表达式的变动。

    <div>  <p>{{msg}}</p>  <input v-model="msg"></div>
    watch {  // 间接用表达式作为回调函数名称，成果统一  msg(newVal, oldVal) {    console.log("oldVal is: " + oldVal + " newVal is: " + newVal);  }}

    console输入：

    oldVal is: init newVal is: 1

须要特地留神的是，Watch对象中的回调函数不应该用箭头函数进行定义，它将导致上下文的凌乱，this将指向谬误的上下文。

以上为回调函数在组件中的五种应用办法，欢送点赞、评论、珍藏。