实现 MVVM 类 Vue 迷你框架（一）
人生代码
共 1222字，需浏览 3分钟
·
2021-03-23 19:16
如何实现 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
评论