Vue+Vue xはどのようにvmを使いますか?
1966 ワード
vm.$nextTick
簡単に言えば、DOMは少なくとも現在のtick内のコードを全部実行してから更新します。したがって、データを修正してからDOMを更新して実行することは不可能であり、DOMの更新後にあるコードを実行するためには、このコードを次のイベントサイクルに入れなければならない。
正常にready/mountedでデータを取得すれば、操作は簡単です。
この時はPromiseを使う必要があります。具体的なコードは以下の通りです。
トップページはap.jsです
最後はVueのセットです
簡単に言えば、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
})
})
}
}
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。