Vue数据改变，但页面没有变的几种情况及解决方法

如果，你发现本身必要在Vue中做一次逼迫更新，99.99%的情况，是你在某个地方做错了事
情况一：Vue无法检测实例被创建时不存在于data中的变量

原因：由于 Vue 会在初始化实例时对data中的数据实验getter/setter转化，所以变量必须在data对象上存在才气让Vue将它转化成响应式的

1. 例如：
2. js 代码解读复制代码new Vue({
3.     data: {},
4.     template: '<div>{{message}}</div>'
5. })
6. this.message = 'Hello World' // 由于'message'不是响应式的，页面不会发生变化

复制代码

解决方法：

1. js 代码解读复制代码new Vue({
2.     data: {
3.         message: ''
4.     },
5.     template: '<div>{{message}}</div>'
6. })
7. this.message = 'Hello World'

复制代码

情况二：Vue不能检测到data中对象的动态添加属性和删除属性

动态给对象新增属性或删除属性是不会触发视图更新的，Vue辨认不到

1. 例如：
2. js 代码解读复制代码new Vue({
3.     data: {
4.         obj:{
5.             id: 1
6.         }
7.     },
8.     template: '<div>{{ obj.message }}</div>'
9. })
10. this.obj.message = 'hello' // 不是响应式的
11. delete this.obj.id //不是响应式的
13. 解决办法：
14. js 代码解读复制代码// 动态添加 - Vue.set
15. Vue.set(this.obj, 'id', 001)
16. // 动态添加 - this.$set
17. this.$set(this.obj, 'id', 002)
19. // 动态添加多个 - Object.assign
20. // 代替 Object.assign(this.obj, { a:1, b:2})
21. this.obj = Object.assign({}, this.obj, { a:1, b:2})
23. // 动态移除 - Vue.delete
24. Vue.delete(this.obj, 'name')
25. // 动态移除 - this.$delete
26. this.$delete(this.obj, 'name')

复制代码

情况三：变量为数组时，不能通过索引值直接修改或者赋值，也不能修改数组的长度

我们在修改数组数据的时候，应该使用push()、pop()、shift()、unshift()、sort()、reverse()、splice()等原生的方法去操作数据，由于Vue可以直接检测到这些方法所带来的数组数据变化。

1. 例如：
2. js 代码解读复制代码new Vue({
3.     data: {
4.         items: ['a', 'b', 'c']
5.     }
6. })
7. this.items[1] = 'x' // 不是响应式的
8. this.items[3] = 'd' // 不是响应式的
9. this.items.length = 2 // 不是响应式的

复制代码

解决方法：

1. js 代码解读复制代码// Vue.set
2. Vue.set(this.items, 4, 'd')
3. // this.$set
4. this.$set(this.items, 4, 'd')
6. // Array.prototype.splice
7. // 修改操作： splice(你要修改的元素索引位置, 1, 修改后的值)
8. // 添加操作： splice(你要添加到那个元素的后面就写到那个元素的索引+1, 0, 要添加的值)
9. // 删除操作： splice(你要删除的元素的索引, 1)
10. this.items.splice(indexOfItem, 4, 'd')
12. // 修改长度
13. this.items.splice(3)

复制代码

情况四： 异步获取接口数据，DOM数据不发生变化

原因：Vue在更新 DOM 时是异步实验的。当数据变化时，Vue不会立即更新DOM，而是比及下一次变乱循环再实验更新。如果必要立即更新视图，可以使用Vue.nextTick(callback)方法

1. 例如1：
2. 修改完数据之后想立刻操作 DOM 元素，就需要使用nextTick
3. js 代码解读复制代码<div id='example'>{{message}}</div>
4. var vm = new Vue({
5.     el: '#example',
6.     data: {
7.         message: '123'
8.     }
9. })
10. vm.message = 'new message' // 更改数据
11. vm.$el.textContent === 'new message' // false
12. vm.$el.style.color = 'red' // 页面没有变化
14. 解决办法：
15. js 代码解读复制代码<div id='example'>{{message}}</div>
16. var vm = new Vue({
17.     el: '#example',
18.     data: {
19.         message: '123'
20.     }
21. })
22. vm.message = 'new message' // 更改数据
23. // 使用 Vue.nextTick(callback) callback将在 DOM 更新完成后被调用
24. Vue.nextTick(function() {
25.     vm.$el.textContent === 'new message' // true
26.     vm.$el.style.color = 'red' // 文字颜色变成红色
27. })
29. 例如2：
30. 如果想要在created()中操作DOM，也需要使用nextTick，因为在此阶段，DOM还未渲染
31. js 代码解读复制代码created(){
32.     this.$nextTick(() => { // 不使用this.$nextTick()会报错
33.         that.$refs.btn.innerHTML = 'created中更改了按钮内容'
34.     })
35. }

复制代码

情况五： 循环嵌套层级太深，视图不更新

当嵌套太深时，页面也可能不更新，此时可以让页面逼迫刷新
由于Vue修改数据是异步实验的，所以是不不会立即更新，会比及下一次DOM更新循环结束后，同一更新发生在这一次循环中修改的数据，然后同步视图更新，所以我们可以修改后本身手动逼迫更新视图。

1. this.$forceUpdate()

复制代码

迫使Vue实例重新（render）渲染捏造DOM，留意并不是重新加载组件。
结合 Vue 的生命周期，调用$forceUpdate后只会触发beforeUpdate和 updated 两个钩子函数，不会触发其他的钩子函数。
它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
js 代码解读复制代码// 官方说如果你如今的场景必要用forceUpdate方法，那么99%是你的操作有问题

1. this.$forceUpdate()

复制代码

情况六： 路由参数变化时，页面不更新（数据不更新）

1. 例如：
2. js 代码解读复制代码<div id='app'>
3.     <ul>
4.         <li><router-link to='/home/foo'>To Foo</router-link></li>
5.         <li><router-link to='/home/baz'>To Baz</router-link></li>
6.         <li><router-link to='/home/bar'>To Bar</router-link></li>
7.     </ul>
8.     <router-view></router-view>
9. </div>
11. js 代码解读复制代码const Home = {
12.     template: `<div>{{message}}</div>`,
13.     data() {
14.       return {
15.           message: this.$route.params.name
16.       }      
17.     }
18. }
20. const router = new VueRouter({
21.     mode: 'history',
22.     routes: [
23.         {path: '/home', component: Home},
24.         {path: '/home/:name, component: Home}
25.     ]
26. })
28. new Vue({
29.     el: '#app',
30.     router
31. })

复制代码

上段代码中，我们在路由构建选项routes中配置了一个动态路由’home/:name’，他们共用了一个路由组件Home，这代表他们复用 RouterView
当进行路由切换时，页面只会渲染第一次路由匹配到的参数，之后再进行路由切换时，message是没有变化的。

1. 解决方法：
3. 通过watch 监听 $route的变化
5. js 代码解读复制代码const Home = {
6.     template: `<div>{{message}}</div>`,
7.     data() {
8.       return {
9.           message: this.$route.params.name
10.       }      
11.     },
12.     watch: {
13.         '$route': function(){
14.             this.message = this.$route.params.name
15.         }
16.     }
17. },
19. const router = new VueRouter({
20.     mode: 'history',
21.     routes: [
22.         {path: '/home', component: Home},
23.         {path: '/home/:name, component: Home}
24.     ]
25. })
27. new Vue({
28.     el: '#app',
29.     router
30. })

复制代码

给绑定key属性，这样Vue就会认为这是不同的
弊端：如果从 /home 跳转到 /user 等其他路由下，我们是不消担心组件更新问题的，所以这个时候key属性是多余的。

1.    <div id='app'>
2.         ...
3.         <router-view :key='key'></router-view>
4.     </div>

复制代码

情况七：变量通过赋值来定义的

在 Vue 中有两种范例的变量：响应式变量和非响应式变量。
在后端获取的变量通常是响应式变量，也就是说它们会被 Vue 检测到变化并同步到页面上，如果你修改了这些响应式变量，页面会随之改变。
而通过赋值来定义的变量，通常是非响应式变量，如果你修改了这些非响应式变量，Vue并不会监测到他们的变化，所以页面不会改变。
如果你必要是一个非响应式变量酿成响应式变量，可以使用Vue.set方法或者数组的变异方法（例如push、splice等）

1. 例1：Vue.set(对象，添加的key, 属性值)
2. js 代码解读复制代码    Vue.set
3.     // 这个是直接用在Vue身上的。例如：Vue.set(对象, 添加的key, 属性值)
4.     // 常见于 xx.js文件中
5.     // 注意： js文件中，需要引入vue，比如 import Vue from vue
7. 例2：this.$set(对象，添加的key, 属性值)
8. js 代码解读复制代码    this.$set
9.     // 这个是用在vm或vc实例上的，比如vue文件中，
10.     // this.$set(要添加属性的对象，要添加属性的名称, 要设置的新属性值)
11.     // 常见于 xx.vue文件中

复制代码

this.$set 是 Vue.js 中的一个方法，用于解决Vue不能检测到对象属性的添加或删除的问题。当必要动态地向响应式对象添加一个属性，并确保这个新属性同样是响应式的（即当期值改变时，视图也会更新），可以使用this.$set
在Vue3中，this.$set已被移除，由于Vue3使用了proxy来实现响应式，这样在数据变化后可以或许更精确的检测到属性的添加和删除。但你也可以使用set（）方法去代替Vue2的this.$set。
情况八：使用插槽 对父组件进行传参渲染

页面组件初始化渲染的时候，是用参数传进父组件，父组件又包含的模板插槽，初次渲染后，对组件内数据进行修改，此时你会发现怎么修改都无效，无论你的数据是否响应式绑定！由于此时插槽模板已经渲染完，不会再进行二次渲染，你要做的就是使它重新渲染
可以使用v-if或者v-for去遍历你的插槽，使它重新渲染

1. <template v-for="item in arr"
2.     :key="item.id"
3.      #[`${item.label}-header`]
4.    >
5.     <xxx />
6. </template>

复制代码