VUE学习个人纪录03

MVVM模型

1.M:模型(Model) :对应data中的数据

2.V:视图(View)︰模板

3.VM:视图模型(ViewModel) : Vue实例对象 

 

 

数据处理

1.Object.defineProperty

Object.definedProperty方法可以在一个对象上直接定义一个新的属性、或修改一个对象已经存在的属性，最终返回这个对象。

语法

 Object.definedProperty（obj,prop,descriptor） 

 

参数

 

1. obj 需要定义属性的对象。
2. prop需被定义或修改的属性名。
3. descriptor需被定义或修改的属性的描述符。

提示：使用Object.defineProperty给对象添加属性，那么如果不设置属性的特性，configurable、enumerable、writable这些值都为默认的false。

get
getter 是一种获得属性值的方法。该方法的返回为属性的值。若没有设置默认为undefined。

set
setter是一种设置属性值的方法。该方法接收唯一的参数，作为属性的新值。无设置默认为undefined。

 get() {
                console.log('读取age属性')
                return number
            },
            set(value) {
                console.log('age属性被修改，且值为', value)
                number = value
            }

 

数据代理

定义：数据代理是通过一个对象代理对另一个对象中属性的操作（读 / 写）

基本原理：

• 通过Object.defineProperty() 把 data 对象中所有属性添加到 vm 上。
• 为每一个添加到 vm 上的属性，都指定一个 getter或者 setter
• 在 getter或者 setter 内部去操作 （读 / 写） data 中对应的属性

　　在Vue中，其会将我们写的data传给其自身属性_data，然后将_data中的属性（也即我们写在data中的属性）通过Object.defineProprty添加到vm中，并通过get和set方法实现与data对象中相应属性的数据代理。