vue.js的总结

mvvm框架
vue：三要素

响应式：vue 如何监听到 data 的每个属性变化？
模板引擎：vue 的模板如何被解析，指令如何处理？
渲染：vue 的模板如何被渲染成 html ？以及渲染过程

响应式

修改 data 属性之后，vue 立刻监听到
data 属性被代理到 vm 上

用defineProperty监听。ie9+可以。一个小demo

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

模拟vue的实现，先贴vue的代码

    var vm = new Vue({
            el: '#app',
            data: {
                name:'gx',
                price: 100
            }
        })

defineProperty代码

 var vm={}
    var data={
        name:'zhangsan',
        age:20
    }
    var key,value
    for(key in data){
        (function(key){
            Object.defineProperty(vm,key,{
                get:function(){
                    return data[key]
                },
                set:function(newVal){
                    data[key]=newVal

                }
            })
        })(key)
    }

2》模板是什么？？？

本质：字符串
有逻辑，如v-if, v-for等
与html格式很像，但有很大区别【比如可以v-for】
最终还要转换为Html显示
最终必须转换成js代码因为：
有逻辑，必须用js才能实现（图灵完备语言）
转换为html渲染页面，必须用js才能实现
因此，模板最重要转换成一个js函数（render函数）