vue手写源码详解一
本章节说明如何定义一个vue的类
要解析vue的源码首先要了解下它的构造
vue大家都知道要通过new来创建实例来使用,那么就说明它其实是一个类
el属性它的作用是告诉vue实例对象,控制的是哪个区域,它不但可以使用id也可以使用DOM来绑定区域,例如使用document.querySelector()来绑定
data它的作用是数据的存储,简单来说就是告诉vue实例,被控制的区域数据是什么,从而完成数据的显示与操作
let vue = new Nue({
el: '#app',
// el: document.querySelector('#app'),
data: {
name: "俺是数据"
}
});
vue中el和data其实赋值给了 e l 与 el与 el与data,这一点可以console.log得知
完成vue就离不开一个es6小伙伴,那就是class类,下面上代码
class Nue {
constructor(options){
// 1.保存创建时候传递过来的数据
if(this.isElement(options.el)){
// el如果是节点,则直接赋值元素给$el
this.$el = options.el;
}else{
// 如果不是节点,那么就用document.querySelector根据id转变为元素
this.$el = document.querySelector(options.el);
}
this.$data = options.data;
// 2.判断是否存在$el,根据指定的区域和数据去编译渲染界面
if(this.$el){
// 调用Compiler方法处理渲染逻辑this指向的为当前类元素
new Compiler(this)
}
}
// 通过nodeType判断是否为元素,1代表了编码号
isElement(node){
return node.nodeType === 1;
}
}
// 此处用于渲染界面的逻辑编写
class Compiler {
constructor(vm){
this.vm = vm;
}
}
接下来几天将解析下vue的源码,不对的地方欢迎大家指教