关于VUE数据响应式的理解

314 阅读1分钟

一:什么是VUE数据响应式

Vue 最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新。
我的理解是我们需要动态的去获取这部分数据,使得数据可以根据使用者的想法去发生变化,也就是数据可以对使用者的举动做出回应,这就是数据响应式

二:如何实现VUE数据响应式

VUE中的data就是响应式的体现。

1:Object.defineProperty

该方法可以对对象添加属性:value
也可以给对象添加:getter/setter(ES6的语法)
(getter和setter用于对属性的读写进行监控)

2:添加代理

假设存在一个对象myData
代理可以对myData对象的属性进行读写,全权由另一个对象vm负责,那么vm就是myData的代理(vm就是房东先生myData的中介),使用的时候我们可以选择不去使用myData.n,而是使用vm.n来操作没有myData.n

3:关于语句vm -new Vue({data:myData)的理解

  • 一.会让vm成为myData的代理(proxy)
  • 二.会对myData的所有属性进行监控
    哎?为什么要监控呢?因为防止myData的属性变了,但是vm不知道。(就像房东先生把房子的价格提高了,但是中介不知道一样),vm知道属性发生变化之后就可以调用render(data)了
    UI=render(data)