实现 MVVM 类 Vue 迷你框架（一）
如何实现 MVVM 类 Vue 迷你框架（一）
MVVM 框架的三大要素：
- 数据响应式
- 使用 Object.defineProperty 属性
- 使用 ES6 Proxy
- 监听数据变化，更新到视图上
- 模板插值
- 提供模板语法与数据绑定
- 插值：{{ }}
- 指令：v-bind,v-model 等等。
- 模板渲染
- 如果将模板转成 html
- 将实际数据替换到模板插值中
- 渲染
- 模板-> vdom -> real dom
初体验响应式
function defineReactive(obj, key, value) {
Object.defineProperty(obj, key, {
get() {
// 获取数据
return obj[key]
},
set(newValue) {
// 设置数据
if(value !== newValue) {
value = newValue
}
}
})
}
测试一下数据是否被真的拦截
const obj = {};
defineReactive(obj, 'name', 'ken');
obj.foo; // name
obj.foo = 'KenNaNa'; // KenNaNa
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2021-03-22，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
