快捷導(dǎo)航

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

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

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

1、$nextTick

vm.$nextTick( [callback] )

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

應(yīng)用場(chǎng)景：

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

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

在數(shù)據(jù)變化后要執(zhí)行的某個(gè)操作，而這個(gè)操作需要使用隨數(shù)據(jù)改變而改變的DOM結(jié)構(gòu)的時(shí)候，這個(gè)操作都應(yīng)該放進(jìn)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">點(diǎn)擊</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í)行的時(shí)候DOM 其實(shí)并未進(jìn)行任何渲染，而此時(shí)進(jìn)行DOM操作并無(wú)作用，而在created()里使用this.$nextTick()可以等待dom生成以后再來(lái)獲取dom對(duì)象。

<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">點(diǎn)擊</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()在頁(yè)面交互，尤其是從后臺(tái)獲取數(shù)據(jù)后重新生成dom對(duì)象之后的操作有很大的優(yōu)勢(shì)。

2、this.$forceUpdate()

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

應(yīng)用場(chǎng)景：當(dāng)在data里沒(méi)有顯示的聲明一個(gè)對(duì)象的屬性，而是之后給該對(duì)象添加屬性，這種情況vue是檢測(cè)不到數(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會(huì)更新
}
}

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: