vue实现原理初探

摘要：数据和视图的分离更符合面向对象的编程，的实现也是和一样用虚拟来实现的，至于什么是虚拟，就是用通过模板渲染而成的。

Vue是当今热门的框架，他可以进行数据双向绑定，为什么vue会大受欢迎，我知道的原因大致如下？
1.传统改变dom结构的操作是非常浪费性能的操作（就是慢）
2.把dom结构改变的逻辑放在js层来做可以提高性能。
3.数据和视图的分离更符合面向对象的编程，mvvm

vue的实现也是和react一样用虚拟dom来实现的，至于什么是虚拟dom，就是用js通过模板渲染而成的dom。

vue实现的步骤大概是这三步：

1、响应式：vue怎么监听到dota的每个属性值的变化？
2、模板引擎：vue的模板如何解析的，指令是如何处理的？
3、模板渲染：如何把data里的数据加入模板并渲染成html？

响应式的实现主要是依靠一个对象的方法:
Object.defineProperty
这个方法能够监听对象中属性的变化而进行逻辑处理
dome如下：

    var obj={}
    var _name ="zhangsan"
    Object.defineProperty(obj,"name",{
        get:function() {
            console.log("get")
            return _name
        },
        set: function(newVal) {
            console.log("set")
            _name=newVal
        }
    })

这里你改变name的值或者访问name的值就会有打印信息

而在vue中模拟实现，大概是这样的：

        var vm ={}
        var data={name:"张三",age:20}
        var key,value;
        for(key in data) {
            (function(key){
                Object.defineProperty(vm,key,{  //绑定到vm上
                    get:function(){
                        console.log("get")
                        return data[key];
                    },
                    set:function(newVal){
                        console.log("set");
                        data[key]=newVal
                    }
                })
            })(key)  //闭包处理
        }

其实学过java的同学肯定对这个不陌生，java的类里面可以直接生成get和set方法

模板必须要转化成js代码，因为:
1.逻辑判断(v-if,v-for),必须要用js才能实现.
2.虚拟dom的渲染，必须要使用js才能实现。(render函数)

模板1

    

        
{{price}}
    

模板1转化的render

           with(this) { //this就是vm
                return _c(
                    "div",
                    {
                        attrs:{"id":"app"}
                    },
                    [
                        // _c是createElement
                        // _v是createTextVNode
                        // _s是toString方法
                        _c("p",[_v(_s(price))])
                    ]
                )
            }

模板2

    

        

            
            submit
        
        

            

                
{{item}}
            
        
    

模板2转化的render

           with (this) {
                return _c(
                    "div",
                    { attrs: { "id": "app" } },
                    [
                        _c(
                            "div",
                            [
                                _c(
                                    "input",
                                    {
                                        //指令
                                        directives: [
                                            {
                                                name: "model",
                                                rawName: "v-model",
                                                value: (title),    //vm.title
                                                expression: "title"
                                            }
                                        ],
                                        domProps: {
                                            "value": (title) //vm.title 
                                        },
                                        on: {
                                            "input": function ($event) {
                                                if ($event.target.composing) return;
                                                title = $event.target.value
                                            }
                                        }
                                    }
                                ),
                                _v(" "),
                                _c(
                                    "button",
                                    {
                                        on: { "click": add }  //vm.add
                                    },
                                    [
                                        _v("submit")
                                    ]
                                )
                            ]
                        ),
                        _v(" "),
                        _c(
                            "div",
                            [
                                _c(
                                    "ul",
                                    _l(
                                        (list), function (item) {
                                            return _c(
                                                "li",
                                                [
                                                    _v(_s(item))
                                                ]
                                            )
                                        }
                                    )
                                )
                            ]
                        )
                    ]
                )
            }

这就是用于渲染的render函数

vm._update(Vnode) {
    const prevVonde=vm._Vnode
    vm._Vnode=Vnode;
    if(!prevVnode) {  //如果没有之前的vnode，第一次渲染
        vm.$el=vm._patch_(vm.$el,Vnode)
    }else {
        vm.$el=vm._patch_(prevVnode,Vnode)
    }
}
function updataComponent() {
    //vm._reander就是解析模板的rende函数，返回了一个vnode
    vm._update(vm._render())
}

这里的vm_.patch_里面就是复杂的diff算法了。根据dom的差别来渲染，里面使用来很多的递归调用，而且里面最要涉及到很多效率问题，天下武功为快不破嘛。