目录
- 修改data中的obj数据的属性
- 修改data以实现数据响应式
- 怎么保证你的变化我Vue能监听到？
- 如果初始值没给这个变量Vue还能监听吗？
修改data中的obj数据的属性
//方法一 var obj = this.obj; obj.name = 'long'; this.obj = obj;
//方法二 Vue.set(this.obj, "password", "num"); //part1,要修改的obj对象; //part2,要添加或者修改的属性; //part3,修改值；
修改data以实现数据响应式
Vue为了实现在数据变化时对页面重新渲染。所以在初始化时对传进来来的数据对象进行监听。
怎么保证你的变化我Vue能监听到？
监听的操作就是：对数据对象的每一个数据，内部内部声明一个变量，存储这个传进来的初始值，然后开始了代理模式。后续对这个数据的读取和修改，实际都是对这个内部变量的getter和setter。由此所有的修改都会经过setter，那么只需要setter的时候触发监听函数，渲染页面即可。
当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。
每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。
那么返回给外部的，实际是一个经过篡改的，经过了代理的数据对象。
如果初始值没给这个变量Vue还能监听吗？
这里面有个新手易犯的问题是：一开始传进数据对象时忘记传这个变量或无法传这个变量。
由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。
如果后面使用了这个变量，那么后面对这个变量进行更新时页面不会变化的，因为vue根本没监听这个对象。
解决办法：
（1）一开始就传入这个变量；
（2）对于对象：使用Vue.set或vm.$ set在使用之前监听变量；
（3）对于数组，除了使用对象的Vue.set或和vm.$set 方法。尤雨溪其实对数组的如下方法进行了封装，使用这些方法的时候已经进行了set监听。
push()pop()shift()unshift()splice()sort()reverse()
有一个神奇的测试题：
<div id="app">
<span class=span-a>
{{obj.a}}
</span>
<span class=span-b>
{{obj.b}}
</span>
</div>
var app = new Vue({
el: '#app',
data: {
obj: {
a: 'a',
}
},
})
app.obj.a = 'a2'
app.obj.b = 'b'
最终 span-a 和 span-b 中分别展示什么字符串？答案是：a2和b
原因是视图在显示 span-a 的 a2 时，顺便更新了 span-b
视图更新其实是异步的。
1、当我们让 a 从 ‘a1’ 变成 ‘a2’ 时，Vue 会监听到这个变化，但是 Vue 并不能马上更新视图，因为 Vue 是使用 Object.defineProperty 这样的方式来监听变化的，监听到变化后会创建一个视图更新任务到任务队列里。（文档有写）
2、所以在视图更新之前，要先把余下的代码运行完才行，也就是会运行 b = ‘b’。
3、等到视图更新的时候，由于 Vue 会去做 diff（文档有写），于是 Vue 就会发现 a 和 b 都变了，自然会去更新 span-a 和 span-b。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。