vue01——vue的介绍和生命周期

傷城~ 2021-10-18 07:14 243阅读 0赞

## 1.vue简介 ##

###### 1.1 概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。（摘抄Vue官网） ######

###### 1.2 vue的使用：可以直接在一个HTML页面引入远程的vue包，也可以把包下载到本地再引入，如： ######

1.<script src="./lib/vue.js"></script>
    2.<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

--------------------

## 2.vue的生命周期 ##

###### 2.1 每个Vue实例在被创建时都要经过一系列的初始化过程–例如，需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命期钩子的函数，这给用户在不同的阶段添加自己的代码的机会 ######

###### 2.2 Vue的声明周期一共包含 8 个周期函数：beforeCreate、created，beforeMount、mounted，beforeUpdate，updated，如下图： ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MDYxNDIx_size_16_color_FFFFFF_t_70]  
示例代码：

1.beforeCreate() :是生命周期的第一个函数，该函数表示实例在创建之前会执行它，此时 data 和 methods 中的数据还没初始化：

beforeCreate() { 
                        console.log(this.msg);
                        this.show();
                    },

结果：  
![在这里插入图片描述][20190810200005887.png]  
2.created() :这是第二个生命周期函数，在 created 函数中data 和 methods 都已经初始化好了, 如果要操作 methods 中的方法，或者操作data中的数据，最早只能在 created 函数中操作:

created() { 
                        console.log(this.msg);
                        this.show();
                    },

结果：  
![在这里插入图片描述][20190810200204388.png]  
3.beforeMount()：这是第三个生命周期函数，表示模板已经在内存中编辑完成，但尚未把模板渲染到页面中，所以此时是获取不了模板中的数据：

beforeMount() { // 这是第三个生命周期函数，表示模板已经在内存中编辑完成，但尚未把模板渲染到页面中
                        console.log(document.getElementById('h3').innerText);
                    },

结果：  
![在这里插入图片描述][20190810200533588.png]  
4. mounted()：这是第四个生命周期函数，表示内存中的模板已经真实的挂载到前端页面中，用户已经可以看到渲染好的页面

mounted() { 
             console.log(document.getElementById('h3').innerText)
                   },

结果：  
![在这里插入图片描述][20190810201026689.png]

> 注意：mounted 是实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示 实例已经被完全创建好了，此时，如果没有其他操作的话，这个实例就会存在内存中；  
> 如果要通过某些插件来操作页面上的DOM节点，最早要在mounted中操作， 只要执行完了mounted就表示Vue实例已经初始化完毕了，组件已经脱离了 ***创建*** 阶段，进入到 ***运行*** 阶段

> 以上四个函数创建期间的生命周期函数

5.beforeUpdate()：当执行该函数的时候，页面中的显示的数据还是旧的，此时 data 数据是最新的， 页面尚未和最新的数据保持同步：

beforeUpdate() {
                        console.log('界面上的内容： ' + document.getElementById('h3').innerText);
                         console.log('data 中的数据是：' + this.msg);
    
                    },

结果（点击按钮后data中的数据已经发生变化，但是还没加载到页面中去，所以此时在页面山获取到的数据时改变前的数据）：  
![在这里插入图片描述][20190810201434455.png]  
6. updated() : 该函数执行的时候，页面和 data 数据已经保持同步了，都是最新的

updated() {
                        console.log('界面上的内容： ' + document.getElementById('h3').innerText);
                        console.log('data 中的数据是：' + this.msg);的
                    }

结果（此时在页面上和data中获取到数据都是最新的）：  
![在这里插入图片描述][20190810202452533.png]

> 以上两个为\*\*\*运行\*\*\*期间的生命周期函数：

7.beforeDestroy()：实例销毁之前调用。在这一步，实例仍然完全可用。

8.destroyed()：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

> 以上两个为销毁期间的生命周期函数

--------------------

###### 完整代码如下： ######

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>vue15_vue生命周期</title>
    
    <script src="./lib/vue.js"></script>
    </head>
    <body>
        <div id="app">
            
            <input type="button" value="改变msg" @click="msg = 'NO'">
           <h3 id="h3">{
       { msg }}</h3>
            
        </div>
        <script>
            var vm = new Vue(
                {
                    el: '#app',
                    data:{
                       msg: 'OK'
                    },
                    methods: {
                        show() {
                            console.log("show方法")
                        }
                    },
                    beforeCreate() { 
                        // console.log(this.msg);
                        // this.show();
                    },
                    created() {  
                        // console.log(this.msg);
                        // this.show();
                    },
                    beforeMount() { 
                        // console.log(document.getElementById('h3').innerText);
                    },
                    mounted() { 
                        // console.log(document.getElementById('h3').innerText)
                          
                    },
    
                    // 以下是运行中的两个事件
                    beforeUpdate() {
                        // console.log('界面上的内容： ' + document.getElementById('h3').innerText);
                        // console.log('data 中的数据是：' + this.msg);
                        
                    },
                    updated() {
                        console.log('界面上的内容： ' + document.getElementById('h3').innerText);
                        console.log('data 中的数据是：' + this.msg);
                    }
            });
        </script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MDYxNDIx_size_16_color_FFFFFF_t_70]: /images/20211018/b1a986ed50ae40f997b39bbf11bd41c7.png
[20190810200005887.png]: /images/20211018/439b5a955a5f434d808d725da9340e9d.png
[20190810200204388.png]: /images/20211018/14f132d4cdcd4c499f2fccac9c9ef972.png
[20190810200533588.png]: /images/20211018/c6713fffb84440749bf4931067f2b7e4.png
[20190810201026689.png]: /images/20211018/dd5bd1ca3f6441a997dbdff6c0a179b0.png
[20190810201434455.png]: /images/20211018/879addaaabf64577a4b9dbd63f29a1d9.png
[20190810202452533.png]: /images/20211018/7cc6c055e8294cbca160aeb6a0243f4d.png