前言
最近在研究 剖析 vue 原理 & 实现双向绑定 MVVM 这篇文章, 一边学习一边总结一下自己的思考
Vue 是一个典型的 MVVM 框架, 模型 (Model) 只是普通的 JavaScript 对象, 修改它则视图 (View) 会自动更新这种设计让状态管理变得非常简单而直观那么 Vue 是如何把模型和视图建立起关联的呢?
实现原理概述
这是前言提到的文章里的代码, 一段典型的体现了 Vue 特点的代码:
- <div id="mvvm-app">
- <input type="text" v-model="word">
- <p>{{word}}</p>
- <button v-on:click="sayHi">change model</button> // 点击这个 button,word 的值会发生改变
- </div>
- <script src="./js/observer.js"></script>
- <script src="./js/watcher.js"></script>
- <script src="./js/compile.js"></script>
- <script src="./js/mvvm.js"></script>
- <script>
- var vm = new MVVM({
- el: '#mvvm-app',
- data: {
- word: 'Hello World!'
- },
- methods: {
- sayHi: function() {
- this.word = 'Hi, everybody!';
- }
- }
- });
- </script>
ue 实现这种数据双向绑定的效果, 需要三大模块:
Observer: 能够对数据对象的所有属性进行监听, 如有变动可拿到最新值并通知订阅者
Compile: 对每个元素节点的指令进行扫描和解析, 根据指令模板替换数据, 以及绑定相应的更新函数
Watcher: 作为连接 Observer 和 Compile 的桥梁, 能够订阅并收到每个属性变动的通知, 执行指令绑定的相应回调函数, 从而更新视图
Observer
Observer 的核心是通过 Obeject.defineProperty()来监听数据的变动, 这个函数内部可以定义 setter 和 getter, 每当数据发生变化, 就会触发 setter 这时候 Observer 就要通知订阅者, 订阅者就是 Watcher
Watcher
Watcher 订阅者作为 Observer 和 Compile 之间通信的桥梁, 主要做的事情是:
在自身实例化时往属性订阅器 (dep) 里面添加自己
自身必须有一个 update()方法
待属性变动 dep.notice()通知时, 能调用自身的 update()方法, 并触发 Compile 中绑定的回调
Compile
Compile 主要做的事情是解析模板指令, 将模板中的变量替换成数据, 然后初始化渲染页面视图, 并将每个指令对应的节点绑定更新函数, 添加监听数据的订阅者, 一旦数据有变动, 收到通知, 更新视图
总结
以上就是本次整理关于 Vue 底层实现原理的全部知识内容, 如果大家还有任何不明白的地方可以在下方的留言区讨论
来源: http://www.jb51.net/article/135123.htm