# 1 谈谈你对MVVM的理解

为什么要有这些模式，目的：职责划分、分层（将 Model 层、 View 层进行分类）借鉴后端思想，对于前端而已，就是如何将数据同步到页面上

MVC模式 代表： Backbone + underscore + jquery

• 传统的 MVC 指的是,用户操作会请求服务端路由，路由会调用对应的控制器来处理，控制器会获取数据。将结果返回给前端,页面重新渲染
• MVVM ：传统的前端会将数据手动渲染到页面上, MVVM 模式不需要用户收到操作 dom 元素,将数据绑定到 viewModel 层上，会自动将数据渲染到页面中，视图变化会通知 viewModel 层 更新数据。 ViewModel 就是我们 MVVM 模式中的桥梁

MVVM模式 映射关系的简化，隐藏了 controller

MVVM 是 Model-View-ViewModel 缩写，也就是把 MVC 中的 Controller 演变成 ViewModel 。 Model 层代表数据模型， View 代表UI组件， ViewModel 是 View 和 Model 层的桥梁，数据会绑定到 viewModel 层并自动将数据渲染到页面中，视图变化的时候会通知 viewModel 层更新数据。

• Model : 代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑。我们可以把 Model 称为数据层，因为它仅仅关注数据本身，不关心任何行为
• View : 用户操作界面。当 ViewModel 对 Model 进行更新的时候，会通过数据绑定更新到 View
• ViewModel ： 业务逻辑层， View 需要什么数据， ViewModel 要提供这个数据； View 有某些操作， ViewModel 就要响应这些操作，所以可以说它是 Model for View .

总结 ： MVVM 模式简化了界面与业务的依赖，解决了数据频繁更新。 MVVM 在使用当中，利用双向绑定技术，使得 Model 变化时， ViewModel 会自动更新，而 ViewModel 变化时， View 也会自动变化。

我们以下通过一个 Vue 实例来说明 MVVM 的具体实现

<!-- View 层 -->
<div id="app">
  <p>{{message}}</p>
  <button v-on:click="showMessage()">Click me</button>
</div>

var app = new Vue({
  el: '#app',
  data: {  // 用于描述视图状态  
    message: 'Hello Vue!', // Model 层
  // ViewModel 层：通过事件修改model层数据
  methods: {  // 用于描述视图行为  
    showMessage(){
      let vm = this;
      alert(vm.message);
  created(){
    let vm = this;
    // Ajax 获取 Model 层的数据
    ajax({
      url: '/your/server/data/api',
      success(res){
        vm.message = res;
    });

# 2 谈谈你对SPA单页面的理解

SPA （ single-page application ）仅在 Web 页面初始化时加载相应的 HTML 、 JavaScript 和 CSS 。一旦页面加载完成， SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换， UI 与用户的交互，避免页面的重新加载

优点：

• 用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；
• 基于上面一点， SPA 相对对服务器压力小；
• 前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理

缺点：

• 初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript 、 CSS 统一加载，部分页面按需加载；
• 前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；
• SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势

单页应用与多页应用的区别

实现一个SPA

• 监听地址栏中 hash 变化驱动界面变化
• 用 pushsate 记录浏览器的历史，驱动界面发送变化

1. hash 模式 ：核心通过监听 url 中的 hash 来进行路由跳转

// 定义 Router  
class Router {  
    constructor () {  
        this.routes = {}; // 存放路由path及callback  
        this.currentUrl = '';  
        // 监听路由change调用相对应的路由回调  
        window.addEventListener('load', this.refresh, false);  
        window.addEventListener('hashchange', this.refresh,




    
 false);  
    route(path, callback){  
        this.routes[path] = callback;  
    push(path) {  
        this.routes[path] && this.routes[path]()  
// 使用 router  
window.miniRouter = new Router();  
miniRouter.route('/', () => console.log('page1'))  
miniRouter.route('/page2', () => console.log('page2'))  
miniRouter.push('/') // page1  
miniRouter.push('/page2') // page2  

2. history模式 ： history 模式核心借用 HTML5 history api ， api 提供了丰富的 router 相关属性先了解一个几个相关的api

• history.pushState 浏览器历史纪录添加记录
• history.replaceState 修改浏览器历史纪录中当前纪录
• history.popState 当 history 发生变化时触发

// 定义 Router  
class Router {  
    constructor () {  
        this.routes = {};  
        this.listerPopState()  
    init(path) {  
        history.replaceState({path: path}, null, path);  
        this.routes[path] && this.routes[path]();  
    route(path, callback){  
        this.routes[path] = callback;  
    push(path) {  
        history.pushState({path: path}, null, path);  
        this.routes[path] && this.routes[path]();  
    listerPopState () {  
        window.addEventListener('popstate' , e => {  
            const path = e.state && e.state.path;  
            this.routers[path] && this.routers[path]()  
// 使用 Router  
window.miniRouter = new Router();  
miniRouter.route('/', ()=> console.log('page1'))  
miniRouter.route('/page2', ()=> console.log('page2'))  
// 跳转  
miniRouter.push('/page2')  // page2  

题外话：如何给SPA做SEO

1. SSR服务端渲染

将组件或页面通过服务器生成 html ，再返回给浏览器，如 nuxt.js

2. 静态化

目前主流的静态化主要有两种：

• 一种是通过程序将动态页面抓取并保存为静态页面，这样的页面的实际存在于服务器的硬盘中
• 另外一种是通过WEB服务器的 URL Rewrite 的方式，它的原理是通过web服务器内部模块按一定规则将外部的URL请求转化为内部的文件地址，一句话来说就是把外部请求的静态地址转化为实际的动态页面地址，而静态页面实际是不存在的。这两种方法都达到了实现URL静态化的效果

3. 使用 Phantomjs 针对爬虫处理

原理是通过 Nginx 配置，判断访问来源是否为爬虫，如果是则搜索引擎的爬虫请求会转发到一个 node server ，再通过 PhantomJS 来解析完整的 HTML ，返回给爬虫。下面是大致流程图

# 3 Vue2.x 响应式数据原理

Object.defineProperty基本使用

function observer(value) { // proxy reflect
    if (typeof value === 'object' && typeof value !== null)
    for (let key in value) {
        defineReactive(value, key, value[key]);
function defineReactive(obj, key, value) {
    observer(value);
    Object.defineProperty(obj, key, {
        get() { // 收集对应的key 在哪个方法（组件）中被使用
            return value;
        set(newValue) {
            if (newValue !== value) {
                observer(newValue);
                value = newValue; // 让key对应的方法（组件重新渲染）重新执行
let obj1 = { school: { name: 'poetry', age: 20 } };
observer(obj1);
console.log(obj1)

源码分析

class Observer {
  // 观测值
  constructor(value




    
) {
    this.walk(value);
  walk(data) {
    // 对象上的所有属性依次进行观测
    let keys = Object.keys(data);
    for (let i = 0; i < keys.length; i++) {
      let key = keys[i];
      let value = data[key];
      defineReactive(data, key, value);
// Object.defineProperty数据劫持核心 兼容性在ie9以及以上
function defineReactive(data, key, value) {
  observe(value); // 递归关键
  // --如果value还是一个对象会继续走一遍odefineReactive 层层遍历一直到value不是对象才停止
  //   思考？如果Vue数据嵌套层级过深 >>性能会受影响
  Object.defineProperty(data, key, {
    get() {
      console.log("获取值");
      //需要做依赖收集过程 这里代码没写出来
      return value;
    set(newValue) {
      if (newValue === value) return;
      console.log("设置值");
      //需要做派发更新过程 这里代码没写出来
      value = newValue;
  });
export function observe(value) {
  // 如果传过来的是对象或者数组 进行属性劫持
  if (
    Object.prototype.toString.call(value) === "[object Object]" ||
    Array.isArray(value)
    return new Observer(value);

# 4 Vue3.x 响应式数据原理

Vue3.x 改用 Proxy 替代 Object.defineProperty 。因为 Proxy 可以直接监听对象和数组的变化，并且有多达 13 种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。

# proxy基本用法

// proxy默认只会代理第一层对象，只有取值再次是对象的时候再次代理，不是一上来就代理，提高性能。不像vue2.x递归遍历每个对象属性
let handler = {
    set(target, key, value) {
        return Reflect.set(target, key, value);
    get(target, key) {
        if (typeof target[key] == 'object' && target[key] !== null) {
            return new Proxy(target[key], handler); // 懒代理，只有取值再次是对象的时候再次代理，提高性能
        return Reflect.get(target, key);
let obj = { school: { name: 'poetry', age: 20 } };
let proxy = new Proxy(obj, handler);
// 返回对象的代理
proxy.school

# 说说你对 proxy 的理解，Proxy 相比于 defineProperty 的优势

Object.defineProperty() 的问题主要有三个：

• 不能监听数组的变化 ：无法监控到数组下标的变化，导致通过数组下标添加元素，不能实时响应
• 必须遍历对象的每个属性 ：只能劫持对象的属性，从而需要对每个对象，每个属性进行遍历，如果属性值是对象，还需要深度遍历。 Proxy 可以劫持整个对象，并返回一个新的对象
• 必须深层遍历嵌套的对象

Proxy的优势如下:

• 针对对象： 针对整个对象，而不是对象的某个属性 ，所以也就不需要对 keys 进行遍历
• 支持数组： Proxy 不需要对数组的方法进行重载，省去了众多 hack，减少代码量等于减少了维护成本，而且标准的就是最好的
• Proxy 的第二个参数可以有 13 种拦截方：不限于 apply 、 ownKeys 、 deleteProperty 、 has 等等是 Object.defineProperty 不具备的
• Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改
• Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利

proxy详细使用点击查看 (opens new window)

Object.defineProperty的优势如下:

兼容性好，支持 IE9 ，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平

defineProperty的属性值有哪些

Object.defineProperty(obj, prop, descriptor)
// obj 要定义属性的对象
// prop 要定义或修改的属性的名称
// descriptor 要定义或修改的属性描述符
Object.defineProperty(obj,"name",{
  value:"poetry", // 初始值
  writable:true, // 该属性是否可写入
  enumerable:true, // 该属性是否可被遍历得到（for...in， Object.keys等）
  configurable:true, // 定该属性是否可被删除，且除writable外的其他描述符是否可被修改
  get: function() {},
  set: function(newVal) {}

相关代码如下

import




    
 { mutableHandlers } from "./baseHandlers"; // 代理相关逻辑
import { isObject } from "./util"; // 工具方法
export function reactive(target) {
  // 根据不同参数创建不同响应式对象
  return createReactiveObject(target, mutableHandlers);
function createReactiveObject(target, baseHandler) {
  if (!isObject(target)) {
    return target;
  const observed = new Proxy(target, baseHandler);
  return observed;
const get = createGetter();
const set = createSetter();
function createGetter() {
  return function get(target, key, receiver) {
    // 对获取的值进行放射
    const res = Reflect.get(target, key, receiver);
    console.log("属性获取", key);
    if (isObject(res)) {
      // 如果获取的值是对象类型，则返回当前对象的代理对象
      return reactive(res);
    return res;
function createSetter() {
  return function set(target, key, value, receiver) {
    const oldValue = target[key];
    const hadKey = hasOwn(target, key);
    const result = Reflect.set(target, key, value, receiver);
    if (!hadKey) {
      console.log("属性新增", key, value);
    } else if (hasChanged(value, oldValue)) {
      console.log("属性值被修改", key, value);
    return result;
export const mutableHandlers = {
  get, // 当获取属性时调用此方法
  set, // 当修改属性时调用此方法

Proxy 只会代理对象的第一层，那么 Vue3 又是怎样处理这个问题的呢？

判断当前 Reflect.get的 返回值是否为 Object ，如果是则再通过 reactive 方法做代理， 这样就实现了深度观测。

监测数组的时候可能触发多次get/set，那么如何防止触发多次呢？

我们可以判断 key 是否为当前被代理对象 target 自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行 trigger

# 5 Vue中如何检测数组变化

前言

Vue 不能检测到以下数组的变动：

• 当你利用索引直接设置一个数组项时，例如： vm.items[indexOfItem] = newValue
• 当你修改数组的长度时，例如： vm.items.length = newLength

Vue 提供了以下操作方法

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// vm.$set，Vue.set的一个别名
vm.$set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

分析

数组考虑性能原因没有用 defineProperty 对数组的每一项进行拦截，而是选择对 7 种数组（ push , shift , pop , splice , unshift , sort , reverse ）方法进行重写( AOP 切片思想)

所以在 Vue 中修改数组的索引和长度是无法监控到的。需要通过以上 7 种变异方法修改数组才会触发数组对应的 watcher 进行更新

• 用函数劫持的方式，重写了数组方法，具体呢就是更改了数组的原型，更改成自己的，用户调数组的一些方法的时候，走的就是自己的方法，然后通知视图去更新
• 数组里每一项可能是对象，那么我就是会对数组的每一项进行观测（且只有数组里的对象才能进行观测，观测过的也不会进行观测）

原理

Vue 将 data 中的数组，进行了原型链重写。指向了自己定义的数组原型方法，这样当调用数组 api 时，可以通知依赖更新，如果数组中包含着引用类型。会对数组中的引用类型再次进行监控。

手写简版分析

let oldArray = Object.create(Array.prototype);
['shift', 'unshift', 'push', 'pop', 'reverse','sort'].forEach(method => {
    oldArray[method] = function() { // 这里可以触发页面更新逻辑
        console.log('method', method)
        Array.prototype[method].call(this,...arguments);
});
let arr = [1,2,3];
arr.__proto__ = oldArray;
arr.unshift(4);

源码分析

// 拿到数组原型拷贝一份
const arrayProto = Array.prototype 
// 然后将arrayMethods继承自数组原型
// 这里是面向切片编程思想（AOP）--不破坏封装的前提下，动态的扩展功能
export const arrayMethods = Object.create(arrayProto) 
const methodsToPatch = [ 'push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse' ]
methodsToPatch.forEach(function (method) { // 重写原型方法 
    const original = arrayProto[method] // 调用原数组的方法 
    def(arrayMethods, method, function mutator (




    
...args) { 
        // 这里保留原型方法的执行结果
        const result = original.apply(this, args) 
        // 这句话是关键
        // this代表的就是数据本身 比如数据是{a:[1,2,3]} 那么我们使用a.push(4)  this就是a  ob就是a.__ob__ 这个属性就是上段代码增加的 代表的是该数据已经被响应式观察过了指向Observer实例
        const ob = this.__ob__ 
        // 这里的标志就是代表数组有新增操作
        let inserted
        switch (method) { 
            case 'push': 
            case 'unshift': 
                inserted = args 
                break 
            case 'splice': 
                inserted = args.slice(2) 
                break 
        // 如果有新增的元素 inserted是一个数组 调用Observer实例的observeArray对数组每一项进行观测
        if (inserted) ob.observeArray(inserted) 
        ob.dep.notify() // 当调用数组方法后，手动通知视图更新 
        return result 
this.observeArray(value) // 进行深度监控

vue3 ：改用 proxy ，可直接监听对象数组的变化

# 6 Vue中如何进行依赖收集？

• 每个属性都有自己的 dep 属性，存放他所依赖的 watcher ，当属性变化之后会通知自己对应的 watcher 去更新
• 默认会在初始化时调用 render 函数，此时会触发属性依赖收集 dep.depend
• 当属性发生修改时会触发 watcher 更新 dep.notify()

依赖收集简版

let obj = { name: 'poetry', age: 20 };
class Dep {
    constructor() {
      this.subs = [] // subs [watcher]
    depend() {
      this.subs.push(Dep.target)
    notify() {
      this.subs.forEach(watcher => watcher.update())
Dep.target = null;
observer(obj); // 响应式属性劫持
// 依赖收集  所有属性都会增加一个dep属性，
// 当渲染的时候取值了 ，这个dep属性 就会将渲染的watcher收集起来
// 数据更新 会让watcher重新执行
// 观察者模式
// 渲染组件时 会创建watcher
class Watcher {
    constructor(render) {
      this.get();
    get() {
      Dep.target = this;
      render(); // 执行render
      Dep.target = null;
    update() {
      this.get();
const render = () => {
    console.log(obj.name); // obj.name => get方法
// 组件是watcher、计算属性是watcher
new Watcher(render);
function observer(value) { // proxy reflect
    if (typeof value === 'object' && typeof value !== null)
    for (let key in value) {
        defineReactive(value, key, value[key]);
function defineReactive(obj, key, value) {
    // 创建一个dep
    let dep = new Dep();
    // 递归观察子属性
    observer(value);
    Object.defineProperty(obj, key, {
        get() { // 收集对应的key 在哪个方法（组件）中被使用
            if (Dep.target) { // watcher
                dep.depend(); // 这里会建立 dep 和watcher的关系
            return value;
        set(newValue) {
            if (newValue !== value) {
                observer(newValue);
                value = newValue; // 让key对应的方法（组件重新渲染）重新执行
                dep.notify()
// 模拟数据获取，触发getter
obj.name = 'poetries'
// 一个属性一个dep，一个属性可以对应多个watcher（一个属性可以在任何组件中使用、在多个组件中使用）
// 一个dep 对应多个watcher 
// 一个watcher 对应多个dep （一个视图对应多个属性）
// dep 和 watcher是多对多的关系

# 7 Vue实例挂载的过程中发生了什么

# 简单

来看一下源码，在 src/core/instance/index.js 中

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')
  this._init(options)

可以看到 Vue 只能通过 new 关键字初始化，然后会调用 this._init 方法， 该方法在 src/core/instance/init.js 中定义

Vue.prototype._init = function (options?: Object) {
  const vm




    
: Component = this
  // a uid
  vm._uid = uid++
  let startTag, endTag
  /* istanbul ignore if */
  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
    startTag = `vue-perf-start:${vm._uid}`
    endTag = `vue-perf-end:${vm._uid}`
    mark(startTag)
  // a flag to avoid this being observed
  vm._isVue = true
  // merge options
  if (options && options._isComponent) {
    // optimize internal component instantiation
    // since dynamic options merging is pretty slow, and none of the
    // internal component options needs special treatment.
    initInternalComponent(vm, options)
  } else {
    vm.$options = mergeOptions(
      resolveConstructorOptions(vm.constructor),
      options || {},
  /* istanbul ignore else */
  if (process.env.NODE_ENV !== 'production') {
    initProxy(vm)
  } else {
    vm._renderProxy = vm
  // expose real self
  vm._self = vm
  initLifecycle(vm)
  initEvents(vm)
  initRender(vm)
  callHook(vm, 'beforeCreate')
  initInjections(vm) // resolve injections before data/props
  initState(vm)
  initProvide(vm) // resolve provide after data/props
  callHook(vm, 'created')
  /* istanbul ignore if */
  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
    vm._name = formatComponentName(vm, false)
    mark(endTag)
    measure(`vue ${vm._name} init`, startTag, endTag)
  if (vm.$options.el) {
    vm.$mount(vm.$options.el)

Vue 初始化主要就干了几件事情， 合并配置 ， 初始化生命周期 ， 初始化事件中心 ， 初始化渲染 ， 初始化 data 、 props 、 computed 、 watcher 等

# vue2.x详细

1. 分析

首先找到 vue 的构造函数

源码位置：src\core\instance\index.js

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')
  this._init(options)

options 是用户传递过来的配置项，如 data、methods 等常用的方法

vue 构建函数调用 _init 方法，但我们发现本文件中并没有此方法，但仔细可以看到文件下方定定义了很多初始化方法

initMixin(Vue);     // 定义 _init
stateMixin(Vue);    // 定义 $set $get $delete $watch 等
eventsMixin(Vue);   // 定义事件  $on  $once $off $emit
lifecycleMixin(Vue);// 定义 _update  $forceUpdate  $destroy
renderMixin(Vue);   // 定义 _render 返回虚拟dom

首先可以看 initMixin 方法，发现该方法在 Vue 原型上定义了 _init 方法

源码位置：src\core\instance\init.js

Vue.prototype._init = function (options?: Object) {
    const vm: Component = this
    // a uid
    vm._uid = uid++
    let startTag, endTag
    /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      startTag = `vue-perf-start:${vm._uid}`
      endTag = `vue-perf-end:${vm._uid}`
      mark(startTag)
    // a flag to avoid this being observed
    vm._isVue = true
    // merge options
    // 合并属性，判断初始化的是否是组件，这里合并主要是 mixins 或 extends 的方法
    if (options && options._isComponent) {
      // optimize internal component instantiation
      // since dynamic options merging is pretty slow, and none of the
      // internal component options needs special treatment.
      initInternalComponent(vm, options)
    } else { // 合并vue属性
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== 'production') {
      // 初始化proxy拦截器
      initProxy(vm)
    } else {
      vm._renderProxy = vm
    // expose real self
    vm._self = vm
    // 初始化组件生命周期标志位
    initLifecycle(vm)
    // 初始化组件事件侦听
    initEvents(vm)




    

    // 初始化渲染方法
    initRender(vm)
    callHook(vm, 'beforeCreate')
    // 初始化依赖注入内容，在初始化data、props之前
    initInjections(vm) // resolve injections before data/props
    // 初始化props/data/method/watch/methods
    initState(vm)
    initProvide(vm) // resolve provide after data/props
    callHook(vm, 'created')
    /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      vm._name = formatComponentName(vm, false)
      mark(endTag)
      measure(`vue ${vm._name} init`, startTag, endTag)
    // 挂载元素
    if (vm.$options.el) {
      vm.$mount(vm.$options.el)

仔细阅读上面的代码，我们得到以下结论：

• 在调用 beforeCreate 之前，数据初始化并未完成，像 data 、 props 这些属性无法访问到
• 到了 created 的时候，数据已经初始化完成，能够访问 data 、 props 这些属性，但这时候并未完成 dom 的挂载，因此无法访问到 dom 元素
• 挂载方法是调用 vm.$mount 方法

initState 方法是完成 props/data/method/watch/methods 的初始化

源码位置：src\core\instance\state.js

export function initState (vm: Component) {
  // 初始化组件的watcher列表
  vm._watchers = []
  const opts = vm.$options
  // 初始化props
  if (opts.props) initProps(vm, opts.props)
  // 初始化methods方法
  if (opts.methods) initMethods(vm, opts.methods)
  if (opts.data) {
    // 初始化data  
    initData(vm)
  } else {
    observe(vm._data = {}, true /* asRootData */)
  if (opts.computed) initComputed(vm, opts.computed)
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)

我们和这里主要看初始化 data 的方法为 initData ，它与 initState 在同一文件上

function initData (vm: Component) {
  let data = vm.$options.data
  // 获取到组件上的data
  data = vm._data = typeof data === 'function'
    ? getData(data, vm)
    : data || {}
  if (!isPlainObject(data)) {
    data = {}
    process.env.NODE_ENV !== 'production' && warn(
      'data functions should return an object:\n' +
      'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
  // proxy data on instance
  const keys = Object.keys(data)
  const props = vm.$options.props
  const methods = vm.$options.methods
  let i = keys.length
  while (i--) {
    const key = keys[i]
    if (process.env.NODE_ENV !== 'production') {
      // 属性名不能与方法名重复
      if (methods && hasOwn(methods, key)) {
        warn(
          `Method "${key}" has already been defined as a data property.`,
    // 属性名不能与state名称重复
    if (props && hasOwn(props, key)) {
      process.env.NODE_ENV !== 'production' && warn(
        `The data property "${key}" is already declared as a prop. ` +
        `Use prop default value instead.`,
    } else if (!isReserved(key)) { // 验证key值的合法性
      // 将_data中的数据挂载到组件vm上,这样就可以通过this.xxx访问到组件上的数据
      proxy(vm, `_data`, key)
  // observe data
  // 响应式监听data是数据的变化
  observe(data, true /* asRootData */)

仔细阅读上面的代码，我们可以得到以下结论：

• 初始化顺序： props 、 methods 、 data
• data 定义的时候可选择函数形式或者对象形式（组件只能为函数形式）

关于数据响应式在这就不展开详细说明

上文提到挂载方法是调用 vm.$mount 方法

源码位置：

Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  // 获取或查询元素
  el = el && query(el)
  /* istanbul ignore if */
  // vue 不允许直接挂载到body或页面文档上
  if (el === document.body || el === document.documentElement) {




    

    process.env.NODE_ENV !== 'production' && warn(
      `Do not mount Vue to <html> or <body> - mount to normal elements instead.`
    return this
  const options = this.$options
  // resolve template/el and convert to render function
  if (!options.render) {
    let template = options.template
    // 存在template模板，解析vue模板文件
    if (template) {
      if (typeof template === 'string') {
        if (template.charAt(0) === '#') {
          template = idToTemplate(template)
          /* istanbul ignore if */
          if (process.env.NODE_ENV !== 'production' && !template) {
            warn(
              `Template element not found or is empty: ${options.template}`,
      } else if (template.nodeType) {
        template = template.innerHTML
      } else {
        if (process.env.NODE_ENV !== 'production') {
          warn('invalid template option:' + template, this)
        return this
    } else if (el) {
      // 通过选择器获取元素内容
      template = getOuterHTML(el)
    if (template) {
      /* istanbul ignore if */
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile')
       *  1.将temmplate解析ast tree
       *  2.将ast tree转换成render语法字符串
       *  3.生成render方法
      const { render, staticRenderFns } = compileToFunctions(template, {
        outputSourceRange: process.env.NODE_ENV !== 'production',
        shouldDecodeNewlines,
        shouldDecodeNewlinesForHref,
        delimiters: options.delimiters,
        comments: options.comments
      }, this)
      options.render = render
      options.staticRenderFns = staticRenderFns
      /* istanbul ignore if */
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile end')
        measure(`vue ${this._name} compile`, 'compile', 'compile end')
  return mount.call(this, el, hydrating)

阅读上面代码，我们能得到以下结论：

• 不要将根元素放到 body 或者 html 上
• 可以在对象中定义 template/render 或者直接使用 template 、 el 表示元素选择器
• 最终都会解析成 render 函数，调用 compileToFunctions ，会将 template 解析成 render 函数

对 template 的解析步骤大致分为以下几步：

• 将 html 文档片段解析成 ast 描述符
• 将 ast 描述符解析成字符串
• 生成 render 函数

生成 render 函数，挂载到 vm 上后，会再次调用 mount 方法

源码位置：src\platforms\web\runtime\index.js

// public mount method
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && inBrowser ? query(el) : undefined
  // 渲染组件
  return mountComponent(this, el, hydrating)

调用 mountComponent 渲染组件

export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  vm.$el = el
  // 如果没有获取解析的render函数，则会抛出警告
  // render是解析模板文件生成的
  if (!vm.$options.render) {
    vm.$options.render = createEmptyVNode
    if (process.env.NODE_ENV !== 'production') {
      /* istanbul ignore if */
      if ((vm.$options.template && vm.$options.template.charAt(0) !== '#') ||
        vm.$options.el || el) {
        warn(
          'You are using the runtime-only build of Vue where the template ' +
          'compiler is not available. Either pre-compile the templates into ' +
          'render functions, or use the compiler-included build.',
      } else {
        // 没有获取到vue的模板文件
        warn(
          'Failed to mount component: template or render function not defined.',
  // 执行beforeMount钩子
  callHook(vm, 'beforeMount')
  let updateComponent
  /* istanbul ignore if */
  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
    updateComponent = () => {
      const name =




    
 vm._name
      const id = vm._uid
      const startTag = `vue-perf-start:${id}`
      const endTag = `vue-perf-end:${id}`
      mark(startTag)
      const vnode = vm._render()
      mark(endTag)
      measure(`vue ${name} render`, startTag, endTag)
      mark(startTag)
      vm._update(vnode, hydrating)
      mark(endTag)
      measure(`vue ${name} patch`, startTag, endTag)
  } else {
    // 定义更新函数
    updateComponent = () => {
      // 实际调⽤是在lifeCycleMixin中定义的_update和renderMixin中定义的_render
      vm._update(vm._render(), hydrating)
  // we set this to vm._watcher inside the watcher's constructor
  // since the watcher's initial patch may call $forceUpdate (e.g. inside child
  // component's mounted hook), which relies on vm._watcher being already defined
  // 监听当前组件状态，当有数据变化时，更新组件
  new Watcher(vm, updateComponent, noop, {
    before () {
      if (vm._isMounted && !vm._isDestroyed) {
        // 数据更新引发的组件更新
        callHook(vm, 'beforeUpdate')
  }, true /* isRenderWatcher */)
  hydrating = false
  // manually mounted instance, call mounted on self
  // mounted is called for render-created child components in its inserted hook
  if (vm.$vnode == null) {
    vm._isMounted = true
    callHook(vm, 'mounted')
  return vm

阅读上面代码，我们得到以下结论：

• 会触发 boforeCreate 钩子
• 定义 updateComponent 渲染页面视图的方法
• 监听组件数据，一旦发生变化，触发 beforeUpdate 生命钩子

updateComponent 方法主要执行在 vue 初始化时声明的 render ， update 方法

render 的作用主要是生成 vnode

源码位置：src\core\instance\render.js

// 定义vue 原型上的render方法
Vue.prototype._render = function (): VNode {
    const vm: Component = this
    // render函数来自于组件的option
    const { render, _parentVnode } = vm.$options
    if (_parentVnode) {
        vm.$scopedSlots = normalizeScopedSlots(
            _parentVnode.data.scopedSlots,
            vm.$slots,
            vm.$scopedSlots
    // set parent vnode. this allows render functions to have access
    // to the data on the placeholder node.
    vm.$vnode = _parentVnode
    // render self
    let vnode
    try {
        // There's no need to maintain a stack because all render fns are called
        // separately from one another. Nested component's render fns are called
        // when parent component is patched.
        currentRenderingInstance = vm
        // 调用render方法，自己的独特的render方法， 传入createElement参数，生成vNode
        vnode = render.call(vm._renderProxy, vm.$createElement)
    } catch (e) {
        handleError(e, vm, `render`)
        // return error render result,
        // or previous vnode to prevent render error causing blank component
        /* istanbul ignore else */
        if (process.env.NODE_ENV !== 'production' && vm.$options.renderError) {
            try {
                vnode = vm.$options.renderError.call(vm._renderProxy, vm.$createElement, e)
            } catch (e) {
                handleError(e, vm, `renderError`)
                vnode = vm._vnode
        } else {
            vnode = vm._vnode
    } finally {
        currentRenderingInstance = null
    // if the returned array contains only a single node, allow it
    if (Array.isArray(vnode) && vnode.length === 1) {
        vnode = vnode[0]
    // return empty vnode in case the render function errored out
    if (!(vnode instanceof VNode)) {
        if (process.env.NODE_ENV !== 'production' && Array.isArray(vnode)) {
            warn(
                'Multiple root nodes returned from render function. Render function ' +
                'should return a single root node.',
        vnode = createEmptyVNode()
    // set parent
    vnode.parent = _parentVnode
    return vnode

_update 主要功能是调用 patch ，将 vnode 转换为真实 DOM ，并且更新到页面中

源码位置：src\core\instance\lifecycle.js

Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
    const vm: Component = this
    const prevEl = vm.$el
    const prevVnode = vm._vnode
    // 设置当前激活的作用域
    const




    
 restoreActiveInstance = setActiveInstance(vm)
    vm._vnode = vnode
    // Vue.prototype.__patch__ is injected in entry points
    // based on the rendering backend used.
    if (!prevVnode) {
      // initial render
      // 执行具体的挂载逻辑
      vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
    } else {
      // updates
      vm.$el = vm.__patch__(prevVnode, vnode)
    restoreActiveInstance()
    // update __vue__ reference
    if (prevEl) {
      prevEl.__vue__ = null
    if (vm.$el) {
      vm.$el.__vue__ = vm
    // if parent is an HOC, update its $el as well
    if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {
      vm.$parent.$el = vm.$el
    // updated hook is called by the scheduler to ensure that children are
    // updated in a parent's updated hook.

2. 结论

• new Vue 的时候调用会调用 _init 方法
  • 定义 $set 、 $get 、 $delete 、 $watch 等方法
  • 定义 $on 、 $off 、 $emit 、 $off 等事件
  • 定义 _update 、 $forceUpdate 、 $destroy 生命周期
• 调用 $mount 进行页面的挂载
• 挂载的时候主要是通过 mountComponent 方法
• 定义 updateComponent 更新函数
• 执行 render 生成虚拟 DOM
• _update 将虚拟 DOM 生成真实 DOM 结构，并且渲染到页面中

# 8 理解Vue运行机制全局概览

# 全局概览

首先我们来看一下笔者画的内部流程图。

大家第一次看到这个图一定是一头雾水的，没有关系，我们来逐个讲一下这些模块的作用以及调用关系。相信讲完之后大家对 Vue.js 内部运行机制会有一个大概的认识。

# 初始化及挂载

在 new Vue() 之后。 Vue 会调用 _init 函数进行初始化，也就是这里的 init 过程，它会初始化生命周期、事件、 props、 methods、 data、 computed 与 watch 等。其中最重要的是通过 Object.defineProperty 设置 setter 与 getter 函数，用来实现「 响应式 」以及「 依赖收集 」，后面会详细讲到，这里只要有一个印象即可。

初始化之后调用 $mount 会挂载组件，如果是运行时编译，即不存在 render function 但是存在 template 的情况，需要进行「 编译 」步骤。

# 编译

compile 编译可以分成 parse 、 optimize 与 generate 三个阶段，最终需要得到 render function 。

1. parse

parse 会用正则等方式解析 template 模板中的指令、 class 、 style 等数据，形成 AST 。

2. optimize

optimize 的主要作用是标记 static 静态节点，这是 Vue 在编译过程中的一处优化，后面当 update 更新界面时，会有一个 patch 的过程， diff 算法会直接跳过静态节点，从而减少了比较的过程，优化了 patch 的性能。

3. generate

generate 是将 AST 转化成 render function 字符串的过程，得到结果是 render 的字符串以及 staticRenderFns 字符串。

• 在经历过 parse 、 optimize 与 generate 这三个阶段以后，组件中就会存在渲染 VNode 所需的 render function 了。

# 响应式

接下来也就是 Vue.js 响应式核心部分。

这里的 getter 跟 setter 已经在之前介绍过了，在 init 的时候通过 Object.defineProperty 进行了绑定，它使得当被设置的对象被读取的时候会执行 getter 函数，而在当被赋值的时候会执行 setter 函数。

• 当 render function 被渲染的时候，因为会读取所需对象的值，所以会触发 getter 函数进行「 依赖收集 」，「 依赖收集 」的目的是将观察者 Watcher 对象存放到当前闭包中的订阅者 Dep 的 subs 中。形成如下所示的这样一个关系。

在修改对象的值的时候，会触发对应的 setter ， setter 通知之前「 依赖收集 」得到的 Dep 中的每一个 Watcher ，告诉它们自己的值改变了，需要重新渲染视图。这时候这些 Watcher 就会开始调用 update 来更新视图，当然这中间还有一个 patch 的过程以及使用队列来异步更新的策略，这个我们后面再讲。

# Virtual DOM

我们知道， render function 会被转化成 VNode 节点。 Virtual DOM 其实就是一棵以 JavaScript 对象（ VNode 节点）作为基础的树，用对象属性来描述节点，实际上它只是一层对真实 DOM 的抽象。最终可以通过一系列操作使这棵树映射到真实环境上。由于 Virtual DOM 是以 JavaScript 对象为基础而不依赖真实平台环境，所以使它具有了跨平台的能力，比如说浏览器平台、Weex、Node 等。

比如说下面这样一个例子：

{
    tag: 'div',                 /*说明这是一个div标签*/
    children: [                 /*存放该标签的子节点*/
            tag: 'a',           /*说明这是一个a标签*/
            text: 'click me'    /*标签的内容*/

渲染后可以得到

<div>
    <a>click me</a>

这只是一个简单的例子，实际上的节点有更多的属性来标志节点，比如 isStatic （代表是否为静态节点）、 isComment （代表是否为注释节点）等。

# 更新视图

• 前面我们说到，在修改一个对象值的时候，会通过 setter -> Watcher -> update 的流程来修改对应的视图，那么最终是如何更新视图的呢？
• 当数据变化后，执行 render function 就可以得到一个新的 VNode 节点，我们如果想要得到新的视图，最简单粗暴的方法就是直接解析这个新的 VNode 节点，然后用 innerHTML 直接全部渲染到真实 DOM 中。但是其实我们只对其中的一小块内容进行了修改，这样做似乎有些「 浪费 」。
• 那么我们为什么不能只修改那些「改变了的地方」呢？这个时候就要介绍我们的「 patch 」了。我们会将新的 VNode 与旧的 VNode 一起传入 patch 进行比较，经过 diff 算法得出它们的「 差异 」。最后我们只需要将这些「 差异 」的对应 DOM 进行修改即可。

# 再看全局

回过头再来看看这张图，是不是大脑中已经有一个大概的脉络了呢？

# 9 如何理解Vue中模板编译原理

Vue 的编译过程就是将 template 转化为 render 函数的过程

• 解析生成AST树 将 template 模板转化成 AST 语法树，使用大量的正则表达式对模板进行解析，遇到标签、文本的时候都会执行对应的钩子进行相关处理
• 标记优化 对静态语法做静态标记 markup (静态节点如 div 下有 p 标签内容不会变化) diff 来做优化 静态节点跳过 diff 操作
  • Vue 的数据是响应式的，但其实模板中并不是所有的数据都是响应式的。有一些数据首次渲染后就不会再变化，对应的 DOM 也不会变化。那么优化过程就是深度遍历 AST 树，按照相关条件对树节点进行标记。这些被标记的节点(静态节点)我们就可以跳过对它们的比对，对运行时的模板起到很大的优化作用
  • 等待后续节点更新，如果是静态的，不会在比较 children 了
• 代码生成 编译的最后一步是将优化后的 AST 树转换为可执行的代码

<div id="app"></div>
<script>
    let vm = new Vue({
        el: '#app',
        template: `<div>
            // <span>hello world</span> 是静态节点
            <span>hello world</span>    
            // <p>{{name}}</p> 是动态节点
            <p>{{name}}</p>
        </div>`,
        data() {
          return { name: 'test' }
    });
</script>

源码分析

export function compileToFunctions(template) {
  // 我们需要把html字符串变成render函数
  // 1.把html代码转成ast语法树  ast用来描述代码本身形成树结构 不仅可以描述html 也能描述css以及js语法
  // 很多库都运用到了ast 比如 webpack babel eslint等等
  let ast = parse(template);
  // 2.优化静态节点：对ast树进行标记,标记静态节点
    if (options.optimize !== false) {
      optimize(ast, options);
  // 3.通过ast 重新生成代码
  // 我们最后生成的代码需要和render函数一样
  // 类似_c('div',{id:"app"},_c('div',undefined,_v("hello"+_s(name)),_c('span',undefined,_v("world"))))
  // _c代表创建元素 _v代表创建文本 _s代表文Json.stringify--把对象解析成文本
  let code = generate(ast);
  //   使用with语法改变作用域为this  之后调用render函数可以使用call改变this 方便code里面的变量取值
  let renderFn = new Function(`with(this){return ${code}}`);
  return renderFn;

# Vue complier 实现

• 模板解析这种事，本质是将数据转化为一段 html ，最开始出现在后端，经过各种处理吐给前端。随着各种 mv* 的兴起，模板解析交由前端处理。
• 总的来说， Vue complier 是将 template 转化成一个 render 字符串。

可以简单理解成以下步骤：

• parse 过程，将 template 利用正则转化成 AST 抽象语法树。
• optimize 过程，标记静态节点，后 diff 过程跳过静态节点，提升性能。
• generate 过程，生成 render 字符串

# 10 Vue生命周期相关

# Vue的生命周期方法有哪些

1. Vue 实例有一个完整的生命周期，也就是从 开始创建 、 初始化数据 、 编译模版 、 挂载Dom -> 渲染 、 更新 -> 渲染 、 卸载 等一系列过程，我们称这是 Vue 的生命周期
2. Vue 生命周期总共分为8个阶段 创建前/后 ， 载入前/后 ， 更新前/后 ， 销毁前/后

beforeCreate => created => beforeMount => Mounted => beforeUpdate => updated => beforeDestroy => destroyed 。 keep-alive 下： activated deactivated

其他几个生命周期

3. 要掌握每个生命周期内部可以做什么事

• beforeCreate 初始化 vue 实例，进行数据观测。执行时组件实例还未创建，通常用于插件开发中执行一些初始化任务
• created 组件初始化完毕，可以访问各种数据，获取接口数据等
• beforeMount 此阶段 vm.el 虽已完成 DOM 初始化，但并未挂载在 el 选项上
• mounted 实例已经挂载完成，可以进行一些 DOM 操作
• beforeUpdate 更新前，可用于获取更新前各种状态。此时 view 层还未更新，可用于获取更新前各种状态。可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
• updated 完成 view 层的更新，更新后，所有状态已是最新。可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。 该钩子在服务器端渲染期间不被调用。
• destroyed 可以执行一些优化操作,清空定时器，解除绑定事件
• vue3 beforeunmount ：实例被销毁前调用，可用于一些定时器或订阅的取消
• vue3 unmounted ：销毁一个实例。可清理它与其它实例的连接，解绑它的全部指令及事件监听器

<div id="app">{{name}}</div>
<script>
    const vm = new Vue({
        data(){
            return {name:'poetries'}
        el: '#app',
        beforeCreate(){
            // 数据观测(data observer) 和 event/watcher 事件配置之前被调用。
            console.log('beforeCreate');
        created(){
            // 属性和方法的运算， watch/event 事件回调。这里没有$el
            console.log('created')
        beforeMount(){
            // 相关的 render 函数首次被调用。
            console.log('beforeMount')
        mounted(){
            // 被新创建的 vm.$el 替换
            console.log('mounted')
        beforeUpdate(){
            //  数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
            console.log('beforeUpdate')
        updated(){
            //  由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
            console.log('updated')
        beforeDestroy(){
            // 实例销毁之前调用 实例仍然完全可用
            console.log('beforeDestroy')
        destroyed(){ 
            // 所有东西都会解绑定，所有的事件监听器会被移除
            console.log('destroyed')
    });
    setTimeout(() => {
        vm.name = 'poetry';
        setTimeout(() => {
            vm.$destroy()  
        }, 1000);
    }, 1000);
</script>

4. 组合式API生命周期钩子

你可以通过在生命周期钩子前面加上 “ on ” 来访问组件的生命周期钩子。

下表包含如何在 setup() 内部调用生命周期钩子：

因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在 setup 函数中编写

export default {
  setup() {
    // mounted
    onMounted(() => {
      console.log('Component is mounted!')

setup 和 created 谁先执行？

• beforeCreate :组件被创建出来，组件的 methods 和 data 还没初始化好
• setup ：在 beforeCreate 和 created 之前执行
• created :组件被创建出来，组件的 methods 和 data 已经初始化好了

由于在执行 setup 的时候， created 还没有创建好，所以在 setup 函数内我们是无法使用 data 和 methods 的。所以 vue 为了让我们避免错误的使用，直接将 setup 函数内的 this 执行指向 undefined

import { ref } from "vue"
export default {
  // setup函数是组合api的入口函数，注意在组合api中定义的变量或者方法，要在template响应式需要return{}出去
  setup(){
    let count = ref(1)
    function myFn(){
      count.value +=1
    return {count,myFn}

5. 其他问题

• 什么是vue生命周期？ Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。
• vue生命周期的作用是什么？ 它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
• vue生命周期总共有几个阶段？ 它可以总共分为 8 个阶段：创建前/后、载入前/后、更新前/后、销毁前/销毁后。
• 第一次页面加载会触发哪几个钩子？ 会触发下面这几个 beforeCreate 、 created 、 beforeMount 、 mounted 。
• 你的接口请求一般放在哪个生命周期中？ 接口请求一般放在 mounted 中，但需要注意的是服务端渲染时不支持 mounted ，需要放到 created 中
• DOM 渲染在哪个周期中就已经完成？ 在 mounted 中，
  • 注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted

    mounted: function () {
      this.$nextTick(function (
  
  
  
  
      
  ) {
          // Code that will run only after the
          // entire view has been rendered
  

# 父组件可以监听到子组件的生命周期吗

比如有父组件 Parent 和子组件 Child ，如果父组件监听到子组件挂载 mounted 就做一些逻辑处理，可以通过以下写法实现：

// Parent.vue
<Child @mounted="doSomething"/>
// Child.vue
mounted() {
  this.$emit("mounted");

以上需要手动通过 $emit 触发父组件的事件，更简单的方式可以在父组件引用子组件时通过 @hook 来监听即可，如下所示：

//  Parent.vue
<Child @hook:mounted="doSomething" ></Child>
doSomething() {
   console.log('父组件监听到 mounted 钩子函数 ...');
//  Child.vue
mounted(){
   console.log('子组件触发 mounted 钩子函数 ...');
// 以上输出顺序为：
// 子组件触发 mounted 钩子函数 ...
// 父组件监听到 mounted 钩子函数 ...     

当然 @hook 方法不仅仅是可以监听 mounted ，其它的生命周期事件，例如： created ， updated 等都可以监听

# Vue生命周期钩子是如何实现的

• vue 的生命周期钩子就是回调函数而已，当创建组件实例的过程中会调用对应的钩子方法
• 内部会对钩子函数进行处理，将钩子函数维护成数组的形式

Vue 的生命周期钩子核心实现是利用发布订阅模式先把用户传入的的生命周期钩子订阅好（内部采用数组的方式存储）然后在创建组件实例的过程中会一次执行对应的钩子方法（发布）

<script>
    // Vue.options 中会存放所有全局属性
    // 会用自身的 + Vue.options 中的属性进行合并
    // Vue.mixin({
    //     beforeCreate() {
    //         console.log('before 0')
    //     },
    // })
    debugger;
    const vm = new Vue({
        el: '#app',
        beforeCreate: [
            function() {
                console.log('before 1')
            function() {
                console.log('before 2')
    });
    console.log(vm);
</script>

相关代码如下

export function callHook(vm, hook) {
  // 依次执行生命周期对应的方法
  const handlers = vm.$options[hook];
  if (handlers) {
    for (let i = 0; i < handlers.length; i++) {
      handlers[i].call(vm); //生命周期里面的this指向当前实例
// 调用的时候
Vue.prototype._init = function (options) {
  const vm = this;
  vm.$options = mergeOptions(vm.constructor.options, options);
  callHook(vm, "beforeCreate"); //初始化数据之前
  // 初始化状态
  initState(vm);
  callHook(vm, "created"); //初始化数据之后
  if (vm.$options.el) {
    vm.$mount(vm.$options.el);
// 销毁实例实现
Vue.prototype.$destory = function() {
	 // 触发钩子
    callHook(vm, 'beforeDestory')
    // 自身及子节点
    remove() 
    // 删除依赖
    watcher.teardown() 
    // 删除监听
    vm.$off() 
    // 触发钩子
    callHook(vm, 'destoryed')

原理流程图

# Vue 的父子组件生命周期钩子函数执行顺序

• 渲染顺序 ：先父后子，完成顺序：先子后父
• 更新顺序 ：父更新导致子更新，子更新完成后父
• 销毁顺序 ：先父后子，完成顺序：先子后父

加载渲染过程

父 beforeCreate ->父 created ->父 beforeMount ->子 beforeCreate ->子 created ->子 beforeMount ->子 mounted ->父 mounted 。 子组件先挂载，然后到父组件

子组件更新过程

父 beforeUpdate ->子 beforeUpdate ->子 updated ->父 updated

父组件更新过程

父 beforeUpdate ->父 updated

销毁过程

父 beforeDestroy ->子 beforeDestroy ->子 destroyed ->父 destroyed

之所以会这样是因为 Vue 创建过程是一个递归过程，先创建父组件，有子组件就会创建子组件，因此创建时先有父组件再有子组件；子组件首次创建时会添加 mounted 钩子到队列，等到 patch 结束再执行它们，可见子组件的 mounted 钩子是先进入到队列中的，因此等到 patch 结束执行这些钩子时也先执行。

function patch (oldVnode, vnode, hydrating, removeOnly) { 
    if (isUndef(vnode)) { 
      if (isDef(oldVnode)) invokeDestroyHook(oldVnode) return 
    let isInitialPatch = false 
    const insertedVnodeQueue = [] // 定义收集所有组件的insert hook方法的数组 // somthing ... 
    createElm( 
        vnode, 
        insertedVnodeQueue, oldElm._leaveCb ? null : parentElm, 
        nodeOps.nextSibling(oldElm) 
    )// somthing... 
    // 最终会依次调用收集的insert hook 
    invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch);
    return vnode.elm
function




    
 createElm ( vnode, insertedVnodeQueue, parentElm, refElm, nested, ownerArray, index ) { 
    // createChildren 会递归创建儿子组件 
    createChildren(vnode, children, insertedVnodeQueue) // something... 
// 将组件的vnode插入到数组中 
function invokeCreateHooks (vnode, insertedVnodeQueue) { 
    for (let i = 0; i < cbs.create.length; ++i) { 
        cbs.create[i](emptyNode, vnode) 
    i = vnode.data.hook // Reuse variable 
    if (isDef(i)) { 
        if (isDef(i.create)) i.create(emptyNode, vnode) 
        if (isDef(i.insert)) insertedVnodeQueue.push(vnode) 
// insert方法中会依次调用mounted方法 
insert (vnode: MountedComponentVNode) { 
    const { context, componentInstance } = vnode 
    if (!componentInstance._isMounted) { 
        componentInstance._isMounted = true 
        callHook(componentInstance, 'mounted') 
function invokeInsertHook (vnode, queue, initial) { 
    // delay insert hooks for component root nodes, invoke them after the // element is really inserted 
    if (isTrue(initial) && isDef(vnode.parent)) { 
        vnode.parent.data.pendingInsert = queue 
    } else { 
        for (let i = 0; i < queue.length; ++i) { 
            queue[i].data.hook.insert(queue[i]); // 调用insert方法 
Vue.prototype.$destroy = function () { 
    callHook(vm, 'beforeDestroy') 
    // invoke destroy hooks on current rendered tree 
    vm.__patch__(vm._vnode, null) // 先销毁儿子 
    // fire destroyed hook 
    callHook(vm, 'destroyed') 

# 11 Vue.mixin的使用场景和原理

• 在日常的开发中，我们经常会遇到在不同的组件中经常会需要用到一些相同或者相似的代码，这些代码的功能相对独立，可以通过 Vue 的 mixin 功能抽离公共的业务逻辑，原理类似“对象的继承”，当组件初始化时会调用 mergeOptions 方法进行合并，采用策略模式针对不同的属性进行合并。当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”；如果混入的数据和本身组件的数据冲突，会以组件的数据为准
• mixin 有很多缺陷如：命名冲突、依赖问题、数据来源问题

基本使用

<script>
    // Vue.options
    Vue.mixin({ // 如果他是对象 每个组件都用mixin里的对象进行合并
        data(){
            return {a: 1,b: 2}
    });
    // Vue.extend
    Vue.component('my',{ // 组件必须是函数 Vue.extend  => render(xxx)
        data(){
            return {x:1}
    // 没有 new 没有实例  _init()
    // const vm = this
    new Vue({
        el:'#app',
        data(){ // 根可以不是函数 
            return {c:3}
</script>

相关源码

export default function initMixin(Vue){
  Vue.mixin = function (mixin) {
    //   合并对象
      this.options=mergeOptions(this.options,mixin)
// src/util/index.js
// 定义生命周期
export const LIFECYCLE_HOOKS = [
  "beforeCreate",
  "created",
  "beforeMount",
  "mounted",
  "beforeUpdate",
  "updated",
  "beforeDestroy",
  "destroyed",
// 合并策略
const strats = {};
// mixin核心方法
export function mergeOptions(parent, child) {
  const options = {};
  // 遍历父亲
  for (let k in parent) {
    mergeFiled(k);
  // 父亲没有 儿子有
  for (let k in child) {
    if (!parent.hasOwnProperty(k)) {
      mergeFiled(k);
  //真正合并字段方法
  function mergeFiled(k) {
    // strats合并策略
    if (strats[k]) {
      options[k] = strats[k](parent[k], child[k]);
    } else {
      // 默认策略
      options[k] = child[k] ? child[k] : parent[k];




    

  return options;

# 12 Vue组件data为什么必须是个函数？

• 根实例对象 data 可以是对象也可以是函数 （根实例是单例），不会产生数据污染情况
• 组件实例对象 data 必须为函数 .vue 文件在使用的时候实际上会转换成一个 class ，一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。如果 data 是对象的话，对象属于引用类型，会影响到所有的实例。所以为了保证组件在不同的实例之间 data 不冲突， data 必须是一个函数，

简版理解

// 1.组件的渲染流程 调用Vue.component -> Vue.extend -> 子类 -> new 子类
// Vue.extend 根据用户定义产生一个新的类
function Vue() {}
function Sub() { // 会将data存起来
    this.data = this.constructor.options.data();
Vue.extend = function(options) {
    Sub.options = options; // 静态属性
    return Sub;
let Child = Vue.extend({
    data:()=>( { name: 'test' })
});
// 两个组件就是两个实例, 希望数据互不感染
let child1 = new Child();
let child2 = new Child();
console.log(child1.data.name);
child1.data.name = 'poetry';
console.log(child2.data.name);
// 根不需要 任何的合并操作   根才有vm属性 所以他可以是函数和对象  但是组件mixin他们都没有vm 所以我就可以判断 当前data是不是个函数

相关源码

// 源码位置 src/core/global-api/extend.js
export function initExtend (Vue: GlobalAPI) {
  Vue.extend = function (extendOptions: Object): Function {
    extendOptions = extendOptions || {}
    const Super = this
    const SuperId = Super.cid
    const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {})
    if (cachedCtors[SuperId]) {
      return cachedCtors[SuperId]
    const name = extendOptions.name || Super.options.name
    if (process.env.NODE_ENV !== 'production' && name) {
      validateComponentName(name)
    const Sub = function VueComponent (options) {
      this._init(options)
    // 子类继承大Vue父类的原型
    Sub.prototype = Object.create(Super.prototype)
    Sub.prototype.constructor = Sub
    Sub.cid = cid++
    Sub.options = mergeOptions(
      Super.options,
      extendOptions
    Sub['super'] = Super
    // For props and computed properties, we define the proxy getters on
    // the Vue instances at extension time, on the extended prototype. This
    // avoids Object.defineProperty calls for each instance created.
    if (Sub.options.props) {
      initProps(Sub)
    if (Sub.options.computed) {
      initComputed(Sub)
    // allow further extension/mixin/plugin usage
    Sub.extend = Super.extend
    Sub.mixin = Super.mixin
    Sub.use = Super.use
    // create asset registers, so extended classes
    // can have their private assets too.
    ASSET_TYPES.forEach(function (type) {
      Sub[type] = Super[type]
    // enable recursive self-lookup
    if (name) { 
      Sub.options.components[name] = Sub // 记录自己 在组件中递归自己  -> jsx
    // keep a reference to the super options at extension time.
    // later at instantiation we can check if Super's options have
    // been updated.
    Sub.superOptions = Super.options
    Sub.extendOptions = extendOptions
    Sub.sealedOptions = extend({}, Sub.options)
    // cache constructor
    cachedCtors[SuperId] = Sub
    return Sub

# 13 nextTick在哪里使用？原理是？

• nextTick 中的回调是在下次 DOM 更新循环结束之后执行延迟回调，用于获得更新后的 DOM
• 在修改数据之后立即使用这个方法，获取更新后的 DOM
• 主要思路就是采用 微任务优先 的方式调用异步方法去执行 nextTick 包装的方法

nextTick 方法主要是使用了宏任务和微任务,定义了一个异步方法.多次调用 nextTick 会将方法存入队列中，通过这个异步方法清空当前队列。所以这个 nextTick 方法就是异步方法

根据执行环境分别尝试采用

• 先采用 Promise
• Promise 不支持，再采用 MutationObserver
• MutationObserver 不支持，再采用 setImmediate
• 如果以上都不行则采用 setTimeout
• 最后执行 flushCallbacks ，把 callbacks 里面的数据依次执行

基本使用

const vm = new Vue({
    el: '#app',
    data() {
        return { a: 1 }
}); 
// vm.$nextTick(() => {// [nextTick回调函数fn,内部更新flushSchedulerQueue]
//     console.log(vm.$el.innerHTML)
// })
// 是将内容维护到一个数组里，最终按照顺序顺序。 第一次会开启一个异步任务
vm.a = 'test'; // 修改了数据后并不会马上更新视图
vm.$nextTick(() => {// [nextTick回调函数fn,内部更新flushSchedulerQueue]
    console.log(vm.$el.innerHTML)
// nextTick中的方法会被放到 更新页面watcher的后面去

相关代码如下

// src/core/utils/nextTick
let callbacks = [];
let pending = false;
function flushCallbacks() {
  pending = false; //把标志还原为false
  // 依次执行回调
  for (let i = 0; i < callbacks.length; i++) {
    callbacks[i]();
let timerFunc; //定义异步方法  采用优雅降级
if (typeof Promise !== "undefined") {
  // 如果支持promise
  const p = Promise.resolve();
  timerFunc = () => {
    p.then(flushCallbacks);
} else if (typeof MutationObserver !== "undefined") {
  // MutationObserver 主要是监听dom变化 也是一个异步方法
  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);
} else if (typeof setImmediate !== "undefined") {
  // 如果前面都不支持 判断setImmediate
  timerFunc = () => {
    setImmediate(flushCallbacks);
} else {
  // 最后降级采用setTimeout
  timerFunc = () => {
    setTimeout(flushCallbacks, 0);
export function nextTick(cb) {
  // 除了渲染watcher  还有用户自己手动调用的nextTick 一起被收集到数组
  callbacks.push(cb);
  if (!pending) {
    // 如果多次调用nextTick  只会执行一次异步 等异步队列清空之后再把标志变为false
    pending = true;
    timerFunc();

数据更新的时候内部会调用 nextTick

// src/core/observer/scheduler.js
export function queueWatcher (watcher: Watcher) {
  const id = watcher.id
  if (has[id] == null) {
    has[id] = true
    if (!flushing) {
      queue.push(watcher)
    } else {
      // if already flushing, splice the watcher based on its id
      // if already past its id, it will be run next immediately.
      let i = queue.length - 1
      while (i > index && queue[i].id > watcher.id) {
      queue.splice(i + 1, 0, watcher)
    // queue the flush
    if (!waiting) {
      waiting = true
      if (process.env.NODE_ENV !== 'production' && !config.async) {
        flushSchedulerQueue()
        return
      // 把更新方法放到数组中维护[nextTick回调函数,更新函数flushSchedulerQueue]
       * vm.a = 'test'; // 修改了数据后并不会马上更新视图
        vm.$nextTick(() => {// [fn,更新]
            console.log(vm.$el.innerHTML)
      nextTick(flushSchedulerQueue)

# 14 computed和watch相关

# computed和watch区别

1. 当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性 computed

Computed 本质是一个具备缓存的 watcher ，依赖的属性发生变化就会更新视图。 适用于计算比较消耗性能的计算场景。当表达式过于复杂时，在模板中放入过多逻辑会让模板难以维护，可以将复杂的逻辑放入计算属性中处理

<template>{{fullName}}</template>
export default {
    data(){
        return {
            firstName: 'zhang',
            lastName: 'san',
    computed:{
        fullName: function(){
            return this.firstName + ' ' + this.lastName

2. watch 用于观察和监听页面上的vue实例，如果要在数据变化的同时进行异步操作或者是比较大的开销，那么 watch 为最佳选择

Watch 没有缓存性，更多的是观察的作用，可以监听某些数据执行回调。当我们需要深度监听对象中的属性时，可以打开 deep：true 选项，这样便会对对象中的每一项进行监听。这样会带来性能问题，优化的话可以使用字符串形式监听，如果没有写到组件中，不要忘记使用 unWatch 手动注销

<template>{{fullName}}</template>
export default {
    data(){
        return {
            firstName: 'zhang',
            lastName: 'san',
            fullName: 'zhang san'
    watch:{
        firstName(val) {
            this.fullName = val + ' ' + this.lastName
        lastName(val) {
            this.fullName = this.firstName + ' ' + val

computed:

• computed 是计算属性,也就是计算值,它更多用于计算值的场景
• computed 具有缓存性, computed 的值在 getter 执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取 computed 的值时才会重新调用对应的 getter 来计算
• computed 适用于计算比较消耗性能的计算场景

watch:

• 更多的是「观察」的作用,类似于某些数据的监听回调,用于观察 props $emit 或者本组件的值,当数据变化时来执行回调进行后续操作
• 无缓存性，页面重新渲染时值不变化也会执行

小结:

• computed 和 watch 都是基于 watcher 来实现的
• computed 属性是具备缓存的，依赖的值不发生变化，对其取值时计算属性方法不会重新执行
• watch 是监控值的变化，当值发生变化时调用其对应的回调函数
• 当我们要进行数值计算,而且依赖于其他数据，那么把这个数据设计为 computed
• 如果你需要在某个数据变化时做一些事情，使用 watch 来观察这个数据变化

const count = ref(1)
const plusOne = computed(() => count.value + 1)

const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    /* ... */

基本使用

// src/core/observer:45;
// 渲染watcher  /  computed watcher  /  watch
const vm = new Vue({
    el: '#app',
    data: {
        firstname:'张',
        lastname:'三'
    computed:{ // watcher  =>   firstname lastname
        // computed 只有取值时才执行
        // Object.defineProperty .get
        fullName(){ // firstName lastName 会收集fullName计算属性
            return this.firstname + this.lastname
    watch:{
        firstname(newVal,oldVal){
            console.log(newVal)
});
setTimeout(() => {
    debugger;
    vm.firstname = '赵'
}, 1000);

相关源码

// 初始化state
function initState (vm: Component) {
  vm._watchers = []
  const opts = vm.$options
  if (opts.props) initProps(vm, opts.props)
  if (opts.methods) initMethods(vm, opts.methods)
  if (opts.data) {
    initData(vm)
  } else {
    observe(vm._data = {}, true /* asRootData */)
  // 初始化计算属性
  if (opts.computed) initComputed(vm, opts.computed) 
  // 初始化watch
  if (opts.watch && opts.watch !== nativeWatch) { 
    initWatch(vm, opts.watch)
// 计算属性取值函数
function createComputedGetter (key) {
  return function computedGetter () {
    const watcher = this._computedWatchers && this._computedWatchers[key]
    if (watcher) {
      if (watcher.dirty) { // 如果值依赖的值发生变化，就会进行重新求值
        watcher.evaluate(); // this.firstname lastname
      if (Dep.target) { // 让计算属性所依赖的属性 收集渲染watcher
        watcher.depend()
      return watcher.value
// watch的实现




    

Vue.prototype.$watch = function (
    expOrFn: string | Function,
    cb: any,
    options?: Object
  ): Function {
    const vm: Component = this
    debugger;
    if (isPlainObject(cb)) {
      return createWatcher(vm, expOrFn, cb, options)
    options = options || {}
    options.user = true
    const watcher = new Watcher(vm, expOrFn, cb, options) // 创建watcher，数据更新调用cb
    if (options.immediate) {
      try {
        cb.call(vm, watcher.value)
      } catch (error) {
        handleError(error, vm, `callback for immediate watcher "${watcher.expression}"`)
    return function unwatchFn () {
      watcher.teardown()

# vue3中 watch、watchEffect区别

• watch 是惰性执行，也就是只有监听的值发生变化的时候才会执行，但是 watchEffect 不同，每次代码加载 watchEffect 都会执行（忽略 watch 第三个参数的配置，如果修改配置项也可以实现立即执行）
• watch 需要传递监听的对象， watchEffect 不需要
• watch 只能监听响应式数据： ref 定义的属性和 reactive 定义的对象，如果直接监听 reactive 定义对象中的属性是不允许的（会报警告），除非使用函数转换一下。其实就是官网上说的监听一个 getter
• watchEffect 如果监听 reactive 定义的对象是不起作用的，只能监听对象中的属性

看一下 watchEffect 的代码

<template>
  请输入firstName：
  <input type="text" v-model="firstName">
</div>
  请输入lastName：
  <input type="text" v-model="lastName">
</div>
  请输入obj.text：
  <input type="text" v-model="obj.text">
</div>
 【obj.text】 {{obj.text}}
 </div>
</template>
<script>
import {ref, reactive, watch, watchEffect} from 'vue'
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  setup(props,content){
    let firstName = ref('')
    let lastName = ref('')
    let obj= reactive({
      text:'hello'
    watchEffect(()=>{
      console.log('触发了watchEffect');
      console.log(`组合后的名称为：${firstName.value} ${lastName.value}`)
    return{
      obj,
      firstName,
      lastName
</script>

改造一下代码

watchEffect(()=>{
  console.log('触发了watchEffect');
  // 这里我们不使用firstName.value/lastName.value ，相当于是监控整个ref,对应第四点上面的结论
  console.log(`组合后的名称为：${firstName} ${lastName}`)

watchEffect(()=>{
  console.log('触发了watchEffect');
  console.log(obj);

稍微改造一下

let obj = reactive({
  text:'hello'
watchEffect(()=>{
  console.log('触发了watchEffect');
  console.log(obj.text);

再看一下watch的代码，验证一下

let obj= reactive({
  text:'hello'
// watch是惰性执行， 默认初始化之后不会执行，只有值有变化才会触发，可通过配置参数实现默认执行
watch(obj, (newValue, oldValue) => {
  // 回调函数
  console.log('触发监控更新了new',  newValue);
  console.log




    
('触发监控更新了old',  oldValue);
},{
  // 配置immediate参数，立即执行，以及深层次监听
  immediate: true,
  deep: true

• 监控整个 reactive 对象，从上面的图可以看到 deep 实际默认是开启的，就算我们设置为 false 也还是无效。而且旧值获取不到。
• 要获取旧值则需要监控对象的属性，也就是监听一个 getter ，看下图

总结

• 如果定义了 reactive 的数据，想去使用 watch 监听数据改变，则无法正确获取旧值，并且 deep 属性配置无效，自动强制开启了深层次监听。
• 如果使用 ref 初始化一个对象或者数组类型的数据，会被自动转成 reactive 的实现方式，生成 proxy 代理对象。也会变得无法正确取旧值。
• 用任何方式生成的数据，如果接收的变量是一个 proxy 代理对象，就都会导致 watch 这个对象时, watch 回调里无法正确获取旧值。
• 所以当大家使用 watch 监听对象时，如果在不需要使用旧值的情况，可以正常监听对象没关系；但是如果当监听改变函数里面需要用到旧值时，只能监听 对象.xxx`属性 的方式才行

const count = ref(0)
watchEffect(() => console.log(count.value))
// -> logs 0
count.value++
// -> logs 1

const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    /* ... */

export function watchEffect(
  effect: WatchEffect,
  options?: WatchOptionsBase
): WatchStopHandle {
  return doWatch(effect, null, options)

export function watch<T = any, Immediate extends Readonly<boolean> = false>(
  source: T | WatchSource<T>,
  cb: any,
  options?: WatchOptions<Immediate>
): WatchStopHandle {
  return doWatch(source as any, cb, options)

# Watch中的deep:true是如何实现的

当用户指定了 watch 中的deep属性为 true 时，如果当前监控的值是数组类型。会对对象中的每一项进行求值，此时会将当前 watcher 存入到对应属性的依赖中，这样数组中对象发生变化时也会通知数据更新

源码相关

get () { 
    pushTarget(this) // 先将当前依赖放到 Dep.target上 
    let value 
    const vm = this.vm 
    try { 
        value = this.getter.call(vm, vm) 
    } catch (e) { 
        if (this.user) { 
            handleError(e, vm, `getter for watcher "${this.expression}"`) 
        } else { 
            throw e 
    } finally { 
        if (this.deep) { // 如果需要深度监控 
        traverse(value) // 会对对象中的每一项取值,取值时会执行对应的get方法 
    popTarget() 

# Vue computed 实现

• 建立与其他属性（如： data 、 Store ）的联系；
• 属性改变后，通知计算属性重新计算

实现时，主要如下

• 初始化 data ， 使用 Object.defineProperty 把这些属性全部转为 getter/setter 。
• 初始化 computed , 遍历 computed 里的每个属性，每个 computed 属性都是一个 watch 实例。每个属性提供的函数作为属性的 getter ，使用 Object.defineProperty 转化。
• Object.defineProperty getter 依赖收集。用于依赖发生变化时，触发属性重新计算。
• 若出现当前 computed 计算属性嵌套其他 computed 计算属性时，先进行其他的依赖收集

# watch 原理

watch 本质上是为每个监听属性 setter 创建了一个 watcher ，当被监听的属性更新时，调用传入的回调函数。常见的配置选项有 deep 和 immediate ，对应原理如下

• deep ：深度监听对象，为对象的每一个属性创建一个 watcher ，从而确保对象的每一个属性更新时都会触发传入的回调函数。主要原因在于对象属于引用类型，单个属性的更新并不会触发对象 setter ，因此引入 deep 能够很好地解决监听对象的问题。同时也会引入判断机制，确保在多个属性更新时回调函数仅触发一次，避免性能浪费。
• immediate ：在初始化时直接调用回调函数，可以通过在 created 阶段手动调用回调函数实现相同的效果

# 15 Vue.set的实现原理

• 给对象和数组本身都增加了 dep 属性
• 当给对象新增不存在的属性则触发对象依赖的 watcher 去更新
• 当修改数组索引时，我们调用数组本身的 splice 去更新数组（数组的响应式原理就是重新了 splice 等方法，调用 splice 就会触发视图更新）

基本使用

以下方法调用会改变原始数组： push() , pop() , shift() , unshift() , splice() , sort() , reverse() , Vue.set( target, key, value )

• 调用方法： Vue.set(target, key, value )
  • target ：要更改的数据源(可以是对象或者数组)
  • key ：要更改的具体数据
  • value ：重新赋的值

<




    
div id="app">{{user.name}} {{user.age}}</div>
<div id="app"></div>
<script>
    // 1. 依赖收集的特点：给每个属性都增加一个dep属性，dep属性会进行收集，收集的是watcher
    // 2. vue会给每个对象也增加一个dep属性
    const vm = new Vue({
        el: '#app',
        data: { // vm._data  
            user: {name:'poetry'}
    });
    // 对象的话：调用defineReactive在user对象上定义一个age属性，增加到响应式数据中，触发对象本身的watcher，ob.dep.notify()更新 
    // 如果是数组 通过调用 splice方法，触发视图更新
    vm.$set(vm.user, 'age', 20); // 不能给根属性添加，因为给根添加属性 性能消耗太大，需要做很多处理
    // 修改肯定是同步的 -> 更新都是一步的  queuewatcher
</script>

相关源码

// src/core/observer/index.js 44
export class Observer { // new Observer(value)
  value: any;
  dep: Dep;
  vmCount: number; // number of vms that have this object as root $data
  constructor (value: any) {
    this.value = value
    this.dep = new Dep() // 给所有对象类型增加dep属性

// src/core/observer/index.js 201
export function set (target: Array<any> | Object, key: any, val: any): any {
  // 1.是开发环境 target 没定义或者是基础类型则报错
  if (process.env.NODE_ENV !== 'production' &&
    (isUndef(target) || isPrimitive(target))
    warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)
  // 2.如果是数组 Vue.set(array,1,100); 调用我们重写的splice方法 (这样可以更新视图)
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key)
    // 利用数组的splice变异方法触发响应式  
    target.splice(key, 1, val)
    return val
  // 3.如果是对象本身的属性，则直接添加即可
  if (key in target && !(key in Object.prototype)) {
    target[key] = val // 直接修改属性值  
    return val
  // 4.如果是Vue实例 或 根数据data时 报错,（更新_data 无意义）
  const ob = (target: any).__ob__
  if (target._isVue || (ob && ob.vmCount)) {
    process.env.NODE_ENV !== 'production' && warn(
      'Avoid adding reactive properties to a Vue instance or its root $data ' +
      'at runtime - declare it upfront in the data option.'
    return val
  // 5.如果不是响应式的也不需要将其定义成响应式属性
  if (!ob) {
    target[key] = val
    return val
  // 6.将属性定义成响应式的
  defineReactive(ob.value, key, val)
  // 通知视图更新
  ob.dep.notify()
  return val

我们阅读以上源码可知，vm.$set 的实现原理是：

• 如果目标是数组 ，直接使用数组的 splice 方法触发响应式；
• 如果目标是对象 ，会先判读属性是否存在、对象是否是响应式，最终如果要对属性进行响应式处理，则是通过调用 defineReactive 方法进行响应式处理（ defineReactive 方法就是 Vue 在初始化对象时，给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 的功能所调用的方法）

# 16 Vue diff算法相关问题

# Vue为什么需要虚拟DOM？优缺点有哪些

由于在浏览器中操作 DOM 是很昂贵的。频繁的操作 DOM ，会产生一定的性能问题。这就是虚拟 Dom 的产生原因。 Vue2 的 Virtual DOM 借鉴了开源库 snabbdom 的实现。 Virtual DOM 本质就是用一个原生的 JS 对象去描述一个 DOM 节点，是对真实 DOM 的一层抽象

优点：

• 保证性能下限 ： 框架的虚拟 DOM 需要适配任何上层 API 可能产生的操作，它的一些 DOM 操作的实现必须是普适的，所以它的性能并不是最优的；但是比起粗暴的 DOM 操作性能要好很多，因此框架的虚拟 DOM 至少可以保证在你不需要手动优化的情况下，依然可以提供还不错的性能，即保证性能的下限；
• 无需手动操作 DOM ： 我们不再需要手动去操作 DOM ，只需要写好 View-Model 的代码逻辑，框架会根据虚拟 DOM 和 数据双向绑定，帮我们以可预期的方式更新视图，极大提高我们的开发效率；
• 跨平台 ： 虚拟 DOM 本质上是 JavaScript 对象,而 DOM 与平台强相关，相比之下虚拟 DOM 可以进行更方便地跨平台操作，例如服务器渲染、 weex 开发等等。

缺点:

• 无法进行极致优化：虽然虚拟 DOM + 合理的优化，足以应对绝大部分应用的性能需求，但在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化。
• 首次渲染大量 DOM 时，由于多了一层虚拟 DOM 的计算，会比 innerHTML 插入慢。

虚拟 DOM 实现原理？

虚拟 DOM 的实现原理主要包括以下 3 部分：

• 用 JavaScript 对象模拟真实 DOM 树，对真实 DOM 进行抽象；
• diff 算法 — 比较两棵虚拟 DOM 树的差异；
• pach 算法 — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。

为什么要用vdom？案例解析

现在有一个场景，实现以下需求:

[    
  { name: "张三", age: "20", address: "北京"},    
  { name: "李四", age: "21", address: "武汉"},    
  { name: "王五", age: "22", address: "杭州"},

将该数据展示成一个表格，并且随便修改一个信息，表格也跟着修改。 用jQuery实现如下:

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
  <div id="container"></div>
  <button id="btn-change">改变</button>
  <script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.js"></script>
  <script>
    const data = [{
        name: "张三",
        age: "20",
        address: "北京"
        name: "李四",
        age: "21",
        address: "武汉"
        name: "王五",
        age: "22",
        address: "杭州"
    //渲染函数
    function render(data) {
      const $container = $('#container');
      $container.html('');
      const $table = $('<table>');
      // 重绘一次
      $table.append($('<tr><td>name</td><td>age</td><td>address</td></tr>'));
      data.forEach(item => {
        //每次进入都重绘
        $table.append($(`<tr><td>${item.name}</td><td>${item.age}</td><td>${item.address}</td></tr>`))
      $container.append($table);
    $('#btn-change').click(function () {
      data[1].age = 30;
      data[2].address = '深圳';
      render(data);
    });
  </script>
</body>
</html>