快捷導(dǎo)航

詳解vue中$nextTick和$forceUpdate的用法

更新時間：2019年12月11日 11:19:14 作者：world_7735

這篇文章主要介紹了詳解vue中$nextTick和$forceUpdate的用法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

1、$nextTick

vm.$nextTick( [callback] )

this.$nextTick()將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行,在修改數(shù)據(jù)之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一樣，不同的是回調(diào)的 this 自動綁定到調(diào)用它的實例上。

應(yīng)用場景：

1、在Vue生命周期的created()鉤子函數(shù)進行的DOM操作一定要放在Vue.nextTick()的回調(diào)函數(shù)中。
2、因為在created()鉤子函數(shù)執(zhí)行的時候DOM 其實并未進行任何渲染，而此時進行DOM操作無異于徒勞，所以此處一定要將

DOM操作的js代碼放進Vue.nextTick()的回調(diào)函數(shù)中。與之對應(yīng)的就是mounted()鉤子函數(shù)，因為該鉤子函數(shù)執(zhí)行時所有的DOM掛載和渲染都已完成，此時在該鉤子函數(shù)中進行任何DOM操作都不會有問題。

在數(shù)據(jù)變化后要執(zhí)行的某個操作，而這個操作需要使用隨數(shù)據(jù)改變而改變的DOM結(jié)構(gòu)的時候，這個操作都應(yīng)該放進Vue.nextTick()的回調(diào)函數(shù)中。

<html>
  <head>
      <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <section>
        <div ref="hello">
         <h1>Hello World ~</h1>
        </div>
        <button type="danger" @click="get">點擊</button>
       </section>
     </div>
  </body>
</html>
<script>
new Vue({
 el: '#app',
 methods: {
   get() {
    console.log(0);
   }
  },
  mounted() {
   console.log(333);
   console.log(this.$refs['hello']);
   this.$nextTick(() => {
    console.log(444);
    console.log(this.$refs['hello']);
   });
  },
  created() {
   console.log(111);
   console.log(this.$refs['hello']);
   this.$nextTick(() => {
    console.log(222);
    console.log(this.$refs['hello']);
   });
  }
})
</script>

可以根據(jù)打印的順序看到，在created()鉤子函數(shù)執(zhí)行的時候DOM 其實并未進行任何渲染，而此時進行DOM操作并無作用，而在created()里使用this.$nextTick()可以等待dom生成以后再來獲取dom對象。

<html>
  <head>
      <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <section>
        <h1 ref="hello">{{ value }}</h1>
        <button type="danger" @click="get">點擊</button>
       </section>
     </div>
  </body>
</html>
<script>
new Vue({
 el: '#app',
 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>

this.$nextTick()在頁面交互，尤其是從后臺獲取數(shù)據(jù)后重新生成dom對象之后的操作有很大的優(yōu)勢。

2、this.$forceUpdate()

迫使Vue實例重新（rander）渲染虛擬DOM，注意并不是重新加載組件。結(jié)合vue的生命周期，調(diào)用$forceUpdate后只會觸發(fā)beforeUpdate和updated這兩個鉤子函數(shù)，不會觸發(fā)其他的鉤子函數(shù)。它僅僅影響實例本身和插入插槽內(nèi)容的子組件，而不是所有子組件；

應(yīng)用場景：當在data里沒有顯示的聲明一個對象的屬性，而是之后給該對象添加屬性，這種情況vue是檢測不到數(shù)據(jù)變化的，可以使用$forceUpdate()

html:
<span class="test">{{egData.value}}</span>
<el-button @click="changeData">改變</el-button>
 -------------------------------
js:
data(){
 return {
 egData: {}
}
 }
-------------------------------
 
 methods:{
changeData () {
  this.egData.value = 'oldValue'
  this.$forceUpdate() // dom會更新
}
}

但是這種做法并不推薦，官方說如果你現(xiàn)在的場景需要用forceUpdate方法 ,那么99%是你的操作有問題，如上data里不顯示聲明對象的屬性，之后添加屬性時正確的做法時用 vm.$set() 方法，所以forceUpdate請慎用。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: