Vue：Vue对象的生命周期

Vue对象的生命周期/vuelifecycle.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.3.3.4.js"></script>
</head>
<body>
<div id="box">
    {{message}}
    <input type="text" v-model="message">

</div>
<script>
    vm = Vue.createApp({
        data() {
            return {
                message: "hello"
            }
        },
        beforeCreate() {
            //data初始化之前
            console.log('data初始化之前:beforeCreate:' + this.message);//undefined
            console.log(this.$data);//{}//空对象，可以复制一下，复制的内容是{}
            console.log(this.$el);//null
        },
        created() {
            //data数据已经被注入到vm对象
            //工作中,往往在这个created方法中使用ajax请求获取服务端的数据，并加载到data属性中。
            console.log('data数据已经被注入到vm对象:created:' + this.message);//hello
            console.log(this.$data);//{"message": "hello"}
            console.log(this.$el);//null
        },
        beforeMount() {
            // data数据渲染到html模板之前
            console.log('data数据渲染到html模板之前');
            console.log(this.$el)//null
        },
        mounted() {
            // data数据渲染到html模板之后
            console.log('data数据渲染到html模板之后');//工作中，一般在这里编写页面初始化操作代码，在用户看到页面之前，修改html代码就要在这里编写
            console.log(this.$el);//"hello"-->##text
            console.log(this.$el.parentElement);//获取这个dom标签对象
        },
        beforeUpdate() {
            //data数据更新之前的钩子
            console.log('data数据更新之前的钩子');//工作中这里编写就是判断是否有效
            console.log(this.message);//data在此次数据被改动,此处为获取当前的数据
            console.log(this.$data.message);//data在次数据被改动,此处为获取当前的数据
            console.log(this.$el.parentElement.innerHTML);//此处为获取当前对象的文本内容，是更新之前的数据，还没有同步到Html中
        },
        updated() {
            //data数据更新之后的钩子
            console.log('data数据更新之后的钩子');//工作中这里编写就是数据改动以后，同步保存到本地，或者ajax请求到服务端,保存到数据库代码
            console.log(this.message);//data数据已被改动,此处为获取当前的数据，即改动后的数据
            console.log(this.$data.message);//
            console.log(this.$el.parentElement.innerHTML);//此处为获取当前对象的文本内容，是更新之前的数据，还没有同步到Html中
        },
    }).mount("#box")
</script>
</body>
</html>

总结:

1
2
3

在vue使用的过程中,如果要初始化操作，把初始化操作的代码放在mounted中执行
mounted阶段就是vm已经把data数据实现到页面以后。一般页面初始化使用。列如，用户访问页面加载成功以后，就要执行ajax请求。
另一个就是created,这个阶段就是在vue对象创建以后，把ajax请求后端数据的代码放入created