vue源码理解——实例方法篇

实例方法：

与数据相关的实例方法有3个，分别是vm.$set、vm.$delete和vm.$watch。它们是在stateMixin函数中挂载到Vue原型上的，代码如下：

import {set,del} from '../observer/index'

export function stateMixin (Vue) {
    Vue.prototype.$set = set
    Vue.prototype.$delete = del
    Vue.prototype.$watch = function (expOrFn,cb,options) {}
}

接下来，我们就来分析这3个与数据相关的实例方法其内部的原理都是怎样的

vm.$watch

用法回顾

在介绍方法的内部原理之前，我们先根据官方文档示例回顾一下它的用法。

vm.$watch( expOrFn, callback, [options] )

• 参数：

  • {string | Function} expOrFn

  • {Function | Object} callback

  • {Object} [options]

 

    - `{boolean} deep`
    - `{boolean} immediate`

- **返回值**：`{Function} unwatch`

- **用法**：

  观察 `Vue` 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式，用一个函数取代。

  注意：在变异 (不是替换) 对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。`Vue` 不会保留变异之前值的副本。

- **示例**：

  ```javascript
  // 键路径
  vm.$watch('a.b.c', function (newVal, oldVal) {
    // 做点什么
  })
  
  // 函数
  vm.$watch(
    function () {
      // 表达式 `this.a + this.b` 每次得出一个不同的结果时
      // 处理函数都会被调用。
      // 这就像监听一个未被定义的计算属性
      return this.a + this.b
    },
    function (newVal, oldVal) {
      // 做点什么
    }
  )

• vm.$watch 返回一个取消观察函数，用来停止触发回调：

  var unwatch = vm.$watch('a', cb) // 之后取消观察 unwatch()

• 选项：deep

  为了发现对象内部值的变化，可以在选项参数中指定 deep: true 。注意监听数组的变动不需要这么做。

  vm.$watch('someObject', callback, { deep: true }) vm.someObject.nestedValue = 123 // callback is fired

• 选项：immediate

  在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调：

  vm.$watch('a', callback, { immediate: true }) // 立即以 `a` 的当前值触发回调

  注意在带有 immediate 选项时，你不能在第一次回调时取消侦听给定的 property。

// 这会导致报错
var unwatch = vm.$watch(
  'value',
  function () {
    doSomething()
    unwatch()
  },
  { immediate: true }
)

如果你仍然希望在回调内部调用一个取消侦听的函数，你应该先检查其函数的可用性：

var unwatch = vm.$watch(
  'value',
  function () {
    doSomething()
    if (unwatch) {
      unwatch()
    }
  },
  { immediate: true }
)