vue之nextTick
阿新 • • 發佈：2020-11-13
Vue.nextTick( [callback, context] )
-
引數：
{Function} [callback]{Object} [context]
-
用法：
在下次 DOM 更新迴圈結束之後執行延遲迴調。在修改資料之後立即使用這個方法，獲取更新後的 DOM。
// 修改資料 vm.msg = 'Hello' // DOM 還沒有更新 Vue.nextTick(function () { // DOM 更新了 })
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id='app'>
<App></App>
</div>
<script src="./vue.js"></script>
<script>
/*
需求:
在頁面拉取一個介面，這個介面返回一些資料，這些資料是這個頁面的一個浮層元件要依賴的，
然後我在介面一返回資料就展示了這個浮層元件，展示的同時，
上報一些資料給後臺（這些資料是父元件從介面拿的），
這個時候，神奇的事情發生了，雖然我拿到資料了，但是浮層展現的時候，
這些資料還未更新到元件上去,上報失敗
*/
const Pop = {
data() {
return {
isShow: false
}
},
props: {
name: {
type: String,
default: ''
},
},
template: `
<div v-if='isShow'>
{{name}}
</div>
`,
methods: {
show() {
this.isShow = true; //彈窗元件展示
console.log(this.name);
}
},
}
const App = {
data() {
return {
name: ''
}
},
created() {
// 模擬非同步請求
setTimeout(() => {
// 資料更新
this.name = '更新資料';
this.$nextTick(()=>{
this.$refs.pop.show();
})
}, 1000);
},
components: {
Pop
},
template: `<pop ref='pop' :name='name'></pop>`
}
const vm = new Vue({
el: '#app',
components: {
App
}
})
</script>
</body>
</html>