8.1.3 模拟Vue.js响应式原理

本文为拉勾网大前端高薪训练营第一期笔记


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. 通过属性保存选项的数据
   
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值