董路微博,而立之年,aux-亿梦想,创业创新互动平台,全球创融报道

咱们有时会会在处理vue项目的时分,遇到数据改动了,可是视图并没有实时烘托的状况

vue视图为什么不烘托页面的原因

当你把一个一般的 JavaScript 目标传给 Vue 实例的 data 选项,Vue 将遍历此目标一切的特点,并运用 Object.defineProperty 把这些特点悉数转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也便是为什么 Vue 不支持 IE8 以及更低版别浏览器

这些 getter/setter 对用户来说是不行见的,可是在内部它们让 Vue 追寻依靠,在特点被拜访和修正时告诉改动。这儿需求留意的问题是浏览器控制台在打印数据目标时 getter/setter 的格式化并不同,所以你或许需求装置 vue-devtools 来获取愈加友爱的查看接口

每个组件实例都有相应的 watcher 实例目标,它会在组件烘托的进程中把特点记载为依靠,之后当依靠项的 setter 被调用时,会告诉 watcher 从头核算,然后致使它相关的组件得以更新。

1.视图不更新状况一

数组数据改动:咱们运用某些办法操作数组,改动数据时,有些办法无法被vue监测,有些能够

1.哪些办法使数组改动,能够被vue检测到

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

filter(), concat(), slice() 。这些不会改动原始数组,但总是回来一个新数组。当运用非变异办法时,能够用新数组替换旧数组

2.Vue 不能检测以下改动的数组:

① 当你运用索引直接设置一个项时,vm.items[indexOfItem] = newValue

② 当你修正数组的长度时,例如: vm.items.length = newLength

2.视图不更新状况二

第二种视图不更新状况是Vue 不能检测到目标特点的增加或删去。由于 Vue 会在初始化实例时对特点履行 getter/setter 转化进程,所以特点必须在 data 目标上存在才能让 Vue 转化它,这样才能让它是呼应的

Vue 不允许在现已创立的实例上动态增加新的根级呼应式特点

解决办法

可是它能够运用 Vue.set(object, key, value) 办法将呼应特点增加到嵌套的目标上

Vue.set(vm.someObject, 'b', 2)

或许

this.$set(this.someObject,'b',2) (这也是大局 Vue.set 办法的别号)

有时你想向一个已有目标增加多个特点,例如运用 Object.assign() 或 _.extend() 办法来增加特点。可是,这样增加到目标上的新特点不会触发更新。在这种状况下能够创立一个新的目标,让它包括原目标的特点和新的特点:

// 替代 `Object.assign(this.someObject, { a: 1, b: 2 })`

this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 }) // 深复制


3.视图不更新状况三(异步更新行列)

在最新的项目中我遇到了一个特别怪异的状况,便是数据第一次的获取到了,也烘托了,可是第2次之后数据只需在再一次烘托页面的时分更新,并不能实时更新

你烘托的数据是你上一次挑选的数据,并不是本次挑选的数据,俗称“慢一拍”

现在咱们就来了解一下这个问题

或许你还没有留意到,Vue 异步履行 DOM 更新。只需观察到数据改动,Vue 将敞开一个行列,并缓冲在同一工作循环中发作的一切数据改动。

假如同一个 watcher 被屡次触发,只会被推入到行列中一次。

这种在缓冲时去除重复数据关于防止不必要的核算和 DOM 操作上非常重要。

然后,鄙人一个的工作循环“tick”中,

Vue 改写行列并履行实践 (已去重的) 作业。

Vue 在内部测验对异步行列运用原生的 Promise.then 和 MessageChannel,假如履行环境不支持,会选用 setTimeout(fn, 0) 替代。

尽管 Vue.js 一般鼓舞开发人员沿着“数据驱动”的方法考虑,防止直接触摸 DOM,可是有时咱们的确要这么做。为了在数据改动之后等候 Vue 完结更新 DOM ,能够在数据改动之后当即运用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完结后就会调用。例如:

由于 $nextTick() 回来一个 Promise 目标,所以你能够运用新的 ES2016 async/await语法完结相同的工作:

有想学习前端或许转行的朋友欢迎私信小编“学习”,内有全套前端开发视频教育材料,