_vue-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 的具体实现

<div id="app">
    <p>{
  {message}}p>
    <button v-on:click="showMessage()">Click mebutton>
div>

// ViewModel 层

var app = new Vue({
   
    el: '#app',
    data: {
     // 用于描述视图状态   
        message: 'Hello Vue!', 
    },
    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;
            }
        });
    }
})

// Model 层

{
   
    "url": "/your/server/data/api",
    "res": {
   
        "success": true,
        "name": "test",
        "domain": "www.baidu.com"
    }
}

----------@----------

谈谈你对SPA单页面的理解

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

优点：

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

缺点：

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

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

	单页面应用（SPA）	多页面应用（MPA）
组成	一个主页面和多个页面片段	多个主页面
刷新方式	局部刷新	整页刷新
url模式	哈希模式	历史模式
SEO搜索引擎优化	难实现，可使用SSR方式改善	容易实现
数据传递	容易	通过url、cookie、localStorage等传递
页面切换	速度快，用户体验良好	切换加载资源，速度慢，用户体验差
维护成本	相对容易	相对复杂

实现一个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，返回给爬虫。下面是大致流程图

----------@----------

Vue2.x 响应式数据原理

整体思路是数据劫持+观察者模式

对象内部通过 defineReactive 方法，使用 Object.defineProperty 来劫持各个属性的 setter、getter（只会劫持已经存在的属性），数组则是通过重写数组7个方法来实现。当页面使用对应属性时，每个属性都拥有自己的 dep 属性，存放他所依赖的 watcher（依赖收集），当属性变化后会通知自己对应的 watcher 去更新(派发更新)

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);
  }
}

说一说你对vue响应式理解回答范例

• 所谓数据响应式就是能够使数据变化可以被检测并对这种变化做出响应的机制
• MVVM框架中要解决的一个核心问题是连接数据层和视图层，通过数据驱动应用，数据变化，视图更新，要做到这点的就需要对数据做响应式处理，这样一旦数据发生变化就可以立即做出更新处理
• 以vue为例说明，通过数据响应式加上虚拟DOM和patch算法，开发人员只需要操作数据，关心业务，完全不用接触繁琐的DOM操作，从而大大提升开发效率，降低开发难度
• vue2中的数据响应式会根据数据类型来做不同处理，如果是 对象则采用Object.defineProperty()的方式定义数据拦截，当数据被访问或发生变化时，我们感知并作出响应；如果是数组则通过覆盖数组对象原型的7个变更方法 ，使这些方法可以额外的做更新通知，从而作出响应。这种机制很好的解决了数据响应化的问题，但在实际使用中也存在一些缺点：比如初始化时的递归遍历会造成性能损失；新增或删除属性时需要用户使用Vue.set/delete这样特殊的api才能生效；对于es6中新产生的Map、Set这些数据结构不支持等问题
• 为了解决这些问题，vue3重新编写了这一部分的实现：利用ES6的Proxy代理要响应化的数据，它有很多好处，编程体验是一致的，不需要使用特殊api，初始化性能和内存消耗都得到了大幅改善；另外由于响应化的实现代码抽取为独立的reactivity包，使得我们可以更灵活的使用它，第三方的扩展开发起来更加灵活了

----------@----------

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

----------@----------

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 ，可直接监听对象数组的变化

----------@----------

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是多对多的关系

----------@----------

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

简单

TIP

分析

挂载过程完成了最重要的两件事：

• 初始化
• 建立更新机制

把这两件事说清楚即可！

回答范例

1. 挂载过程指的是app.mount()过程，这个过程中整体上做了两件事：初始化和建立更新机制
2. 初始化会创建组件实例、初始化组件状态，创建各种响应式数据
3. 建立更新机制这一步会立即执行一次组件更新函数，这会首次执行组件渲染函数并执行patch将前面获得vnode转换为dom；同时首次执行渲染函数会创建它内部响应式数据之间和组件更新函数之间的依赖关系，这使得以后数据变化时会执行对应的更新函数

来看一下源码，在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 || {
   },
      vm
    )
  }
  /* 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 || {
   },
        vm
      )
    }
    /* 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',
      vm
    )
  }
  // 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.`,
          vm
        )
      }
    }
    // 属性名不能与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.`,
        vm
      )
    } 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  or  - 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}`,
              this
            )
          }
        }
      } 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