이 글은 주로 Vue + Vuex에서 vm.$nextTick을 사용하는 방법에 대한 자세한 설명을 소개합니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.
vm.$nextTick
간단히 말하면, DOM은 최소한 현재 틱의 모든 코드가 실행된 후에 업데이트되기 때문입니다. 따라서 데이터가 수정되고 DOM이 업데이트된 후에는 실행이 불가능합니다. DOM이 업데이트된 후 특정 코드가 실행되도록 하려면 이 코드를 setTimeout과 같은 다음 이벤트 루프에 배치해야 합니다. (fn, 0) 이렇게 하면 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/Mouned에서 데이터를 얻으면 작업이 매우 간단합니다.
ready() { // vue2 为 mounted() { var request = $.ajax({ type: "POST", dataType: 'json', url: "api.php" }); request.then((json) => { // balabala this.$nextTick(function () { // balabala }) }); }
vuex를 사용하는 경우 vuex의 데이터 작업은 모두 Action 및 Mutation이므로 Ready/Mounted에서 작업을 호출하세요. 함수, 그렇다면 이때는 어떻게 vm.$nextTick을 사용하나요?
이때 Promise를 사용해야 합니다. 구체적인 코드는 다음과 같습니다.
홈페이지는 api.js
export default { getFromConfig(config) { return $.ajax({ data: config }) } }
그다음 액션입니다. js
export const getArticleList = ({dispatch}, config) => { return api.getFromConfig(config).then(({data}) => { dispatch(types.RECEIVE_ARTICLE, data, config.page) }) }a는 여기에 반환을 추가하여 약속 대상을 반환 할 수 있도록 vue 구성 요소를 반환 할 수 있도록 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 }) }) } }related 권장 사항을 반환 할 수 있습니다. Vuex 개선 학습 공유 Vuex 제품군 버킷 상태 관리 정보
위 내용은 vm.$nextTick 인스턴스를 사용한 Vue + Vuex에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!