在使用Vue 项目时，可能会发生数据更改，但视图不会实时渲染。
为什么我的vue 视图没有渲染页面？
当您将常规JavaScript 对象传递给Vue 实例的数据选项时，Vue 会迭代该对象的所有属性，并使用Object.defineProperty 将所有这些属性转换为getter/setter。 Object.defineProperty 是一项无法进行填充的ES5 功能。因此，Vue不支持IE8以下的浏览器。
这些getter/setter 对用户来说是不可见的，但在内部，Vue 可以跟踪依赖关系，并在访问和修改属性时通知您更改。这里需要注意的一个问题是，打印数据对象时浏览器控制台中的getter/setter 格式不同，因此您可能需要安装vue-devtools 以获得更人性化的检查界面。
每个组件实例都有一个对应的watcher 实例对象，其属性在组件渲染期间被记录为依赖项，并且当稍后调用依赖项setter 时，会通知watcher 重新计算，并且关联的组件将被更新。
1、视图未更新情况1。
修改数组数据：修改数据时，使用特定的方法来操作数组。有些方法无法被Vue 观察到。
1、哪些方法修改了数组，vue中可以检测到
推（）
流行音乐（）
转移（）
取消移位（）
拼接（）
排序()
向后走()
过滤器（），连接（），切片（）。这些不会修改原始数组，但总是返回一个新数组。如果使用非变异方法，则可以用新数组替换旧数组
2.Vue无法检测以下修改后的数组：
直接使用索引设置项目时vm.items[indexOfItem]=newValue
改变数组的长度，例如：vm.items.length=newLength
2、视图不更新时的情况2
视图不更新的第二种情况是Vue无法检测到对象属性的添加或删除。 Vue 在实例初始化期间执行属性getter/setter 转换过程，因此该属性必须存在于数据对象中，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.显示无更新情况3（异步更新队列）
我在这个项目中遇到了一个特别奇怪的情况。第一次我能够获取数据并渲染它，但从第二次开始，只有当我再次渲染页面时，数据才会更新，之后我就无法更新数据了。即时的。
要渲染的数据是之前选择的数据，而不是当前选择的数据。这通常称为“减速”。
我们来看看这个问题
您可能没有意识到，Vue 是异步执行DOM 更新的。一旦观察到数据更改，Vue 就会打开一个队列并缓冲同一事件循环中发生的所有数据更改。
如果同一个观察者被触发多次，它只会被推送到队列中一次。
缓冲期间的重复数据删除对于避免不必要的计算和DOM 操作非常重要。
然后在下一个事件循环“tick”中，
Vue 刷新队列并执行实际的（重复数据删除）工作。
在内部，Vue 尝试使用原生Promise.then 和MessageChannel 进行异步队列。如果执行环境不支持，则使用setTimeout(fn, 0)代替。
尽管Vue.js 通常鼓励开发人员以“数据驱动”的方式思考并避免直接接触DOM，但有时您确实需要这样做。要在更改数据后等待Vue 完成更新DOM，请在更改数据后立即使用Vue.nextTick(callback)。该回调函数在DOM 更新完成后调用。例如：
$nextTick() 返回一个Promise 对象，因此您可以使用新的ES2023 async/await 语法来实现相同的效果。
如果有想要学习前端或者跳槽的朋友，请私信小编说“我想学”。前端开发的视频教材非常多。
本文和图片来自网络，不代表火豚游戏立场，如若侵权请联系我们删除：https://www.huotun.com/game/675982.html