Vue底层实现原理总结
前言
最近在研究 剖析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底层实现原理的全部知识内容，如果大家还有任何不明白的地方可以在下方的留言区讨论。
相关文章
这篇文章主要介绍了浅谈Vue数据响应，Vue的数据响应主要是依赖了Object.defineProperty()，下面就具体来介绍一下如何实现数据响应2018-11-11
这篇文章主要介绍了Vue监听使用方法和过滤器实现，过滤器为页面中数据进行强化，具有局部过滤器和全局过滤器2022-06-06
这篇文章主要为大家介绍了vue3基础组件开发-detePicker（日期选择组件）示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
Pure admin-Router标签页配置与页面持久化实现方法详解
这篇文章主要介绍了Pure admin-Router标签页配置与页面持久化实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-01-01
这篇文章主要为大家详细介绍了vue+Element-ui实现分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
以前我们经常在react中使用jsx,现在我们在vue中也是用jsx,下面这篇文章主要给大家介绍了关于在vue中写jsx的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
vue引入elementUi后打开页面报错Uncaught TypeError的解决方式
这篇文章主要给大家介绍了关于vue引入elementUi后打开页面报错Uncaught TypeError: Cannot read properties of undefined(reading ‘prototype‘)的解决方式,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了Vue的方法和属性案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-07-07
今天小编就为大家分享一篇Vue防止白屏添加首屏动画的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
vue是组件化开发框架,所以对于vue应用来说组件间的数据通信非常重要,下面这篇文章主要给大家介绍了关于高频率Vue面试题以及答案的相关资料,需要的朋友可以参考下2023-02-02
最新评论