Vue数据绑定,浅谈数据代理

503 阅读2分钟

数据绑定

数据单向绑定:数据只能从data流到页面

数据的双向绑定:数据能从data到流到页面,页面的数据也可以流向data

双向绑定v-model

单向绑定v-bind

v-model只能用在表单类元素上(得具有输入值)(v-model:value可以简写成v-model)

MVVM模型:模型,视图,视图模型

M对应data中的数据

V对应的是模板

VM是Vue的实例对象

Data blinding绑定数据

DOM listener监听dom的变化返回给data,视图模型相当于是一个桥梁

我们经常用vm来接收vue实例(var vm = new Vue({}))

data中所有的属性都出现在了vm上(这里使用了数据代理),vm有的属性,甚至原型里有的属性,全都可以在模板中直接使用


Object.defineProperty方法

给对象定义属性的时候用的

let person = {

name:'张三',

}

Object.defineProperty(person,'age',{

value:18//person就有age=18的

})

用这种方法添加的属性    不会被遍历,不可以被修改,不可以被删除

当添加enumerable:ture就可以被遍历,控制属性是否可以被枚举

当添加writable:ture就可以被修改,控制属性是否可以被修改

当添加configurable:ture就可以被删除,控制属性是否可以被删除

好处:虽然看起来很复杂,但是我们可以通过对这些属性的ture和false操作来控制我们用defineProperty 给对象加入的属性的一些操作权限,更加灵活了

get(){

return number;

}

当有人读取person的age属性时候,get函数(getter)就会被调用,且返回值就是age的值

set(value){

number=value;

}

当有人修改person的age属性时候,set函数(setter)就会被调用,且可以收到修改age的值,放在参数value中


数据代理

定义:通过一个对象代理对另一个对象中属性的操作(读/写)

基本原理:

①通过object.defineproperty()把data对象中的属性添加到vm上

②为每一个添加到vm上的属性都添加一个getter/setter

③在getter/setter内部去操作data中相对应的属性

自己的理解:vue中的数据代理要使用上面的object.defineproperty

在vm中使用了getter和setter来改变了对应模板中的值

(使用setter修改数据的时候,用vm.data无法读取到数据,要使用vm._data才可以读取到data中的数据,vm._data.name就可以读取到修改后的数据),vm在这里就会使用definepropertyAPI来将vm中_data的对象属性通过API中的getter和setter将数据放到模板中,这样在模板中就只用写{{name}},就可以读取到data中的name值,如果不用API就需要这样写{{_data.name}},使用数据代理节省了时间,方便了操作