vue数据变化但页面不变
记录一下vue中数据变了 但是页面没有变化的几种情况和解决办法
情况一：vue无法检测实例不存在于data中的变量
原因：由于 Vue 会在初始化实例时对data中的数据执行getter/setter转化，所以变量必须在data对象上存在才能让Vue将它转化成响应式的
例如
<div>{{message}}</div>
data() {
return { };
}
this.message = "Hello" //页面不会发生变化
解决方法
<div>{{message}}</div>
data() {
return { message : " " };
}
this.message = "Hello"
情况二：vue不能检测到data中对象的动态添加属性或删除属性
动态给对象新增或删除属性是不会触发视图更新的，vue始别不出来
例如
<div>{{obj.message}}</div>
data() {
return {
obj: { id: 1 }
};
}
this.obj.message = "Hello" //不是响应式的，页面不会发生变化
delete this.obj.id //不是响应式的
解决办法
Vue.set(this.obj, 'id', 1) //动态添加
this.$set(this.obj, 'id', 2) //动态添加
this.obj = Object.assign( {}, this.obj, {a:1, b: 2} ) //动态添加多个
Vue.delete(this.obj, 'name') //动态移除
this.$delete(this.obj, 'name') //动态移除
情况三：变量为数组时，不能通过索引值直接修改或赋值，也不能修改数组长度
在修改数组数据的时候，应该使用push，pop，shift，unshift，sort，reverse等原生方法修改数据，因为vue能检测到这些方法所带来的数组数据变化。
例如
data() {
return {
arr: ['a', 'b', 'c' ]
};
}
this.arr[0] = 'x' // 不是响应式的
this.arr.length = 2 //不是响应式的
解决方法
Vue.set( this.arr, 4, 'd' )
this.$set ( this.arr, 4, 'd' )
情况四：异步获取接口数据，DOM数据不发生变化
vue在更新DOM时是异步执行的。当数据变化时，vue不会立即更新DOM，而是等到下一次事件循环再执行更新。如果需要立即更新视图，可以使用 Vue.nextTick()方法
情况五：循环嵌套层级太深，试图不更新
当嵌套太深时，页面可能不刷新，可以使用 this.$forceUpdate() 让页面强制刷新。this.$forceUpdate() 迫使vue实例重新渲染虚拟DOM，它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
官方说如果你现在的场景需要用forceUpdate方法，那么99%是你的操作有问题
情况六：路由参数变化时，页面数据不更新
/home/a，/home/b 公用一个组件Home，这代表他们复用RouterView，当进行路由切换时，页面只会渲染第一次路由匹配到的参数，之后再进行路由切换时，数据不会变化的。
解决办法：
1. 通过watch监听$route的变化
2. 给<router-view>绑定key属性，这样vue就会认为这是不同的
<router-view :key="key"></router-view>
情况七：变量通过赋值来定义的
在Vue中有两种类型的变量：响应式变量和非响应式变量。
在后端获取的变量，通常是响应式变量，他们会被vue监测到变化并同步到页面上，如果你修改了这些响应式变量，页面会随之改变。
通过赋值来定义的变量，通常是非响应式变量，如果你修改了这些非响应式变量，vue不会监测到他们的变化，所以页面不会改变。
如果你需要非响应式变量变成响应式变量，可以使用Vue.set方法或者数组的变异方法（例如push、splice等）
Vue.set(对象，添加的key, 属性值)
this.$set(对象，添加的key, 属性值)
this.$set 是 Vue.js 中的一个方法，用于解决Vue不能检测到对象属性的添加或删除的问题。当需要动态地向响应式对象添加一个属性，并确保这个新属性同样是响应式的（即当期值改变时，视图也会更新），可以使用this.$set
在Vue3中，this.$set已被移除，因为Vue3使用了proxy来实现响应式，这样在数据变化后能够更精确的检测到属性的添加和删除。
原文地址：https://blog.csdn.net/weixin_42217154/article/details/143023899
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！