关于Vue底层的简单理解
Vue的源代码大约分为这几部分:
模板解析部分,注意,几乎所有代码都是参考的mustache。
从github上下载vue源码:vue.min.js,上面第9224行开始的地方可看到。功能就是把HTML标签变为AST(abstract structure true抽象语法树)
vnode虚拟节点部分,所有的最小量更新、视图的最小变化,都是来自虚拟节点。
这个库是Snabbdom的底层。5788行。
● 数据劫持部分,
为啥数据变化了视图变化。其实底层是Object.defineProperty()。数据劫持。具体是什么意思,为了方便理解:举例一个小demo;
<script type="text/javascript">
var obj = {
a: 10,
arr: ['A', 'B', 'C', 'D']
};
var m = obj.a;
// 找到上帝的钥匙,数据劫持
Object.defineProperty(obj, 'a',
{
set(v){
m = v;
h1.innerHTML = m;
},
get(){
return m;
}
}
);
// 改写数组方法
Array.prototype.push = function(item){
this[this.length] = item;
h2.innerHTML = obj.arr;
}
function $set(array, index, what){
array[index] = what;
h2.innerHTML = obj.arr;
}
var h1 = document.getElementById('h1');
var h2 = document.getElementById('h2');
h1.innerHTML = obj.a;
h2.innerHTML = obj.arr;
</script>
数组改变了这七个方法: