前端学习日记Vue：vue的初始化过程与生命周期

落日映苍穹つ 2023-06-07 03:28 6阅读 0赞

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title></title>  
<script src="vue.js" type="text/javascript" charset="utf-8"></script>  
</head>  
<body>  
<div id="app">  
    \{ \{msg\}\}  
</div>  
<script type="text/javascript">  
    // 每个 Vue 实例在被创建时都要经过一系列的初始化过程——  
    // 例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。  
    // 同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。  
var vm = new Vue(\{  
    el : "\#app",  
    data : \{  
        msg : "hi vue",  
    \},  
      
    //在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。  
    beforeCreate:function()\{  
        console.log('beforeCreate');  
        console.log(this.$el);  
        //undefined  
        console.log(this.$data);  
        //undefined  
    \},  
      
    /\* 在实例创建完成后被立即调用。  
    在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。  
    然而，挂载阶段还没开始，$el 属性目前不可见。 \*/  
    created    :function()\{  
        console.log('created');  
        console.log(this.$el);  
        //undefined  
        console.log(this.$data);  
        //\{\_\_ob\_\_: Observer\}  
    \},  
    //在挂载开始之前被调用：相关的渲染函数首次被调用  
    beforeMount : function()\{  
        console.log('beforeMount');  
        console.log(this.$el);  
        // <div id="app">  
        //     \{ \{msg\}\}  
        // </div>  
        console.log(this.$data);  
        //\{\_\_ob\_\_: Observer\}

\},  
    //el 被新创建的 vm.$el 替换, 挂在成功      
    mounted : function()\{  
        console.log('mounted');  
        console.log(this.$el);  
        //<div id="app">  
            // hi vue  
        // </div>      
        console.log(this.$data);  
        //\{\_\_ob\_\_: Observer\}  
      
    \},  
    //数据更新时调用  
    beforeUpdate : function()\{  
        console.log('==更新成功==');  
        console.log(vm.msg);  
        //change ......  
              
    \},  
    //组件 DOM 已经更新, 组件更新完毕   
    updated : function()\{  
        console.log('=即将更新渲染=');  
        console.log(vm.msg);  
        //change ......  
              
    \},  
    /\*  
    beforeDestory: function()\{  
       console.log("销毁前：");  
    \},  
    destoryed: function()\{  
         console.log("销毁完成：");  
    \}  
    \*/

\});

//3s后更新msg的数据  
setTimeout(function()\{  
    vm.msg = "change ......";  
\}, 3000);  
</script>  
</body>  
</html>