小实验
- 一开始是{n:0},传给new Vue之后立马变成{n:{...}}
- {n:{...}}是个什么玩意，为什么表现和{n:0}一致？
- 先看一下ES6 的getter和setter
- 示例代码
- 再看看Object.definePropperty
- 实验2
小结
Object.defiinePropertyO
- 可以给对象添加属性value
- 可以给对象添加getter和setter
- getter/setter用于对属性的读写进行监控
啥是代理
- 对myData对象的属性读写，全权由另一个对象vm负责
- 那么VM就是myData的代理（类比房东租房）
- 比如myData.n不用，偏要vm.n来操作myData.n
vm = new Vue({data:myData})
- 会让vm成为myData的代理
- 会对my.Data的所有属性进行监控
- 为什么要监控，为了防止myData的属性变了,vm不知道
数据响应式
什么是响应式
- 若一个物体能对外界的刺激做出反应，它就是响应式的
Vue的data是响应式
- const vm = new Vue({data{n:0}})
- 如果我修改vm.n，那么UI中的n就会响应我
- Vue2通过Object.defineProperty来实现数据响应式
响应式网页是？？？
- 如果我改变窗口的大小，网页内容会做出响应，就是响应式网页。
Object.defiineProperty的问题
- Object.defiineProperty(obj,'n',{...})
- 必须要有一个'n'，才能监听&代理obj.n
- 示例1:vue只会给出一个警告
- 示例2:Vue只会检查第一层属性
- 此时我点击set b,视图中不会显示1,因为Vue没办法监听一开始就没有出现的b
解决办法
- 把key都声明好，后面不再添加属性就好了
- 使用Vue.set或者this.$set例子
总结
对象中新增的key
- Vue没有办法事先办理监听和代理
- 要使用set来新增key，创建监听和代理,更新UI
- 最好提前把属性都写出来,不要新增key
- 但是数组做不到不新增key
数组中新增的key
- 也可以用set来新增key，更新ui
- 不过尤雨溪篡改了7个api方便你对数组的修改，并更新ui
- 这7个apI会自动处理监听和代理，更新ui
- 结论:数组新增key最好通过7个api
** 我对Vue数据响应式的理解:响应式就是对某种刺激作出反应，而数据响应式就是对数据的改变做出响应，再Vue中，数据的响应就是意味着数据的变化，Vue就会进行一次render()渲染，以此来更新ui界面。 在创建ui实例时，Vue中的data{}括号里的数据会被Vue代理和监听。这样，只要监听的数据发生了改变。Vue就知道了数据发生了变化。通过一系列的操作也就是渲染去更新ui界面。 但是，如果在一开始的时候，我们数据没有定义全面，例如某个单独的属性数组或者其他的，就需要使用Vue.set()或者new Vue().$set()方法创建我们想要添加的某个数据，这样就能使Vue代理和监听我们创建的数据。挂载到也买你上的数据才会进行改变。
