vue如何修改data中的obj数据的属性

修改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。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。 

最新评论