2018-06-28 Vue源码解析阅读笔记

Vue的全局API

里面定义了Vue的全局变量，比如Vue.init()、Vue.component()注册全局组件

Vue选项规范化

• 可以把开发者各种写法的props，规范统一为对象
• 原来父组件可以通过provide向子组件提供其内部未定义的数据

// 子组件
const ChildComponent = {
  template: '<div>child component</div>',
  created: function () {
    // 这里的 data 是父组件注入进来的
    console.log(this.data)
  },
  inject: ['data']
}

// 父组件
var vm = new Vue({
  el: '#app',
  // 向子组件提供数据
  provide: {
    data: 'test provide'
  },
  components: {
    ChildComponent
  }
})

• directives用于注册局部命令，像v-lazy懒加载就是通过这样的代码来执行的

<div id="app" v-test1 v-test2>{{test}}</div>

var vm = new Vue({
  el: '#app',
  data: {
    test: 1
  },
  // 注册两个局部指令
  directives: {
    test1: {
      bind: function () {
        console.log('v-test1')
      }
    },
    test2: function () {
      console.log('v-test2')
    }
  }
})

Vue技术揭秘-patch

• render()生成Vnode
• updata()&patch()把Vnode渲染成具体的DOM