Vue_源码简单分析,数据代理、模板解析、数据绑定

分析vue作为一个MVVM框架的基本实现原理
1.数据代理
2.模板解析
3.数据绑定

数据代理
数据代理:通过一个对象代理另一个对象中属性的操作(读/写)
vue数据代理:通过vm对象来代理data对象中所有属性的操作
好处:更方便的操作data中的数据
基本实现流程:
1.通过Object.defineProperty()给vm添加与data对象的属性对应的属性描述符
2.所有添加的属性都包含getter/setter
3.getter/setter内部去操作data中对应的属性数据

模板解析
模板:就是html里面嵌套的js代码
js以指令属性和表达式的形式存在于页面里

数据绑定
一旦更新了data中的某个属性数据,所有界面上直接使用或间接使用了此属性的节点都会更新
数据绑定涉及到两方面,一个是界面显示,一个是内存数据
数据劫持
数据劫持是vue中用来实现数据绑定的一种技术
基本思想:通过defineProperty()来监视data中所有属性(任意层次)数据的变化,一旦变化就去更新界面
在这里插入图片描述
MVVM结构
初始化阶段
在这里插入图片描述
更新阶段
在这里插入图片描述

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值