vue 視圖不更新

$nextTick

image.png

<template>
  <section>
    <h1 ref="hello">{{ value }}</h1>
    <el-button type="danger" @click="get">點擊</el-button>
  </section>
</template>
<script>
  export default {
    data() {
      return {
        value: 'Hello World ~'
      };
    },
    methods: {
      get() {
        this.value = '你好啊';
        console.log(this.$refs['hello'].innerText);
        this.$nextTick(() => {
          console.log(this.$refs['hello'].innerText);
        });
      }
    },
    mounted() {
    },
    created() {
    }
  }
</script>

image.png

根據(jù)上面的例子可以看出译红，在方法里直接打印的話，由于dom元素還沒有更新兴溜，因此打印出來的還是未改變之前的值侦厚，而通過this.$nextTick()獲取到的值為dom更新之后的值

this.$set的用法

data中數(shù)據(jù)，都是響應式拙徽。也就是說刨沦，如果操作data中的數(shù)據(jù)，視圖會實時更新膘怕；

但在實際開發(fā)中想诅，遇到過一個坑：若data中數(shù)據(jù)類型較為復雜，方法methods中改變對象的屬性岛心，視圖也就是頁面并不會改變

原因是vue監(jiān)聽不到數(shù)據(jù)類型特別復雜的屬性来破。

可以使用this.$set()來進行強制更新，進而解決問題

對象操作：

三個參數(shù)：this.$set("改變的對象"鹉梨，"改變的對象屬性"讳癌，"值")

數(shù)組操作：

三個參數(shù)：this.$set("數(shù)組"，"下標"存皂，"值")

<template>
<div id="app2">
<p v-for="item in items" :key="item.id">{{item.message}}</p>
<button class="btn" @click="handClick()">更改數(shù)據(jù)</button> 
</div>
</template>

<script>
export default {
data() {
return {
items: [
{ message: "one", id: "1" },
{ message: "two", id: "2" },
{ message: "three", id: "3" }
]
};
},
mounted(){
this.items[0]={message:"測試",id:"4"}; //此時對象的值更改了晌坤，但是視圖沒有更新
this.$set(this.items,0,{message:"測試",id:"4"})； //$set可以觸發(fā)更新視圖
console.log(this.items)
},
methods: {
// 調用方法：Vue.set( target, key, value )

// target：要更改的數(shù)據(jù)源(可以是對象或者數(shù)組)

// key：要更改的具體數(shù)據(jù)

// value ：重新賦的值
handClick() {
//Vue methods中的this 指向的是Vue的實例旦袋，這里可以直接在this中找到items
this.$set(this.items, 0, { message: "更改one的值", id: "0" });
},
}
};
</script>

<style>
</style>

參考：http://www.reibang.com/p/5fe073e36baf
參考：http://www.mamicode.com/info-detail-3063951.html
參考：https://www.cnblogs.com/lanshu123/p/11636377.html

監(jiān)聽參考：https://www.cnblogs.com/yesu/p/9546458.html

vue多層循環(huán)骤菠，動態(tài)改變數(shù)據(jù)后渲染的很慢或者不渲染
可在動態(tài)改變數(shù)據(jù)的方法，第一行加上

this.$forceUpdate();

在使用Vue框架開發(fā)時疤孕，在函數(shù)中改變了頁面中的某個值商乎，在函數(shù)中查看是修改成功了，但在頁面中沒有及時刷新改變后的值祭阀，我是在使用多層v-for嵌套時出現(xiàn)這種問題的鹉戚，

解決方法：運用 this.$forceUpdate()強制刷新

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者