Vue.js 是一个流行的前端框架,它提供了一种简洁的方式来构建用户界面。Vue.js 的核心是组件化和响应式编程,它允许开发者使用简洁的模板语法来声明式地描述用户界面,并自动更新视图以响应数据的变化。本文将从 Vue.js 的基础原理开始,详细解释 Vue.js 的工作机制,包括数据绑定、组件生命周期、Watcher 和依赖追踪等。 1.Vue 的基本原理 当创建一个 Vue 实例时,Vue 会遍历 data 中的属性,并使用 Object.defineProperty() 将它们转换为 getter/setter,并在内部追踪相关依赖。在属性被访问和修改时,通知变化,每个组件实例都有相应的 Watcher 程序实例,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter 被调用时,会通知 Watcher 重新计算,从而使它关联的组件得以更新。 2.双向数据绑定的原理 Vue.js 采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫持各个属性的 setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。主要分为以下几个步骤: (1)需要 observe 的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter 和 getter,给这个对象的某个值赋值,就会触发 setter,那么就能监听到了数据变化 (2)Compile 解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图 (3)Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁,主要做的事情是:①在自身实例化时往属性订阅器(dep)里面添加自己②自身必须有一个 update() 方法③待属性变动 dep.notice() 通知时,能调用自身的 update() 方法,并触发 Compile 中绑定的回调,则功成身退 (4)MVVM 作为数据绑定的入口,整合 Observer、Compile 和 Watcher 三者,通过 Observer 来监听自身的 model 数据变化,通过 Compile 来解析编译模板指令,最后利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁,达到数据变化->视图更新;视图交互变化(input)->数据 model 变更的双向绑定效果 3.Object.defineProperty() 的缺点 使用 Object.defineProperty() 来进行数据劫持有什么缺点?在对一些属性进行操作时,使得这种方法无法拦截,例如通过下标方式修改数组数据或者给对象新增属性,这都不能触发组件的重新渲染,因为 Object.defineProperty 不能拦截到这些操作。更精确地说,Object.defineProperty() 只能拦截到属性的 setter 和 getter,而不能拦截到数组的 push、pop、shift、unshift 等方法,也不能拦截到对象的新增属性。
![](https://csdnimg.cn/release/download_crawler_static/63255139/bgd.jpg)
![](https://csdnimg.cn/release/download_crawler_static/63255139/bge.jpg)
![](https://csdnimg.cn/release/download_crawler_static/63255139/bgf.jpg)
剩余74页未读,继续阅读
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://profile-avatar.csdnimg.cn/efa50bd0b9924b728ac8bf795a9d17d9_u010918911.jpg!1)
- 粉丝: 68
- 资源: 1311
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
最新资源
- 贵州煤矿矿井水分类与处理策略:悬浮物、酸性与非酸性
- 醛固酮增多症肾上腺静脉采样对比:ACTH后LR-CAV的最优评估
- 开源云连接传感器监控平台:农业土壤湿度远程监测
- 母婴用品企业年度生产计划线性规划优化模型:实证与应用
- 井下智能变电站:Rogowski线圈电流检测系统的研发与性能验证
- 霍州矿区煤巷稳定性分析及支护策略
- ARM嵌入式系统远程软件更新方案:基于TFTP协议
- 煤炭选煤中汞分布规律与洗选脱汞效果
- 提升码垛机器人性能:拉格朗日动力学模型与滑模模糊控制的应用
- 增强现实技术提升学前手写教学:设计与开发案例
- 不规则工作面沉陷三角剖分算法提升与应用
- 卡尔曼滤波在瞬变电磁干扰压制中的应用研究
- 煤矿安全能力研究:理论与系统构建
- LonWorks总线技术在斜巷运输车辆定位与跑车防护中的应用
- 神东煤炭集团高效煤粉锅炉系统:节能环保新实践
- Ti/SnO2+Sb2Ox/PbO2电极分形维数与电催化性能研究
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035111.png)
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)