[JavaScript知识库] vue 生命周期钩子（部分）

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue 生命周期钩子（部分） -> 正文阅读

[JavaScript知识库]vue 生命周期钩子（部分）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{ a }}
</div>
<script src="vue.js"></script>
<script>
    //el  element 缩写 指定vue管理的试图，某个盒子的选择器
    //data vue中对象

    var data = {a: 1}

    const vm = new Vue({
        el: "#app", data: data,
        beforeCreate() {
            console.log("beforeCreate 在实例初始化之后，数据观测 (data observer ) 和 event/watcher 事件配置之前被调用。简单理解为也秒你创建之前")
        },
        created() {
            console.log("created 在实例创建完成后被立即调用\n 在这一步，实例已完成以下的配置。数据观测 (data observer ) 属性的方法的运算 和 event/watcher 事件回调 \n然而。挂载阶段还没开始 $el 属性目前不可见。")
        },
        beforeMount() {
            console.log("beforeMount 在挂载开始之前被调用 相关的渲染函数首次被调用")
        },
        mounted() {
            console.log("mounted 在挂载成功后调用  el被新创建的vm.$el替换")
        },
        beforeUpdate() {
            console.log("beforeUpdate 数据更新时调用")
        },
        updated() {
            console.log("updated 组件dom已经更新，组件更新完毕")
        }
    });
    setTimeout(function () {
        vm.$data.a = "change....."
    }, 3000);

</script>
</body>

</html>