Vue MVVM与数据代理
MVVM
M: model 模型 对应data数据
V: 视图 模板 其实就是html页面
VM: 视图模型 对应vue实例对象
vm通过dom listener和data-binding 为页面和数据建立连接
V <---> VM <---> M
数据代理
通过一个对象代理另一个对象中属性的操作, 其实就是使用defineProperty，将一个对象的get set操作另一个对象
<script src="../lib/vue.js"></script>
<body>
<div id="root">
</div>
<script type="text/javascript">
let person = {
name: 'island',
age: 1,
hair:100
}
Object.defineProperty(person, 'hair', {
// value: 18,
enumerable: true, // 是否可以枚举
// writable: true, // 属性是否可以被修改
configurable: true, // 属性是否可以被删除
// 有get和set就不能设置value和writable
// 读取属性值时调用
get() {
return '头发有' + this.value + '根, 功力还不够深厚'
},
// 设置属性时用
set(value){
console.log('value:', value);
this.value = value
}
})
person.hair = 1000
console.log(person.hair);
</script>
</body>
Vue中的数据代理
vm.prop
vm._data === data
_data把data进行了升级，从而能进行响应式操作
把data中的属性，放vm中一份
原理:
vm中的数据代理
通过vm对象来代理data对象中属性的操作(读/写)
vm数据代理的好处
更加方便的操作data中的数据
基本原理
将Object.defineProperty把data对象中所有属性添加到vm上
为每一个添加到vm上的属性，指定一个getter/setter
在getter、setter的内部去操作data对应的属性
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
· 零经验选手，Compose 一天开发一款小游戏！