Eine kurze Einführung in die Vue-Implementierungsprinzipien

本篇文章给大家带来的内容是关于Vue实现原理的简单介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

用了Vue也有两年时间了，一直以来都是只知其然，不知其所以然，为了能更好的使用Vue不被Vue所奴役，学习一下Vue底层的基本原理。

Vue官网有一段这样的介绍：当你把一个普通的JavaScript对象传给Vue实例的data选项，Vue将遍历此对象所有的属性，并使用Object.defineProperty把这些属性全部转为getter/setter。Object.defineProperty是ES5中一个无法shim的特性，这也就是为什么Vue不支持 IE8 以及更低版本浏览器。

通过这一段的介绍不难可以得出，Vue是通过Object.defineProperty对实例中的data数据做了挟持并且使用Object.defineProperty的getter/setter并对其进行处理之后完成了数据的与视图的同步。

<div id="name"></div>

Nach dem Login kopieren

javaScript:

var obj = {};
Object.defineProperty(obj,"name",{
    get() {
        return document.querySelector("#name").innerHTML;
    },
    set(val) {
        document.querySelector("#name").innerHTML = val;
    }
})
obj.name = "Aaron";

通过上面的代码使用Object.defineProperty对Obj对象中的name属性进行了挟持，一旦该属性发生了变化则会触发set函数执行，做出响应的操作。

扯了这么多，具体说一下Vue实现的原理。

1. 需要数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者。
2. 需要指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数。
3. 一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图。
4. MVVM入口函数，整合以上三者，实现数据响应。

<div id="app">
    <p>{{name}}</p>
    <p q-text="name"></p>
    <p>{{age}}</p>
    <p>{{doubleAge}}</p>
    <input type="text" q-model="name"/>
    <button @click="changeName">点击</button>
    <div q-html="html"></div>
</div>
<script>
new QVue({
    el:"#app",
    data:{
        name:"I am test",
        age:12,
        html:"<button>这是一个后插入的按钮</button>"
    },
    created(){
        console.log("开始吧,QVue");
        setTimeout(() => {
            this.name = "测试数据，更改了么";
        },2000)
    },
    methods:{
        changeName(){
            this.name = "点击啦，改变吧";
            this.age = 1000000;
        }
    }
})
</script>

Nach dem Login kopieren