Model - View - ViewModel

• Model: data 中的数据
• View: 模板解析-> DOM 页面
• ViewModel: Vue实例对象

vm 的内容可以为 Vue 原型的所有内容

数据代理 Object.defineproperty(参数1, 参数2, 参数3)

• 参数1：对象
• 参数2：属性名
• 参数3：配置项

函数示例：定义变量

let number = 18
let person = {
    
    
	name = "zhangsan"
}

函数示例：数据代理

Object.defineProperty(person, 'age', {
    
    
	get: function(){
    
    
		return number
	}
})

数据代理特点：

1. 不可枚举，不能参加遍历，解决方法：enumerable 属性设置为 true ，默认为false
2. 不可修改，解决方法：writable 属性设置为 true ，默认为false
3. 不可删除，解决方法：configurable 属性设置为 true ，默认为false

数据代理功能：

1. 对数据进行限制，见其特点
2. get 函数：当读取参数1（对象）的属性时，get 函数就会被调用，且返回值就是参数2（属性名）的值 Invoke Property getter 映射属性 get 函数称为 getter

同理可理解setter：

当修改对象的参数2（属性名）时，setter函数会被调用，且会收到修改的值

Object.defineProperty(person, 'age', {
    
    
	get: function(){
    
    
		return number
	}
	set(value){
    
    
		number = value
	}
})

数据代理使用实例

let obj = {
    
    x:100}
let obj2 = {
    
    y:200}
Object.defineProperty(obj2, 'x', {
    
    
	get(){
    
    
		return obj.x
	}
	set(value){
    
    
		return obj.x = value
	}
})

Vue 数据代理

1. 通过 vm 读 name ，输入 vm.name ，调用 getter ，读的是 vm._data.name 中的 name
2. 通过 vm 改 name ，改变 vm.name ，调用 setter ，改的是 vm._data.name 中的 name

验证 vm._data 是构建参数中的 data

vm 把 data 内数据存入 vm._data ， vm._data 做了数据劫持无法直接验证，数据劫持为实现响应式

let data = {
    
    
	name = "zhangsan"
}

const vm = new Vue({
    
    
	el: '#root',
	data
})

可验证 vm._data === data

Vue 数据代理深入理解

1. vm 没有 vm.name ，只有 vm._data ，但是可以通过数据代理通过输入 vm.name 访问到 vm._data.name

2. 如果没有数据代理，插值必须写成 { {_data.name}}

3. vm 拿到 _data ，加一个属性 name ，通过 getter 读取 _data 中的 name ，通过 setter 修改 _data 中的 name