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
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,079评论 0 29
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 7,274评论 0 25
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 11,097评论 4 129
  • 总有一些哲学大家,喜欢将漫长的生命比喻成一趟呼啸而去的列车。那么我想说的是,有的人你想让他下车,而他却死抓着不放;...
    霍小柒阅读 497评论 0 0
  • 有个声音,在记忆里已经消失很久很久,久到跟她记忆中的脸一样,早已被岁月消融,只留些残片,在风声中让人无法再拣拾。这...
    租了五颗星阅读 149评论 0 1