vue v-for循環渲染完畢在執行方法

時間 2019-11-13

標籤 vue 循環渲染完畢執行方法简体版

原文原文鏈接

在項目時用到了一些插件，好比此次用了下拉菜單插件。javascript

這個插件須要實例化，而下拉框的數據是經過ajax來獲取的，而後在用 v-for 渲染數據，再次遇到了一個問題。html

就是等插件實例化完畢，數據卻還沒渲染完畢，因此這就出現一個bug。出現bug解決掉。vue

第一種解決方法： settimeoutjava

 setTimeout(function() {
    //實例初始化
  },100)

可是這種方法有一個缺點，就是不肯定數據何時渲染完畢。ios

第一種狀況：假設10毫秒渲染完畢，可是setTimeout須要等100毫秒，浪費了90毫秒。ajax

第二種狀況：假設數據須要 200 毫秒執行完畢，可是 100毫秒就執行了實例初始化，BUG又出現了。axios

總而言之這種方法不是咱們想要的，看第二種方法。app

第二種解決方法： watch + vm.nextTickthis

這兩種方法是 vue 的屬性和方法。url

watch：監聽某一個data數據發生變化就執行方法。

例：

 vm = new Vue({
    el:'.app',
    data: {
      a: '1',
    },
    watch: {
      a: function() {
        console.log('a的數據發生變化'+this.a);
      }
    }
  })
  vm.a = '2';

data 裏面的a屬性發生了變化變成成了2，就觸發了watch的a方法。console.log（a的數據發生變化2）；

nextTich: 在下次 DOM 更新循環結束以後執行延遲迴調。在修改數據以後當即使用這個方法，獲取更新後的 DOM。

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div @click="ceshi()">{{ a }}</div>
</body>
<script type="text/javascript">
  vm = new Vue({
    el:'.app',
    data: {
      a: '1',
    },
    methods:{
      ceshi(){
        a = 2;
        /*DOM還沒更新*/
        this.$nextTick(function(){
          /*DOM更新了*/
        })
      }
    }
  })
</script>
</html>

$nextTick 裏面DOM更新是指頁面上的數據是最新的數據。而不是data的a數據更新了。

知道這兩種屬性以後。咱們開始解決一下BUG吧。

先貼完整代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <setion>
      <option value="1" v-for="(item,key) in arr" :key="key">{{ item }}</option>
    </setion>
</body>
<script type="text/javascript">
  vm = new Vue({
    el:'.app',
    data: {
      arr: [],
    },
    wathc:{
      arr: function() {
        this.$nextTick(function(){
          /*如今數據已經渲染完畢*/
        })
      }
    },
    mounted:function() {
      var that = this;
      axios.get('url',{
        params:{
          link: '',
        }
      }).then(function(res){
          that.arr = res;
      })
    }
  })
</script>
</html>

好，這就是咱們解決的完整代碼。解釋一下什麼意思。

在 axios 請求數據是 this.arr被賦值了，watch監聽到了 arr 數據發生變化執行arr方法。到了this.$nextTick 它須要等DOM 渲染完畢才執行（也就是等arr在DOM渲染完畢）。

這個方法完美解決需求，既不浪費時間又不會出現數據還沒渲染完畢就執行實例初始化。這只是一個插件的實例化，經過這個例子能夠應用不少的需求。

相關標籤/搜索

每日一句

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