Vue.js基础学习（一) -----了解vue.js的生命周期

最新推荐文章于 2022-06-08 22:00:16 发布

D-liang先生

最新推荐文章于 2022-06-08 22:00:16 发布

阅读量99

点赞数

分类专栏： vue.js学习文章标签： vue

本文链接：https://blog.csdn.net/weixin_45352819/article/details/111991716

版权

vue.js学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vue.js基础学习（一)

	重点：
		① 了解vue
		② 了解vue.js的生命周期函数

一、什么是Vue.js

什么是Vue.js？简而言之，它是使用HTML和JavaScript构建用户界面的渐进框架。详情请看Vue官网

二、安装方式

①通过直接用

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

②通过NPM安装

$ npm install vue

三、了解vue的生命周期

1):什么是vue的生命周期?

vue 的生命周期就是vue实例从创建到它销毁的一个过程。

21):什么是vue的生命周期钩子函数？

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。在这个过程中执行的一些函数（方法）就是它的生命周期钩子函数。首先我们看一下官方的图：

从官方的图我们可以看到一个有8个什么周期钩子函数：beforeCreat()创建、created()创建
、beforeMount()挂载前、mounted()挂载、beforeupdate()更改前、update()更改、beforeDestory()销毁前、Destroy()销毁，下面我们用代码分析它们的区别：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
    <h1>{{message + '这是在outer HTML中的'}}</h1>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message : "小白白"
        },
        template:"<h1>{{message +'这是在template中的'}}</h1>",
        beforeCreate: function () {
            console.group('beforeCreate 创建前状态===========》');
            console.log("el     : " + this.$el); //undefined
            console.log("data   : " + this.$data); //undefined
            console.log("message: " + this.message)
        },
        created: function () {
            console.group('created 创建完毕状态===============》');
            console.log("el     : " + this.$el); //undefined
            console.log("data   : " + this.$data); //已被初始化
            console.log("message: " + this.message); //已被初始化
        },
        beforeMount: function () {
            console.group('beforeMount 挂载前状态===============》');
            console.log("el     : " + (this.$el)); //已被初始化
            console.log(this.$el);
            console.log("data   : " + this.$data); //已被初始化
            console.log("message: " + this.message); //已被初始化
        },
        mounted: function () {
            console.group('mounted 挂载结束状态===============》');
            console.log("el     : " + this.$el); //已被初始化
            console.log(this.$el);
            console.log("data   : " + this.$data); //已被初始化
            console.log("message: " + this.message); //已被初始化
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前状态===============》');
            console.log("el     : " + this.$el);
            console.log(this.$el);
            console.log("data   : " + this.$data);
            console.log("message: " + this.message);
        },
        updated: function () {
            console.group('updated 更新完成状态===============》');
            console.log("el     : " + this.$el);
            console.log(this.$el);
            console.log("data   : " + this.$data);
            console.log("message: " + this.message);
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("el     : " + this.$el);
            console.log(this.$el);
            console.log("data   : " + this.$data);
            console.log("message: " + this.message);
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
            console.log("el     : " + this.$el);
            console.log(this.$el);
            console.log("data   : " + this.$data);
            console.log("message: " + this.message)
        }
    })
</script>
</body>
</html>

1.beforeCreat()创建

该函数就是在Vue实例初始化之后，数据观测和event/watcher事件配置之前调用，
beforeCreat()
从结果我们可以看到在这个函数调用的时候 vue实例中的所有data、watcher、methods等都没有。这个时候vue实例还什么都没有，但是$route对象时存在的，可以根据路由信息重新进行重定向之路的操作

2.created()创建

在创建实例之后进行调用。一般配合axios调用方法得到数据。同时在这一步，实例已经完成了数据观察、属性和方法的计算、watch/event事件的回调。但是挂载还没有开始，$el属性时看不见的。此时this. $data 可以访问的，watcher、event、methods也出现了，若根据后台接口动态改变data和methods的场景下，可以使用
created()
注意这里的el也是undefined所以它的数据没有完成了初始化，它的el挂载在虚拟DOM上（提前占位），没有挂载到真实的DOM上。但是数据data已经加载出来了， 所以我们在beforeCreate（）的时候千万不要去修改data里数据，最早也要放到creared()里。

3.beforeMount()挂载前

页面加载完成，没有渲染
.beforeMount()
这里我们看到vue中的所有数据 el data message 都加载出来了，el 也初始化了。在这里相关的render函数首次调用。但是render正在执行中，此时的DOM还是无法操作的。页面显然时的数据尽量在这里之前完成赋值
但是我们以看到官方图中在其前面还有其他的操作，下面我们也简单的分析一下⬇
在这里插入图片描述

4.mounted()挂载

在dom文档渲染完毕之后将要执行的函数。此时页面中的{{message}}已被渲染成‘小白白’
在这里插入图片描述
在这个函数的时候创建的vm.$el替换成el，并挂载到实例上。此时元素已经完成了渲染，依赖于DOM的执行的代码可以放在这里。比如：监听DOM事件

5.beforeupdate()更改前

在data跟新之后，虚拟DOM重新渲染之前和打补丁之前被调用。可以在这个钩子中进一步的修改data，这不会触发附件的重渲染过程

6.update()更改

在虚拟DOM重新渲染之后和打补丁之后被调用。当这个钩子被调用时，组件DOM和data已经更新，所以我们可以执行依赖DOM的操作。但是不要在此修改data，否则会继续触发beforeupdate()和update()进入死循环

7.beforeDestory()销毁前

vue实例被销毁前调用，在这一步实例完全可以用。

8.Destroy()销毁

vue实例销毁之后调用。此时，实例只是的所有数据已经解绑，所有的事件监听被移除，所有的子实例也已经销毁，这个时候能做的事情不多只能加一下提示之类的东西

9.特别的两个钩子函数

	①activated()  -----  keep-alive 组件激活时调用。
	②deactivated()-------keep-alive组件激活时调用

D-liang先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js基础学习（一) -----了解vue.js的生命周期

Vue.js基础学习（一) 重点： ① 了解vue ② 了解vue.js的生命周期函数一、什么是Vue.js什么是Vue.js？简而言之，它是使用HTML和JavaScript构建用户界面的渐进框架。详情请看Vue官网二、安装方式①通过直接用 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>②通过NPM安装$ npm install vue三、了解vue的生命周期
复制链接

扫一扫