Vue在生命周期里面使用nextTick的代码以及总结
//this.$nextTick写函数的形式相当于异步操作和js中的setTimeout类似，就可以像在created周期函数中使用到挂载后的渲染的dom节点。或者可以能够通过异步操作在同一函数（修改数据操作都在同一函数）看到修改后的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
message: {{ message }}
<button @click="handleModify">修改</button>
<button @click="visible = !visible">显隐</button>
<son v-if="visible"></son>
</div>
<script src="./lib/vue.global.js"></script>
<script>
Vue.createApp({
data() {
return {
message: 'Hello',
visible: true
}
},
beforeCreate() {
console.log('before create......', this.message)
},
created() {
console.log('created.......', this.$el)
this.$nextTick(() => {
console.log('nextTick....', this.$el)
})
// setTimeout(() => {
// console.log('timeout....', this.$el)
// })
},
beforeMount() {
console.log('before mount......', this.$el)
},
mounted() {
console.log('mounted.......', this.$el)
},
beforeUpdate() {
console.log('before update......',this.message)
},
updated() {
console.log('updated.......',this.message)
},
methods: {
handleModify() {
this.message = '你好!!!'
this.$nextTick(() => {
console.log('修改后的 dom:', this.$el.wholeText)
})
}
}
})
.component('son', {
template: `
<div>子组件</div>
`,
beforeUnmount() {
console.log('before unmount......')
},
unmounted() {
console.log('unmounted.......')
},
})
.mount('#app')
</script>
</body>
</html>
原文地址：https://blog.csdn.net/qq_52840130/article/details/135706416
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！