转载自 掘金 我是你的超级英雄
链接：https://juejin.cn/post/6844903903822086151
文章图片
【vue|Vue - 数据双向绑定原理】当被问到 Vue 数据双向绑定原理的时候，大家可能都会脱口而出：Vue 内部通过 Object.defineProperty方法属性拦截的方式，把 data 对象里每个数据的读写转化成 getter/setter，当数据变化时通知视图更新。虽然一句话把大概原理概括了，但是其内部的实现方式还是值得深究的，本文就以通俗易懂的方式剖析 Vue 内部双向绑定原理的实现过程。然后再根据 Vue 源码的数据双向绑定实现，来进一步巩固加深对数据双向绑定的理解认识。
文章图片
1、实现一个监听器 Observer ，用来劫持并监听所有属性，如果属性发生变化，就通知订阅者；
2、实现一个订阅器 Dep，用来收集订阅者，对监听器 Observer 和 订阅者 Watcher 进行统一管理；
3、实现一个订阅者 Watcher，可以收到属性的变化通知并执行相应的方法，从而更新视图；
4、实现一个解析器 Compile，可以解析每个节点的相关指令，对模板数据和订阅器进行初始化。
推荐阅读
- vue|解决element-ui中select下拉框popper超出弹框问题
- vue项目判断|vue项目判断 是否是移动端 再依据判断跳转
- Vue|vue-property-decorator用法详解
- vue|vue3.0 typescript 创建项目，路由RouteConfig 报错 has no exported member ‘RouteConfig‘.ts
- 定位|Vue.js开发移动端经验总结
- vue|发布angular指令，vue指令，js文件到npm的流程
- java项目精品实战案例|基于Java+SpringMvc+vue+element实现校园闲置物品交易网站
- vue|vue @input带参数_Vue组件通信详解
- 兼容|vue-cli2在IE浏览器下的兼容问题