Vue的高级特性

Vue高级特性（一）

Vue 的优缺点

优点

• 创建单页面应用的轻量级Web应用框架
• 简单易用
• 双向数据绑定
• 组件化的思想
• 虚拟DOM
• 数据驱动视图

缺点

• 不支持IE8

• SPA 的理解

  SPA是Single-Page-Application的缩写，翻译过来就是单页应用。在WEB页面初始化时一同加载Html、Javascript、Css。一旦页面加载完成，SPA不会因为用户操作而进行页面重新加载或跳转，取而代之的是利用路由机制实现Html内容的变换。

优点

• 良好的用户体验，内容更改无需重载页面。
• 基于上面一点，SPA相对服务端压力更小。
• 前后端职责分离，架构清晰。

缺点

• 由于单页WEB应用，需在加载渲染页面时请求JavaScript、Css文件，所以耗时更多。
• 由于前端渲染，搜索引擎不会解析JS，只能抓取首页未渲染的模板，不利于SEO。
• 由于单页应用需在一个页面显示所有的内容，默认不支持浏览器的前进后退。

缺点3，想必有人和我有同样的疑问。

通过资料查阅，其实是前端路由机制解决了单页应用无法前进后退的问题。Hash模式中Hash变化会被浏览器记录（onhashchange事件），History模式利用 H5 新增的pushState和replaceState方法可改变浏览器历史记录栈。

new Vue(options) 都做了些什么

如下 Vue 构造函数所示，主要执行了 this._init(options)方法，该方法在initMixin函数中注册。

import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
import { warn } from '../util/index'

function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  // Vue.prototype._init 方法
  this._init(options)
}

// _init 方法在 initMixin 注册
initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

export default Vue

查看initMixin方法的实现，其他函数具体实现可自行查看，这里就不贴出了。

let uid = 0
export function initMixin() {
  Vue.prototype._init = function(options) {
    const vm = this
    vm._uid = uid++
    vm._isVue = true
   
    // 处理组件配置项
    if (options && options._isComponent) {
       /**
       * 如果是子组件，走当前 if 分支
       * 函数作用是性能优化：将原型链上的方法都放到vm.$options中，减少原型链上的访问
       */   
      initInternalComponent(vm, options)
    } else {
      /**
       * 如果是根组件，走当前 else 分支
       * 合并 Vue 的全局配置到根组件中，如 Vue.component 注册的全局组件合并到根组件的 components 的选项中
       * 子组件的选项合并发生在两个地方
       * 1. Vue.component 方法注册的全局组件在注册时做了选项合并
       * 2. { component: {xx} } 方法注册的局部组件在执行编译器生成的 render 函数时做了选项合并
       */  
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      )
    }
  
    if (process.env.NODE_ENV !== 'production') {
      initProxy(vm)
    } else {
      vm._renderProxy = vm
    }

    vm._self = vm
    /**
    * 初始化组件实例关系属性，如：$parent $root $children $refs
    */
    initLifecycle(vm)
    /**
    * 初始化自定义事件
    * <component @click="handleClick"></component>
    * 组件上注册的事件，监听者不是父组件，而是子组件本身
    */
    initEvents(vm)
    /**
    * 解析组件插槽信息，得到vm.$slot，处理渲染函数，得到 vm.$createElement 方法，即 h 函数。
    */
    initRender(vm)
    /**
    * 执行 beforeCreate 生命周期函数
    */
    callHook(vm, 'beforeCreate')
    /**
    * 解析 inject 配置项，得到 result[key] = val 的配置对象，做响应式处理且代理到 vm 实力上
    */
    initInjections(vm) 
    /**
    * 响应式处理核心，处理 props、methods、data、computed、watch
    */
    initState(vm)
    /**
    * 解析 provide 对象，并挂载到 vm 实例上
    */
    initProvide(vm) 
    /**
    * 执行 created 生命周期函数
    */
    callHook(vm, 'created')

    // 如果 el 选项，自动执行$mount
    if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }
  }
}

MVVM 的理解

MVVM是Model-View-ViewModel的缩写。Model 代表数据层，可定义修改数据、编写业务逻辑。View 代表视图层，负责将数据渲染成页面。ViewModel 负责监听数据层数据变化，控制视图层行为交互，简单讲，就是同步数据层和视图层的对象。ViewModel 通过双向绑定把 View 和 Model 层连接起来，且同步工作无需人为干涉，使开发人员只关注业务逻辑，无需频繁操作DOM，不需关注数据状态的同步问题。

如何实现 v-model

v-model指令用于实现input、select等表单元素的双向绑定，是个语法糖。

原生 input 元素若是text/textarea类型，使用 value 属性和 input 事件。
原生 input 元素若是radio/checkbox类型，使用 checked属性和 change 事件。
原生 select 元素，使用 value 属性和 change 事件。

input 元素上使用 v-model 等价于

<input :value="message" @input="message = $event.target.value" />

实现自定义组件的 v-model

自定义组件的v-model使用prop值为value和input事件。若是radio/checkbox类型，需要使用model来解决原生 DOM 使用的是 checked 属性 和 change 事件，如下所示。

// 父组件
<template>
  <base-checkbox v-model="baseCheck" />
</template>
复制代码
// 子组件
<template>
  <input type="checkbox" :checked="checked" @change="$emit('change', $event.target.checked)" />
</template>
<script>
export default {
  model: {
    prop: 'checked',
    event: 'change'
  },
  prop: {
    checked: Boolean
  }
}
</script>

如何理解 Vue 单向数据流

我们经常说 Vue 的双向绑定，其实是在单向绑定的基础上给元素添加 input/change 事件，来动态修改视图。Vue 组件间传递数据仍然是单项的，即父组件传递到子组件。子组件内部可以定义依赖 props 中的值，但无权修改父组件传递的数据，这样做防止子组件意外变更父组件的状态，导致应用数据流向难以理解。

如果在子组件内部直接更改prop，会遇到警告处理。

2 种定义依赖 props 中的值

//通过 data 定义属性并将 prop 作为初始值。
<script>
export default {
  props: ['initialNumber'],
  data() {
    return {
      number: this.initailNumber
    }
  }
}
</script>

用 computed 计算属性去定义依赖 prop 的值。若页面会更改当前值，得分 get 和 set 方法。

<script>
export default {
  props: ['size'],
  computed: {
    normalizedSize() {
      return this.size.trim().toLowerCase()
    }
  }
}
</sciprt>

Vue 响应式原理

核心源码位置：vue/src/core/observer/index.js

响应式原理3个步骤：数据劫持、依赖收集、派发更新。

数据分为两类：对象、数组。

对象

遍历对象，通过Object.defineProperty为每个属性添加 getter 和 setter，进行数据劫持。getter 函数用于在数据读取时进行依赖收集，在对应的 dep 中存储所有的 watcher；setter 则是数据更新后通知所有的 watcher 进行更新。

核心源码

function defineReactive(obj, key, val, shallow) {
  // 实例化一个 dep， 一个 key 对应一个 dep
  const dep = new Dep()
 
  // 获取属性描述符
  const getter = property && property.get
  const setter = property && property.set
  if ((!getter || setter) && arguments.length === 2) {
    val = obj[key]
  }

  // 通过递归的方式处理 val 为对象的情况，即处理嵌套对象
  let childOb = !shallow && observe(val)
  
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    // 拦截obj.key，进行依赖收集
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      // Dep.target 是当前组件渲染的 watcher
      if (Dep.target) {
        // 将 dep 添加到 watcher 中
        dep.depend()
        if (childOb) {
          // 嵌套对象依赖收集
          childOb.dep.depend()
          // 响应式处理 value 值为数组的情况
          if (Array.isArray(value)) {
            dependArray(value)
          }
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      // 获取旧值
      const value = getter ? getter.call(obj) : val
      // 判断新旧值是否一致
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      if (process.env.NODE_ENV !== 'production' && customSetter) {
        customSetter()
      }

      if (getter && !setter) return
      // 如果是新值，用新值替换旧值
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      // 新值做响应式处理
      childOb = !shallow && observe(newVal)
      // 当响应式数据更新，依赖通知更新
      dep.notify()
    }
  })
}

数组

用数组增强的方式，覆盖原属性上默认的数组方法，保证在新增或删除数据时，通过 dep 通知所有的 watcher 进行更新。

核心源码

const arrayProto = Array.prototype
// 基于数组原型对象创建一个新的对象
export const arrayMethods = Object.create(arrayProto)

const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]

methodsToPatch.forEach(function (method) {
  const original = arrayProto[method]
  // 分别在 arrayMethods 对象上定义7个方法
  def(arrayMethods, method, function mutator (...args) {
    // 先执行原生的方法
    const result = original.apply(this, args)
    const ob = this.__ob__
    let inserted
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args
        break
      case 'splice':
        inserted = args.slice(2)
        break
    }
    // 针对新增元素进行响应式处理
    if (inserted) ob.observeArray(inserted)
    // 数据无论是新增还是删除都进行派发更新
    ob.dep.notify()
    return result
  })
})

手写观察者模式

当对象间存在一对多的关系，使用观察者模式。比如：当一个对象被修改，会自动通知依赖它的对象。

let uid = 0
class Dep {
  constructor() {
    this.id = uid++
    // 存储所有的 watcher
    this.subs = []
  }
  addSub(sub) {
    this.subs.push(sub)
  }
  removeSub(sub) {
    if(this.subs.length) {
      const index = this.subs.indexOf(sub)
      if(index > -1) return this.subs.splice(index, 1)
    }
  }
  notify() {
    this.subs.forEach(sub => {
      sub.update()
    })
  }
}

class Watcher {
  constructor(name) {
    this.name = name
  }
  update() {
    console.log('更新')
  }
}

手写发布订阅模式

与观察者模式相似，区别在于发布者和订阅者是解耦的，由中间的调度中心去与发布者和订阅者通信。

Vue响应式原理个人更倾向于发布订阅模式。其中 Observer 是发布者，Watcher 是订阅者，Dep 是调度中心。

vue中数据绑定原理的设计模式到底观察者还是发布订阅？[4]，知乎有相关争论，感兴趣的可以看下。

class EventEmitter {
  constructor() {
    this.events = {}
  }
  on(type, cb) {
    if(!this.events[type]) this.events[type] = []
    this.events[type].push(cb)
  }
  emit(type, ...args) {
    if(this.events[type]) {
      this.events[type].forEach(cb => {
        cb(...args)
      })
    }
  }
  off(type, cb) {
    if(this.events[type]) {
      const index = this.events[type].indexOf(cb)
      if(index > -1) this.events[type].splice(index, 1)
    }
  }
}

关于 Vue.observable 的了解

Vue.observable 可使对象可响应。返回的对象可直接用于渲染函数和计算属性内，并且在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器。

Vue 2.x 中传入的对象和返回的对象是同一个对象。
Vue 3.x 则不是一个对象，源对象不具备响应式功能。

适用的场景：在项目中没有大量的非父子组件通信时，可以使用 Vue.observable 去替代 eventBus和vuex方案。

用法如下

// store.js
import Vue from 'vue'
export const state = Vue.observable({
  count: 1
})
export const mutations = {
  setCount(count) {
    state.count = count
  }
} 

// vue 文件
<template>
  <div>{{ count }}</div>
</template>
<script>
import { state, mutation } from './store.js'
export default {
  computed: {
    count() {
      return state.count
    }
  }
}
</script>

原理部分和响应式原理处理组件 data 是同一个函数，实例化一个 Observe，对数据劫持。

组件中的 data 为什么是个函数

对象在栈中存储的都是地址，函数的作用就是属性私有化，保证组件修改自身属性时不会影响其他复用组件。

Vue 生命周期

• beforeCreate vue实例初始化后，数据观测（data observer）和事件配置之前。data、computed、watch、methods都无法访问。
• created vue实例创建完成后立即调用 ，可访问 data、computed、watch、methods。未挂载 DOM，不能访问 、ref。
• beforeMount 在 DOM 挂载开始之前调用。
• mounted vue实例被挂载到 DOM。
• beforeUpdate 数据更新之前调用，发生在虚拟 DOM 打补丁之前。
• updated 数据更新之后调用。
• beforeDestroy 实例销毁前调用。
• destroyed 实例销毁后调用 。

调用异步请求可在created、beforeMount、mounted生命周期中调用，因为相关数据都已创建。最好的选择是在created中调用。

获取DOM在mounted中获取，获取可用$ref方法，这点毋庸置疑。

Vue 父组件和子组件生命周期执行顺序

加载渲染过程

父先创建，才能有子；子创建完成，父才完整。

顺序：父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

子组件更新过程

1.子组件更新 影响到 父组件的情况。
顺序：父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

2.子组件更新 不影响到 父组件的情况。
顺序：子 beforeUpdate -> 子 updated

父组件更新过程

1.父组件更新 影响到 子组件的情况。
顺序：父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

2.父组件更新 不影响到 子组件的情况。
顺序：父 beforeUpdate -> 父 updated

销毁过程

顺序：父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

父组件如何监听子组件生命周期的钩子函数

两种方式都以 mounted 为例子。

$emit实现

// 父组件
<template>
  <div class="parent">
    <Child @mounted="doSomething"/>
  </div>
</template>
<script>
export default {  
  methods: {
    doSomething() {
      console.log('父组件监听到子组件 mounted 钩子函数')
    }
  }
}
</script>

//子组件
<template>
  <div class="child">
  </div>
</template>
<script>
export default {
  mounted() {
    console.log('触发mounted事件...')
    this.$emit("mounted")
  }
}
</script>

@hook实现

// 父组件
<template>
  <div class="parent">
    <Child @hook:mounted="doSomething"/>
  </div>
</template>
<script>
export default {  
  methods: {
    doSomething() {
      console.log('父组件监听到子组件 mounted 钩子函数')
    }
  }
}
</script>

//子组件
<template>
  <div class="child">
  </div>
</template>
<script>
export default {
  mounted() {
    console.log('触发mounted事件...')
  }
}
</script>

Vue 组件间通讯方式

父子组件通讯

• props 与 $emit
• 与children

隔代组件通讯

• 与listeners
• provide 和 inject

父子、兄弟、隔代组件通讯

• EventBus
• Vuex

v-on 监听多个方法

<button v-on="{mouseenter: onEnter, mouseleave: onLeave}">鼠标进来1</button>

常用的修饰符

表单修饰符

• lazy: 失去焦点后同步信息
• trim: 自动过滤首尾空格
• number: 输入值转为数值类型

事件修饰符

• stop：阻止冒泡
• prevent：阻止默认行为
• self：仅绑定元素自身触发
• once：只触发一次

鼠标按钮修饰符

• left：鼠标左键
• right：鼠标右键
• middle：鼠标中间键

class 与 style 如何动态绑定

class 和 style 可以通过对象语法和数组语法进行动态绑定

对象写法

<template>
  <div :class="{ active: isActive }"></div>
  <div :style="{ fontSize: fontSize }">
</template>
<script>
export default {
  data() {
    return {
      isActive: true,
      fontSize: 30
    }
  }
}
</script>

数组写法

<template>
  <div :class="[activeClass]"></div>
  <div :style="[styleFontSize]">
</template>
<script>
export default {
  data() {
    return {
      activeClass: 'active',
      styleFontSize: {
        fontSize: '12px'
      }
    }
  }
}
</script>

v-show 和 v-if 区别

共同点：控制元素显示和隐藏。

不同点：

• v-show 控制的是元素的CSS（display）；v-if 是控制元素本身的添加或删除。
• v-show 由 false 变为 true 的时候不会触发组件的生命周期。v-if 由 false 变为 true 则会触发组件的beforeCreate、create、beforeMount、mounted钩子，由 true 变为 false 会触发组件的beforeDestory、destoryed方法。
• v-if 比 v-show有更高的性能消耗。

为什么 v-if 不能和 v-for 一起使用

性能浪费，每次渲染都要先循环再进行条件判断，考虑用计算属性替代。

Vue2.x中v-for比v-if更高的优先级。

Vue3.x中v-if 比 v-for 更高的优先级。

computed 和 watch 的区别和运用的场景

computed 和 watch 本质都是通过实例化 Watcher 实现，最大区别就是适用场景不同。

computed

计算属性，依赖其他属性值，且值具备缓存的特性。只有它依赖的属性值发生改变，下一次获取的值才会重新计算。

适用于数值计算，并且依赖于其他属性时。因为可以利用缓存特性，避免每次获取值，都需要重新计算。

watch

观察属性，监听属性值变动。每当属性值发生变化，都会执行相应的回调。

适用于数据变化时执行异步或开销比较大的操作。

slot 插槽

slot 插槽，可以理解为slot在组件模板中提前占据了位置。当复用组件时，使用相关的slot标签时，标签里的内容就会自动替换组件模板中对应slot标签的位置，作为承载分发内容的出口。

主要作用是复用和扩展组件，做一些定制化组件的处理。

插槽主要有3种

默认插槽

// 子组件
<template>
  <slot>
    <div>默认插槽备选内容</div>
  </slot>
</template>

// 父组件
<template>
  <Child>
    <div>替换默认插槽内容</div>
  </Child>
</template>

具名插槽
slot 标签没有name属性，则为默认插槽。具备name属性，则为具名插槽

// 子组件
<template>
  <slot>默认插槽的位置</slot>
  <slot name="content">插槽content内容</slot>
</template>

// 父组件
<template>
   <Child>
     <template v-slot:default>
       默认...
     </template>
     <template v-slot:content>
       内容...
     </template>
   </Child>
</template>

作用域插槽
子组件在作用域上绑定的属性来将组件的信息传给父组件使用，这些属性会被挂在父组件接受的对象上。

// 子组件
<template>
  <slot name="footer" childProps="子组件">
    作用域插槽内容
  </slot>
</template>

// 父组件
<template>
  <Child v-slot="slotProps">
    {{ slotProps.childProps }}
  </Child>
</template>

Vue.$delete 和 delete 的区别

Vue.$delete 是直接删除了元素，改变了数组的长度；delete 是将被删除的元素变成内 undefined ，其他元素键值不变。

Vue.$set 如何解决对象新增属性不能响应的问题

Vue.$set的出现是由于Object.defineProperty的局限性：无法检测对象属性的新增或删除。

源码位置：vue/src/core/observer/index.js

export function set(target, key, val) {
  // 数组
  if(Array.isArray(target) && isValidArrayIndex(key)) {
    // 修改数组长度，避免索引大于数组长度导致splice错误
    target.length = Math.max(target.length, key)
    // 利用数组splice触发响应
    target.splice(key, 1, val)
    return val
  }
  // key 已经存在，直接修改属性值
  if(key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  const ob = target.__ob__
  // target 不是响应式数据，直接赋值
  if(!ob) {
    target[key] = val
    return val
  }
  // 响应式处理属性
  defineReactive(ob.value, key, val)
  // 派发更新
  ob.dep.notify()
  return val
}

实现原理：

• 若是数组，直接使用数组的 splice 方法触发响应式。
• 若是对象，判断属性是否存在，对象是否是响应式。
• 以上都不满足，最后通过 defineReactive 对属性进行响应式处理。

• Vue 异步更新机制

  Vue 异步更新机制核心是利用浏览器的异步任务队列实现的。

当响应式数据更新后，会触发 dep.notify 通知所有的 watcher 执行 update 方法。

dep 类的 notify 方法

notify() {
  // 获取所有的 watcher
  const subs = this.subs.slice()
  // 遍历 dep 中存储的 watcher，执行 watcher.update
  for(let i = 0; i < subs.length; i++) {
    subs[i].update()
  }
}

watcher.update 将自身放入全局的 watcher 队列，等待执行。

watcher 类的 update 方法

update() {
  if(this.lazy) {
    // 懒执行走当前 if 分支，如 computed
    // 这里的 标识 主要用于 computed 缓存复用逻辑
    this.dirty = true
  } else if(this.sync) {
    // 同步执行，在 watch 选项参数传 sync 时，走当前分支
    // 若为 true ，直接执行 watcher.run()，不塞入异步更新队列
    this.run()
  } else {
    // 正常更新走当前 else 分支
    queueWatcher(this)
  }
}

queueWatcher 方法，发现熟悉的 nextTick 方法。看到这可以先跳到nextTick的原理，看明白了再折返。😊

function queueWatcher(watcher) {
  const id = watcher.id
  // 根据 watcher id 判断是否在队列中，若在队列中，不重复入队 
  if (has[id] == null) {
    has[id] = true
    // 全局 queue 队列未处于刷新状态，watcher 可入队
    if (!flushing) {
      queue.push(watcher)
    // 全局 queue 队列处于刷新状态
    // 在单调递增序列寻找当前 id 的位置并进行插入操作
    } else {
      let i = queue.length - 1
      while (i > index && queue[i].id > watcher.id) {
        i--
      }
      queue.splice(i + 1, 0, watcher)
    }
   
    if (!waiting) {
      waiting = true
      // 同步执行逻辑
      if (process.env.NODE_ENV !== 'production' && !config.async) {
        flushSchedulerQueue()
        return
      }
      // 将回调函数 flushSchedulerQueue 放入 callbacks 数组
      nextTick(flushSchedulerQueue)
    }
  }
}

nextTick 函数最终其实是执行 flushCallbacks 函数，flushCallbacks 函数则是运行 flushSchedulerQueue 回调和项目中调用 nextTick 函数传入的回调。

搬运 flushSchedulerQueue 源码看做了些什么

/**
*  更新 flushing 为 true，表示正在刷新队列，在此期间加入的 watcher 必须有序插入队列，保证单调递增
*  按照队列的 watcher.id 从小到大排序，保证先创建的先执行
*  遍历 watcher 队列，按序执行 watcher.before 和 watcher.run，最后清除缓存的 watcher
*/
function flushSchedulerQueue () {
  currentFlushTimestamp = getNow()
  // 标识正在刷新队列
  flushing = true
  let watcher, id

  queue.sort((a, b) => a.id - b.id)
  // 未缓存长度是因为可能在执行 watcher 时加入 watcher
  for (index = 0; index < queue.length; index++) {
    watcher = queue[index]
    if (watcher.before) {
      watcher.before()
    }
    id = watcher.id
    // 清除缓存的 watcher
    has[id] = null
    // 触发更新函数，如 updateComponent 或 执行用户的 watch 回调
    watcher.run()
  }

  
  const activatedQueue = activatedChildren.slice()
  const updatedQueue = queue.slice()
  
  // 执行 waiting = flushing = false，标识刷新队列结束，可以向浏览器的任务队列加入下一个 flushCallbacks
  resetSchedulerState()
 
  callActivatedHooks(activatedQueue)
  callUpdatedHooks(updatedQueue)

  if (devtools && config.devtools) {
    devtools.emit('flush')
  }
}

查看下 watcher.run 做了些什么，首先调用了 get 函数，我们一起看下。

/**
*  执行实例化 watcher 传递的第二个参数，如 updateComponent
*  更新旧值为新值
*  执行实例化 watcher 时传递的第三个参数，用户传递的 watcher 回调
*/
run () {
  if (this.active) {
    // 调用 get
    const value = this.get()
    if (
      value !== this.value ||
      isObject(value) ||
      this.deep
    ) {
      // 更新旧值为新值
      const oldValue = this.value
      this.value = value
      // 若是项目传入的 watcher，则执行实例化传递的回调函数。
      if (this.user) {
        const info = `callback for watcher "${this.expression}"`
        invokeWithErrorHandling(this.cb, this.vm, [value, oldValue], this.vm, info)
      } else {
        this.cb.call(this.vm, value, oldValue)
      }
    }
  }
}
/**
* 执行 this.getter，并重新收集依赖。
* 重新收集依赖是因为触发更新 setter 中只做了响应式观测，但没有收集依赖的操作。
* 所以，在更新页面时，会重新执行一次 render 函数，执行期间会触发读取操作，这时进行依赖收集。
*/
get () {
  // Dep.target = this
  pushTarget(this)
  let value
  const vm = this.vm
  try {
    // 执行回调函数，如 updateComponent，进入 patch 阶段
    value = this.getter.call(vm, vm)
  } catch (e) {
    if (this.user) {
      handleError(e, vm, `getter for watcher "${this.expression}"`)
    } else {
      throw e
    }
  } finally {
    // watch 参数为 deep 的情况
    if (this.deep) {
      traverse(value)
    }
    // 关闭 Dep.target 置空
    popTarget()
    this.cleanupDeps()
  }
  return value
}

Vue.$nextTick 的原理

nextTick：在下次 DOM 更新循环结束之后执行延迟回调。常用于修改数据后获取更新后的DOM。

源码位置：vue/src/core/util/next-tick.js

import { noop } from 'shared/util'
import { handleError } from './error'
import { isIE, isIOS, isNative } from './env'

// 是否使用微任务标识
export let isUsingMicroTask = false

// 回调函数队列
const callbacks = []
// 异步锁
let pending = false

function flushCallbacks () {
  // 表示下一个 flushCallbacks 可以进入浏览器的任务队列了
  pending = false
  // 防止 nextTick 中包含 nextTick时出现问题，在执行回调函数队列前，提前复制备份，清空回调函数队列
  const copies = callbacks.slice(0)
  // 清空 callbacks 数组
  callbacks.length = 0
  for (let i = 0; i < copies.length; i++) {
    copies[i]()
  }
}

let timerFunc

// 浏览器能力检测
// 使用宏任务或微任务的目的是宏任务和微任务必在同步代码结束之后执行，这时能保证是最终渲染好的DOM。
// 宏任务耗费时间是大于微任务，在浏览器支持的情况下，优先使用微任务。
// 宏任务中效率也有差距，最低的就是 setTimeout
if (typeof Promise !== 'undefined' && isNative(Promise)) {
  const p = Promise.resolve()
  timerFunc = () => {
    p.then(flushCallbacks)
    if (isIOS) setTimeout(noop)
  }
  isUsingMicroTask = true
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
  isNative(MutationObserver) ||
  MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
  let counter = 1
  const observer = new MutationObserver(flushCallbacks)
  const textNode = document.createTextNode(String(counter))
  observer.observe(textNode, {
    characterData: true
  })
  timerFunc = () => {
    counter = (counter + 1) % 2
    textNode.data = String(counter)
  }
  isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  timerFunc = () => {
    setImmediate(flushCallbacks)
  }
} else {
  timerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

export function nextTick (cb?: Function, ctx?: Object) {
  let _resolve
  // 将 nextTick 的回调函数用 try catch 包裹一层，用于异常捕获
  // 将包裹后的函数放到 callback 中
  callbacks.push(() => {
    if (cb) {
      try {
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })
  // pengding 为 false, 执行 timerFunc
  if (!pending) {
    // 关上锁
    pending = true
    timerFunc()
  }
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}

总结：

• 运用异步锁的概念，保证同一时刻任务队列中只有一个 flushCallbacks。当 pengding 为 false 的时候，表示浏览器任务队列中没有 flushCallbacks 函数；当 pengding 为 true 的时候，表示浏览器任务队列中已经放入 flushCallbacks；待执行 flushCallback 函数时，pengding 会被再次置为 false，表示下一个 flushCallbacks 可进入任务队列。
• 环境能力检测，选择可选中效率最高的（宏任务/微任务）进行包装执行，保证是在同步代码都执行完成后再去执行修改 DOM 等操作。
• flushCallbacks 先拷贝再清空，为了防止nextTick嵌套nextTick导致循环不结束。