首页 > 代码库 > Vue.js 源码学习笔记 -- 分析前准备 待续

Vue.js 源码学习笔记 -- 分析前准备 待续

主体

  实例方法归类:

    data     数据方法
    dom     dom方法
    event    事件处理
    lifecycl   生命周期函数

    init 初始化vue页面

  全局方法:

    derectives filters

 

init过程

data : observer deps computed watch

|| watcher

template: fragment [ directive repeat if component transition filter ]

重点:

把数据(Model) 和视图(View) 建立关联


1. 通过observer 对 data 监听, 包括监听data 任何属性变化

2. 把 template 解析成一段 文档对象, 然后解析其中的directive,

  得到每一个指令所依赖的东西 [包括 数据, 和这个数据更新到页面的原始方法 ]


  比如 v-text=‘mess‘ 被解析后

  1. 所依赖的数据项 this.$data.mess data1
  2. 响应视图的更新方法 span.textContent = this.$data.mess fn1

 

3. 通过 watcher 把上述的两部分结合起来, 即把 directive中的依赖 对应 observer;

  这样有数据更新, 就会触发observer, 如果发现数据 data1 有变化,

  就会通知指令 触发 fn1更新视图


整个vm 核心, 就是实现了 observer(观察数据变化)  parser(解析依赖)  watcher(观察到的数据通知指令的执行更新相应页面方法) 这三个东西

 

 

具体实现

 

  

数据监听机制

如何监听某一个对象属性的变化呢?我们很容易想到 Object.defineProperty 这个 API,

为此属性设计一个特殊的 getter/setter,然后在 setter 里触发一个函数,就可以达到监听的效果。

[ ‘push‘, ‘pop‘, ‘shift‘, ‘unshift‘, splice‘, ‘sort‘, ‘reverse‘].forEach(function( method){
 
  var original = arrayProto[method] // Array.prototype.sort

  //数组的方法执行的时候, 会触发下面这个函数
  _.define( arrayMethods, method, function mutator(){

	//先在原生的数组原型方法中按传入的参数执行一遍, 得到结果
	var result = original.apply(this , args);

	var ob = this.__ob__;
	
	var inserted 

	switch (method){
		case ‘push‘: inserted = args ;break
		case ‘unshift‘: inserted = args ; break
		case ‘splice‘: inserted = args.slice(2);
	
	}
	//不解
	if(inserted) ob.observeArray(inserted) 

	ob.notify()

	return result
	
  })
  
})

  

同时 Vue.js 提供了两个额外的“糖方法”  arr.$set[0] = "c"  和 $remove(index) 来弥补这方面限制带来的不便。

个人理解是把这$set 和 $remove 添加到数组原型中,

因为defineproperty可以监听到数组所有原型方法, 包括用户新增的原型方法

所以用户调用$set 的时候, 会被劫持到

 

path 解析器

var path = ‘a.b[1].v‘
var obj = {
a: { b:[ {v:1}, {v:2}, {v:3} ] }
}

parse( obj, path ) // => 2

如何解析 这个字符串 成为 js语句 是关键

vue.js 是通过状态机管理 来实现对路径的解析的

 

 

 

 

 

 

 

 

Vue.js 源码学习笔记 -- 分析前准备 待续