object.defineProperty
1. 顺带提一句MVVM
M是model 就是vue组件中data部分
V是视图,就是页面展示部分
VM是Vue的实例对象。const vm = new Vue({一些配置}) vm.$mount('#app') 将Vue的实例对象挂在到页面上
2. 主角:object.defineProperty
给对象定义属性
``` js
一般定义形式
const obj = {
name:"wawa",
age:"20"
...
}
// 下面两个例子
object.defineProperty(obj,'gender',{
// 四个基本配置
value:'male'
enumerable:true; 默认false
writabel:true; 默认false
configurable:true; 默认false
// 当有人读取obj的gender属性时,get函数(getter就代指get函数)就会被调用,可返回其gender值
get(){
return gender
}
// set类似
set(value){
}
})
// !!!数据代理 // 我们其实可以通过数据代理;即通过一个对象,读取和改变另一个对象中的值;例子中obj2读取obj的age值
const obj2 = {
name:'haha'
// age = obj.age ; 但修改后,obj的age不会修改
}
// 要求obj2的age和obj1的age一直,修改了obj2的age,obj1的age也要改
object.defineProperty(obj2,'age',{
get(){
return obj.age // 通过obj2读取obj的age
},
set(value){
obj.age = value // 通过obj2修改obj的age
}
}
```
3. vue 使用数据代理
{...} 这样显示的东西就是数据代理,是通过obejct.defineProperty(vm,"name",{})这样加上去的。当要访问/修改的时候,是要getter/setter的;实例对象vm是从vue组件中的data中拿到的值,改的也是data中的值。所以是vm 去拿到model的值,去渲染到view上,mvvm