vue源码学习（5）小结

1.vue.$mount

作用：手动地挂载一个未挂载的实例到元素上

返回值：实例自身

示列：

// 声明一个Vue的实例
let MyComponet = Vue.extend({
    template:`<div>Hello!<div>`
})
// 创建实例并挂载到 id 为#app的Html元素上
new MyComponet().$mount('#app')

// 或者 先渲染再挂载
let componet = new MyComponet().$mount()

document.getElementById('app').appendChild(componet.$el)

源码分析:

1. 获取将要挂载上去的元素（ #app ），合并传入的和vm.$options(实列)上的参数
2. 使用正则等方式解析template模板，形成AST语法树
3. 根据AST树生成所需的render函数与staticRenderFns对象
4. 最后调用自身所对应的render函数将AST树转换成DOM对象，挂载到实例上,最后再挂载到#app上

2.vue.extend

作用：创建一个子类，然后让它继承Vue身上的一些功能

返回值：构造函数

示列:

let profile = Vue.extend({
  template:`<div>Hello!{{a}}{{b}}<div>`,
  data(){
    return {
      a:1,
      b:2
    }
  }
})

new Profile().$mount('#app2')

源码分析:

1. 根据传入的参数判断是否是同一对象，是则说明重复生成，直接从缓存中返回
2. 创建一个构造函数，通过寄生组合式继承方式继承Vue上的属性
3. 合并options，初始化props和computed，添加一些其他Vue上的方法(extend,mixin,use)
4. 将新的构造函数加入缓存并返回

3.vue.set

作用：向响应式对象中添加一个属性，并让其也变成响应式的

返回值：设置的值

源码分析:

vue.$set(target,key,value)

1. 根据target的数据类型进行判断，来处理target以及返回值
2. target为响应式对象，则通过defineReactive方式向响应式对象添加属性key，并让其也变成响应式的，并返回value
3. target为非响应式对象，直接添加属性key，并返回value

4.Vue.nextTick

作用：可以拿到修改数据后更新的DOM

示列:

//修改数据
vm.msg = 'Hello'
//DOM 还没有更新
Vue.nextTick(function(){
  //DOM更新了
})

源码分析:

1. 将所有Vue.nextTick中的回调函数放入一个当前的列表中
2. 根据不同的环境，再向当前任务队列添加任务时候，把这个包装成微任务,或者异步任务
3. 在本次这一轮事件循环同步任务执行完后，才会执行微任务/异步任务的回调

5.Vue.directive

作用：注册指令，以便在需要的地方拿来使用

Vue.directive(id,[definition])
指令钩子函数：
bind:function(){},// 只调用一次，指令第一次绑定到元素时调用。
inserted:function(){},// 被绑定元素插入父节点时调用
update:function(){}, // 所在组件的 VNode 更新时调用
componentUpdated:function(){},//指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind:function(){},//只调用一次，指令与元素解绑时调用。

源码分析:

1. 根据definition来判断，如何来处理钩子函数
2. 将指令保存在 Vue.options[‘directives’] 上面

6.Vue.filter

作用：注册或获取全局过滤器

1. 保存在 Vue.options[‘filters’] 上面，思路大体同上

7.Vue.component

作用：注册或获取全局组件

返回值：构造函数

Vue.component(id,[definition])

1. 自定义组件会调用vue.extend函数生成构造函数
2. 保存在 Vue.options[‘components’] 上面，思路大体同上

8.Vue.use

作用：注册插件

Vue.use(plugin)

源码分析:

1. 判断插件plugin是否重复注册
2. 判断plugin类型，为object则执行所含 install 方法，为 function

9.Vue.mixin

作用：全局注册一个混入（mixin），影响之后创建的每个Vue.js实例。

源码分析：

1. 混入的mixin中的options,会跟之前的vm.options合并成新的options，影响所有实例

10.Vue.compile

作用：将模板编译成代码字符串，并将代码字符串转换成渲染render 函数

示列:

let res = Vue.compile('<div><span>{{ msg }}</span></div>')

new Vue({
  data: {
    msg: 'hello'
  },
  render: res.render,
  staticRenderFns: res.staticRenderFns
})

源码分析:

1. 根据不同环境情况对baseOptions进行合并
2. 使用用正则等方式解析template模板中的指令、class、style等数据，形成AST语法树
3. 根据AST树生成所render与staticRenderFns