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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。 

点赞(0)

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部