本文为拉勾网大前端高薪训练营第一期笔记
8.1.3 模拟 Vue.js 响应式原理
Vue数据驱动
- 数据响应式
- 数据模型仅仅是普通的JavaScript对象,而当我们修改数据时,视图会进行更新,避免了繁琐的DOM操作,提高开发效率
- 双向绑定
- 数据改变,视图改变;视图改变,数据也随之改变
- 我们可以使用v-model在表单元素上创建双向数据绑定
- 数据驱动是Vue最独特的特性之一
- 开发过程中仅需要关注数据本身,不需要关心数据是如何渲染到视图
Vue2.x数据响应式实现原理是Object.defineProperty,数据劫持set get
Vue3的原理是Proxy
Vue的自定义事件基于观察者模式
发布订阅模式结构分为发布中心 发布者 订阅者
观察者模式没有发布中心
发布订阅模式隔离了发布者和订阅者,减少发布者和订阅者的依赖关系,会变得更灵活
nodeType如果是3的话代表是文本节点
node.textContent获取node的文本
node.attributes获取属性v-text
实现mini Vue
Vue.js
class Vue {
constructor (options) {
// 1. 通过属性保存选项的数据