//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>