vue手写源码详解一

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其实赋值给了$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的源码，不对的地方欢迎大家指教