目录
环境一：Vue无法检测实例被创建时不存在于data中的变量原因：由于 Vue 会在初始化实例时对data中的数据实验[code]getter/setter[/code]转化，以是[code]变量必须在data对象上存在[/code]才能让Vue将它转化成[code]相应式[/code]的 比方： [code]new Vue({ data: {}, template: '<div>{{message}}</div>' }) this.message = 'Hello World' // 由于'message'不是相应式的，页面不会发生变化 [/code]办理方法： [code]new Vue({ data: { message: '' }, template: '<div>{{message}}</div>' }) this.message = 'Hello World' [/code]环境二：Vue不能检测到data中对象的动态添加属性和删除属性动态给对对象新增属性或删除属性是不会触发视图更新的，Vue辨认不到 比方： [code]new Vue({ data: { obj:{ id: 1 } }, template: '<div>{{ obj.message }}</div>' }) this.obj.message = 'hello' // 不是相应式的 delete this.obj.id //不是相应式的 [/code]办理办法： [code]// 动态添加 - Vue.set Vue.set(this.obj, 'id', 001) // 动态添加 - this.$set this.$set(thsi.obj, 'id', 002) // 动态添加多个 - Object.assign // 取代 Object.assign(this.obj, { a:1, b:2}) this.obj = Object.assign({}, this.obj, { a:1, b:2}) // 动态移除 - Vue.delete Vue.delete(this.obj, 'name') // 动态移除 - this.$delete this.$delete(this.obj, 'name') [/code]环境三：变量为数组时，不能通过索引值直接修改或者赋值，也不能修改数组的长度我们在修改数组数据的时间，应该使用push()、pop()、shift()、unshift()、sort()、reverse()等原生的方法去利用数据，因为Vue可以直接检测到这些方法所带来的数组数据变化。 比方： [code]new Vue({ data: { items: ['a', 'b', 'c'] } }) this.items[1] = 'x' // 不是相应式的 this.items[3] = 'd' // 不是相应式的 this.items.length = 2 // 不是相应式的 [/code]办理方法： [code]// Vue.set Vue.set(this.items, 4, 'd') // this.$set this.$set(this.items, 4, 'd') // Array.prototype.splice // 修改利用： splice(你要修改的元素索引位置, 1, 修改后的值) // 添加利用： splice(你要添加到谁人元素的后面就写到谁人元素的索引+1, 0, 要添加的值) // 删除利用： splice(你要删除的元素的索引, 1) this.items.splice(indexOfItem, 4, 'd') // 修改长度 this.items.splice(3) [/code]环境四： 异步获取接口数据，DOM数据不发生变化原因：[code]Vue在更新 DOM 时是异步实验的[/code]。当数据变化时，Vue不会立刻更新DOM，而是等到下一次事件循环再实验更新。假如须要立刻更新视图，可以使用[code]Vue.nextTick(callback)[/code]方法 比方1： 修改完数据之后想立刻利用 DOM 元素，就须要使用nextTick [code]<div id='example'>{{message}}</div> var vm = new Vue({ el: '#example', data: { message: '123' } }) vm.message = 'new message' // 更改数据 vm.$el.textContent === 'new message' // false vm.$el.style.color = 'red' // 页面没有变化 [/code]办理办法： [code]<div id='example'>{{message}}</div> var vm = new Vue({ el: '#example', data: { message: '123' } }) vm.message = 'new message' // 更改数据 // 使用 Vue.nextTick(callback) callback将在 DOM 更新完成后被调用 Vue.nextTick(function() { vm.$el.textContent === 'new message' // true vm.$el.style.color = 'red' // 笔墨颜色变成红色 }) [/code]比方2： 假如想要在created()中利用DOM，也须要使用nextTick，因为在此阶段，DOM还未渲染 [code]created(){ this.$nextTick(() => { // 不使用this.$nextTick()会报错 that.$refs.btn.innerHTML = 'created中更改了按钮内容' }) } [/code]环境五： 循环嵌套层级太深，视图不更新当嵌套太深时，页面也可能不更新，此时可以让页面强制革新 因为Vue修改数据是异步实验的，以是是不不会立刻更新，会等到下一次DOM更新循环竣事后，统一更新发生在这一次循环中修改的数据，然后同步视图更新，以是我们可以修改后自己手动强制更新视图。 [code]this.$forceUpdate()[/code]迫使Vue实例重新（render）渲染虚拟DOM，留意并不是重新加载组件。 联合 Vue 的生命周期，调用 $forceUpdate 后只会触发 beforeUpdate 和 updated 两个钩子函数，不会触发其他的钩子函数。 它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。 [code]// 官方说假如你如今的场景须要用forceUpdate方法，那么99%是你的利用有题目 this.$forceUpdate() [/code]环境六： 路由参数变化时，页面不更新（数据不更新）比方： [code]<div id='app'> <ul> <li><router-link to='/home/foo'>To Foo</router-link></li> <li><router-link to='/home/baz'>To Baz</router-link></li> <li><router-link to='/home/bar'>To Bar</router-link></li> </ul> <router-view></router-view> </div> [/code] [code]const Home = { template: `<div>{{message}}</div>`, data() { return { message: this.$route.params.name } } } const router = new VueRouter({ mode: 'history', routes: [ {path: '/home', component: Home}, {path: '/home/:name, component: Home} ] }) new Vue({ el: '#app', router }) [/code]上段代码中，我们在路由构建选项routes中设置了一个动态路由'home/:name'，他们共用了一个路由组件Home，这代表他们复用 RouterView 当举行路由切换时，页面只会渲染第一次路由匹配到的参数，之后再举行路由切换时，message是没有变化的。 办理方法：
环境七：变量通过赋值来定义的在 Vue 中有两种范例的变量：相应式变量和非相应式变量。 在后端获取的变量通常是相应式变量，也就是说它们会被 Vue 检测到变化并同步到页面上，假如你修改了这些相应式变量，页面会随之改变。 而通过赋值来定义的变量，通常黑白相应式变量，假如你修改了这些非相应式变量，Vue并不会监测到他们的变化，以是页面不会改变。 假如你须要是一个非相应式变量变成相应式变量，可以使用Vue.set方法或者数组的变异方法（比方push、splice等） 例1：Vue.set(对象，添加的key, 属性值) [code] Vue.set // 这个是直接用在Vue身上的。比方：Vue.set(对象, 添加的key, 属性值) // 常见于 xx.js文件中 // 留意： js文件中，须要引入vue，比如 import Vue from vue [/code]例2：this.$set(对象，添加的key, 属性值) [code] this.$set // 这个是用在vm或vc实例上的，比如vue文件中， // this.$set(要添加属性的对象，要添加属性的名称, 要设置的新属性值) // 常见于 xx.vue文件中 [/code] [code]this.$set 是 Vue.js 中的一个方法，用于办理Vue不能检测到对象属性的添加或删除的题目。当须要动态地向相应式对象添加一个属性，并确保这个新属性同样是相应式的（即当期值改变时，视图也会更新），可以使用this.$set[/code] [code]在Vue3中，this.$set已被移除，因为Vue3使用了proxy来实现相应式，这样在数据变化后能够更精确的检测到属性的添加和删除。[/code]以上就是Vue数据变了但页面没有变的几种环境及办理方法的具体内容，更多关于Vue数据变了页面没变的办理的资料请关注脚本之家别的相关文章！ 来源：https://www.jb51.net/javascript/326645zsk.htm 免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
/6 
|手机版|小黑屋|梦想之都-俊月星空
( 粤ICP备18056059号 )|网站地图
GMT+8, 2025-7-2 08:27 , Processed in 0.035072 second(s), 19 queries .
Powered by Mxzdjyxk! X3.5
© 2001-2025 Discuz! Team.
