vue视图的详细说明未更新

在处理vue项目时，我们可能经常会遇到数据变化，但是视图并不是实时呈现的

为什么vue不查看渲染页面

当您将一个普通的JavaScript对象传递给Vue实例的数据选项时，Vue将遍历这个对象的所有属性，并使用Object.defineProperty将所有这些属性变成getter/setter。Object.defineProperty是ES5中无法填补的特性，这也是Vue不支持IE8和更早版本浏览器的原因

说重点！

这些getter/setter对用户来说是不可见的，但是在内部，它们让Vue跟踪依赖关系，并在属性被访问和修改时通知更改。这里需要注意的问题是，当浏览器控制台打印数据对象时，getter/setter的格式是不同的，因此您可能需要安装vue-devtools来获得更友好的检查界面

每个组件实例都有一个对应的观察器实例对象，该对象在组件呈现过程中将属性记录为依赖项，然后当调用依赖项的设置器时，它会通知观察器重新计算，以便更新其关联的组件。

1.视图不会更新

数组数据更改：我们使用一些方法来操作数组。当改变数据时，有些方法不能被vue监控，而另一些方法可以

1.哪些方法会使阵列发生变化，并且可以被vue检测到

push()pop()shift()unshift()splice()sort()reverse()filter()、concat()、slice().这些不会改变原始数组，但总是返回一个新数组。使用非突变方法时，可以用新数组替换旧数组

2.Vue无法检测到以下已更改的阵列：

(1)当使用索引直接设置一个项目时，vm.items[indexOfItem]=newValue

修改数组长度时，例如：vm.items.length=newLength

2.视图不会更新

在视图未更新的第二种情况下，Vue无法检测到对象属性的添加或删除。因为Vue在初始化实例时会对属性执行getter/setter转换过程，所以属性必须存在于数据对象中，这样Vue才能对其进行转换，以便它能够做出响应

Vue不允许将新的根级响应属性动态添加到已创建的实例中

解决办法

但是，它可以使用Vue.set(对象、键、值)方法向嵌套对象添加响应属性

Vue.set(vm.someObject，' b '，2)或

这个。$ set(这个。someobject，' b '，2)(这也是全局Vue.set方法的别名)有时您想要向现有对象添加多个属性，例如，使用Object.assign()或_。extend()方法添加属性。但是，添加到对象的新属性不会触发更新。在这种情况下，您可以创建一个新对象，并让它包含原始对象的属性和新属性：

//替换` object。分配(这个。someobject，{a: 1，b: 2}) `this。someobject=object。分配({}，这个。someobject，{a: 1，b : 2 })//深度复制3。视图不会更新

在最新的项目中，我遇到了一个特别奇怪的情况，那就是数据是第一次获取并渲染的，但是第二次之后，数据只是在页面再次渲染时才更新，无法实时更新

您渲染的数据是上次选择的数据，而不是这次选择的数据。俗称“慢拍”。现在让我们来看看这个问题

如果您没有注意到，Vue异步执行DOM更新。只要观察到数据变化，Vue就会打开一个队列，并在同一事件周期内缓冲所有数据变化。

如果同一观察器被触发多次，它将只被推入队列一次。

这种在缓冲过程中删除重复数据的方法对于避免不必要的计算和DOM操作非常重要。

然后，在下一个事件循环“滴答”中，

Vue刷新队列并执行实际的(已消除重复数据的)工作。

Vue试图在内部为异步队列使用本机Promise.then和MessageChannel。如果执行环境不支持，将使用setTimeout(fn，0)。

虽然Vue.js通常鼓励开发人员以“数据驱动”的方式思考，避免直接接触DOM，但有时我们会这样做。要在数据更改后等待Vue完成DOM更新，可以在数据更改后立即使用Vue.nextTick(回调)。这样，回调函数将在DOM更新完成后被调用。例如：

因为$nextTick()返回一个Promise对象，所以您可以使用新的ES2016异步/等待语法来完成同样的事情：

S2016异步/等待方法

本文来源

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。