Vue資料更新但頁面沒有更新的多種情況問題及解決

2022-07-20 18:00:40

資料更新但頁面沒有更新的多種情況

1.Vue無法檢測範例被建立時不存在於data中的變數

原因：由於 Vue 會在初始化範例時對 data中的資料執行 getter/setter 轉化，所以變數必須在 data 物件上存在才能讓 Vue 將它轉換為響應式的。

例如：

new Vue({
  data:{},
  template: '<div>{{message}}</div>'
})
this.message = 'Hello world !' // `message` 不是響應式的頁面不會發生變化

解決方法：

 new Vue({
  data: {
    message: '',
  },
  template: '<div>{{ message }}</div>'
})
this.message = 'Hello world!'

2.vue也不能檢測到data中物件的動態新增和刪除

例如：

 new Vue({
  data:{
    obj: {
      id: 1
    }
  },
  template: '<div>{{ obj.message }}</div>'
})
this.obj.message = 'hello' // 不是響應式的
delete this.obj.id       // 不是響應式的

解決：

// 動態新增 - Vue.set
Vue.set(this.obj, 'id', 002)
 
// 動態新增 - this.$set
this.$set(this.obj, 'id', 002)
 
// 動態新增多個
// 代替 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')

3.陣列的時候

不能通過索引直接修改或者賦值，也不能修改陣列的長度

例如：

new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
this.items[1] = 'x' // 不是響應性的
this.items[3] = 'd' // 不是響應性的
this.items.length = 2 // 不是響應性的

解決：

// Vue.set
Vue.set(this.items, 4, 'd')
 
// this.$set
this.$set(this.items, 4, 'd)
 
// Array.prototype.splice
this.items.splice(indexOfItem, 4, 'd')
//修改長度
this.items.splice(3)

4.非同步獲取介面資料，DOM資料不發現變化

原因：Vue 在更新 DOM 時是非同步執行的。只要偵聽到資料變化，Vue 將開啟一個佇列，並緩衝在同一事件迴圈中發生的所有資料變更。如果同一個 watcher 被多次觸發，只會被推入到佇列中一次。這種在緩衝時去除重複資料對於避免不必要的計算和 DOM 操作是非常重要的。然後，在下一個的事件迴圈“tick”中，Vue 重新整理佇列並執行實際 (已去重的) 工作。Vue 在內部對非同步佇列嘗試使用原生的 Promise.then、MutationObserver 和 setImmediate，如果執行環境不支援，則會採用 setTimeout(fn, 0) 代替。

例如：

<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' // 頁面沒有變化

解決辦法：

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' // 文字顏色變成紅色
})

也可以等資料獲取完成後再觸發dom更新可點選連結檢視

5.迴圈巢狀層級太深，檢視不更新

當巢狀太深時，頁面也可以不更新，此時可以讓頁面強制重新整理

this.$forceUpdate()   (不建議用)

6.路由引數變化時，頁面不更新(資料不更新)

拓展一個因為路由引數變化，而導致頁面不更新的問題，頁面不更新本質上就是資料沒有更新。

原因：路由檢視元件參照了相同元件時，當路由參會變化時，會導致該元件無法更新，也就是我們常說中的頁面無法更新的問題。

場景：

<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>

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
})

上段程式碼中，我們在路由構建選項 routes 中設定了一個動態路由 '/home/:name'，它們共用一個路由元件 Home，這代表他們複用 RouterView 。

當進行路由切換時，頁面只會渲染第一次路由匹配到的引數，之後再進行路由切換時，message 是沒有變化的。

解決辦法：

解決的辦法有很多種，這裡只列舉我常用到幾種方法。

1.通過 watch 監聽 $route 的變化。

  const Home = {
      template: `<div>{{message}}</div>`,
      data() {
        return {
          message: this.$route.params.name
        }
      },
      watch: {
       '$route': function() {
       this.message = this.$route.params.name
        }
        }
    }
    new Vue({
      el: '#app',
      router
    })

2.給<router-view> 繫結key屬性，這樣 Vue 就會認為這是不同的 <router-view>。

弊端：如果從 /home 跳轉到 /user 等其他路由下，我們是不用擔心元件更新問題的，所以這個時候 key 屬性是多餘的。

 <div id="app"><router-view :key="key"></router-view>
    </div>

強制更新資料 this.$forceUpdate()

使用Vue開發時，在函數中改變了頁面中的某個值，在函數中檢視是修改成功了，但在頁面中沒有及時重新整理改變後的值；

賦值玩以後，執行下面這個方法強制重新整理資料。

this.$forceUpdate()

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。