VUE框架VM对象数据初始化阶段和挂载阶段详解------VUE框架

旧约Alatus

已于 2023-12-04 00:29:07 修改

阅读量973

点赞数 18

分类专栏： # VUE框架前端文章标签： vue.js 前端 javascript ecmascript 前端框架 vue js

于 2023-12-03 15:11:27 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/134765255

版权

前端同时被 2 个专栏收录

332 篇文章 2 订阅

订阅专栏

VUE框架

250 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}:{{count}}</h1>
        <button @click="add()">按一下加一</button>
        <button @click="destroy()">按下销毁VM</button>
    </div>
    <script>
        // 初始阶段,挂载阶段,更新阶段,销毁阶段
        // 一共是四个阶段,八个钩子函数
        // 初始阶段beforeCreate创建前,created创建后
        // 挂载阶段beforeMount挂载前,mounted挂载后
        // 更新阶段beforeUpdate更新前,updated更新后
        // 销毁阶段beforeDestroy销毁前,destroyed销毁后
        const vm = new Vue({
            el : "#app",
            data : {
                msg : "Hello",
                count : 1
            },
            methods : {
                add()
                {
                    this.count++;
                },
                destroy()
                {
                    this.$destroy();
                }
            },
            // 整个过程的实现
            // new Vue(),VM实例就出现了
            // vm对象在这里创建
            // 事件对象&生命周期产生了
            // 初始阶段,虚拟dom生成
            beforeCreate(){
                console.log("VUE对象初始化了");
                // beforeCreate阶段还没实现数据代理和数据监测
                // 所以根本访问不到我们的代理数据
                console.log(this.count);
            },
            // 数据代理和数据监测的创建
            created(){
                console.log("created");
                // 这里就可以访问到我们的代理数据了
                console.log(this.count);
                console.log(this.$el);
                console.log(this.$el instanceof HTMLElement);
            },
            // 初始阶段,el有,template也有,最终编译template模板语句
            // el有,template没有,最终编译el模板语句
            // el没有的时候,需要手动调用$mount来进行手动挂载,流程才能继续
            // 如果el没有,也没有template,最终编译el模板语句
            // 结论是流程需要继续,el必须存在
            // el和template同时存在,优先选择template,如果没有template,才会选择el
            // 挂载阶段,真实dom生成
            beforeMount(){
                console.log(this.$el);
                console.log(this.$el instanceof HTMLElement);
                console.log("beforeMount");
            },
            // 数据代理和检测创建时期和挂载时期在页面展示上没区别,在内存中有区别
            // 页面上他们都显示大胡子,因为数据还没有实现挂载的
            // 在beforeMount时期操作页面元素不会生效,因为还没有和页面元素产生挂载
            // 也就是所谓的没有生成实际的dom树
            // 我们现在的所谓修改也就是内存上修改而已
            mounted(){
                // 挂载是通过创建一个$el并用它取代了页面上的el
                // mounted处真实的dom也就生成了
                console.log(this.$el);
                console.log(this.$el instanceof HTMLElement);
                console.log("mounted");
                // 此处已经挂载完了,已经覆盖掉我们页面上的元素了
                // 所以这里的修改会保留到我们的页面上
                // 走到此处,页面的初次渲染就已经做完了,等待和用户的交互了
                // 在这前面都没有diff算法,和新旧虚拟dom比较这种说法
            },
            // 更新阶段
            beforeUpdate(){
                console.log("VUE对象的data更新了");
            },
            updated()
            {
                console.log("updated");
            },
            // 销毁阶段
            beforeDestroy(){
                console.log("VM对象销毁了");
            },
            destroyed()
            {
                console.log("destroyed");
            }
        });
    </script>
</body>
</html>
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<script src="../js/vue.js"></script>

</head>

<body>

<div id="app">

<h1>{{msg}}:{{count}}</h1>

<button @click="add()">按一下加一</button>

<button @click="destroy()">按下销毁VM</button>

</div>

<script>

// 初始阶段,挂载阶段,更新阶段,销毁阶段

// 一共是四个阶段,八个钩子函数

// 初始阶段beforeCreate创建前,created创建后

// 挂载阶段beforeMount挂载前,mounted挂载后

// 更新阶段beforeUpdate更新前,updated更新后

// 销毁阶段beforeDestroy销毁前,destroyed销毁后

const vm = new Vue({

el : "#app",

data : {

msg : "Hello",

count : 1

},

methods : {

add()

{

this.count++;

},

destroy()

{

this.$destroy();

}

},

// 整个过程的实现

// new Vue(),VM实例就出现了

// vm对象在这里创建

// 事件对象&生命周期产生了

// 初始阶段,虚拟dom生成

beforeCreate(){

console.log("VUE对象初始化了");

// beforeCreate阶段还没实现数据代理和数据监测

// 所以根本访问不到我们的代理数据

console.log(this.count);

},

// 数据代理和数据监测的创建

created(){

console.log("created");

// 这里就可以访问到我们的代理数据了

console.log(this.count);

console.log(this.$el);

console.log(this.$el instanceof HTMLElement);

},

// 初始阶段,el有,template也有,最终编译template模板语句

// el有,template没有,最终编译el模板语句

// el没有的时候,需要手动调用$mount来进行手动挂载,流程才能继续

// 如果el没有,也没有template,最终编译el模板语句

// 结论是流程需要继续,el必须存在

// el和template同时存在,优先选择template,如果没有template,才会选择el

// 挂载阶段,真实dom生成

beforeMount(){

console.log(this.$el);

console.log(this.$el instanceof HTMLElement);

console.log("beforeMount");

},

// 数据代理和检测创建时期和挂载时期在页面展示上没区别,在内存中有区别

// 页面上他们都显示大胡子,因为数据还没有实现挂载的

// 在beforeMount时期操作页面元素不会生效,因为还没有和页面元素产生挂载

// 也就是所谓的没有生成实际的dom树

// 我们现在的所谓修改也就是内存上修改而已

mounted(){

// 挂载是通过创建一个$el并用它取代了页面上的el

// mounted处真实的dom也就生成了

console.log(this.$el);

console.log(this.$el instanceof HTMLElement);

console.log("mounted");

// 此处已经挂载完了,已经覆盖掉我们页面上的元素了

// 所以这里的修改会保留到我们的页面上

// 走到此处,页面的初次渲染就已经做完了,等待和用户的交互了

// 在这前面都没有diff算法,和新旧虚拟dom比较这种说法

},

// 更新阶段

beforeUpdate(){

console.log("VUE对象的data更新了");

},

updated()

{

console.log("updated");

},

// 销毁阶段

beforeDestroy(){

console.log("VM对象销毁了");

},

destroyed()

{

console.log("destroyed");

}

});

</script>

</body>

</html>