Vue之nextTick()

時間 2019-12-10

標籤 vue nexttick 简体版

原文原文鏈接

咱們有時候操做 DOM，是想在 data 數據變動的時候進行操做。css

那麼，咱們應該怎麼作呢？html

index.htmlvue

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vue 學習</title> </head> <body> <!-- 2. Vue 掛載點 - Vue 的虛擬 DOM 在這裏操做到實際渲染 --> <!-- 簡單理解爲 jQuery 的拼接字符串（並不全是） --> <div id="app"></div> <!-- 1. 引用 Vue --> <!-- Vue CDN - 提供 Vue 服務 --> <script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script> <!-- Vue Router CDN - 管理路由 --> <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.js"></script> <!-- Axios CDN - 調用接口 --> <script src="https://cdn.bootcss.com/axios/0.18.0/axios.js"></script> <script>   var App = {  template: `  <div>  <input v-if="isShow" ref="input" />  </div>  `,  data: function() {  return {  isShow: true  }  },  mounted: function() {  // 但願在 Vue 真正渲染 DOM 到頁面以後進行下面操做  this.$nextTick(function() {  this.$refs.input.focus();  })  }  }   new Vue({  el: document.getElementById('app'),  components: {  app: App  },  template: `<app/>`  })   </script> </body> </html>

如上，經過 Vue 的全局 API Vue.nextTick()，咱們在下次 DOM 更新循環結束以後執行延遲迴調。在修改數據以後當即使用這個方法，獲取更新後的 DOM。ios

這個操做咱們可想象下 Promise 的執行流程，會得到更好的體驗。vue-router

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。