Vue+Vue xはどのようにvmを使いますか?

1966 ワード

vm.$nextTick
簡単に言えば、DOMは少なくとも現在のtick内のコードを全部実行してから更新します。したがって、データを修正してからDOMを更新して実行することは不可能であり、DOMの更新後にあるコードを実行するためには、このコードを次のイベントサイクルに入れなければならない。

//     
vm.message = 'changed' 
 
//          DOM。    ,    message DOM      
console.log(vm.$el.textContent) //      'changed' 
 
//    ,nextTick       DOM      
Vue.nextTick(function(){ 
  console.log(vm.$el.textContent) //    'changed' 
}) 

vm.$nextTickの役割は、次回のDOM更新サイクルに戻してから実行することです。
正常にready/mountedでデータを取得すれば、操作は簡単です。

ready() { // vue2   mounted() {
  var request = $.ajax({
    type: "POST",
    dataType: 'json',
    url: "api.php"
  });
  request.then((json) => {
    // balabala
    this.$nextTick(function () {
      // balabala
    })
  });
}
vuexを使うなら、vuexのデータ操作は全部actionとmuttionsにあります。そしてready/mountedでactionの関数を呼び出します。この時はどのようにvm.nextTickを使いますか?
この時はPromiseを使う必要があります。具体的なコードは以下の通りです。
トップページはap.jsです

export default {
  getFromConfig(config) {
    return $.ajax({ data: config })
  }
}
そしてaction.jsです

export const getArticleList = ({dispatch}, config) => {
  return api.getFromConfig(config).then(({data}) => {
    dispatch(types.RECEIVE_ARTICLE, data, config.page)
  })
}
ここに必ずreturnを追加してください。これでPromiseオブジェクトに戻ります。
最後はVueのセットです

methods: {
  loadMore(page = this.page) {
    var id = this.$route.params.id || ""
    Promise.all([
      this.getArticleList({
        id: id,
        page: page
      })
    ]).then(() => {
      this.$nextTick(function () {
        // balabala
      })
    })
  }
}
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。