外国平面设计网站,山东省住房建设厅网站,嘉定专业网站建设,注册公司那家网站做的比较好记录一下vue中数据变了 但是页面没有变化的几种情况和解决办法
情况一#xff1a;vue无法检测实例不存在于data中的变量
原因#xff1a;由于 Vue 会在初始化实例时对data中的数据执行getter/setter转化#xff0c;所以变量必须在data对象上存在才能让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) //动态移除 情况三变量为数组时不能通过索引值直接修改或赋值也不能修改数组长度
在修改数组数据的时候应该使用pushpopshiftunshiftsortreverse等原生方法修改数据因为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 :keykey/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来实现响应式这样在数据变化后能够更精确的检测到属性的添加和删除。
