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

最新推荐文章于 2022-11-24 15:40:54 发布

创求进

最新推荐文章于 2022-11-24 15:40:54 发布

阅读量178

点赞数

分类专栏：前端文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/m0_38061421/article/details/99088561

版权

前端专栏收录该内容

2 篇文章

订阅专栏

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，如下图：

在这里插入图片描述
示例代码：

<!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>
<!-- 1.导入Vue包 -->
<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方法")
                    }
                },

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

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

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

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

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

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

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

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

结果：
在这里插入图片描述

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

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

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

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

                },

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

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

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

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

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>
<!-- 1.导入Vue包 -->
<script src="./lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- {{ msg }} -->
        <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>