Vue生命周期和实例

最新推荐文章于 2024-08-11 18:40:36 发布

VHotdog

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量77

点赞数

分类专栏： Vue 文章标签： vue javascript vue.js html5 node.js

本文链接：https://blog.csdn.net/Nan_gao_0/article/details/110244975

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

大家好，我是VHotdog，一只小哈狗！

首先了解并创建一个Vue实例，然后再探讨生命周期函数。

创建一个Vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

<script>
const app = new Vue({
	....
})
</script>

在Vue中所有的组件都是Vue实例
在vue中有个重要的思想组件化开发，那么问题来了，什么叫做组件化，为什么要组件化？接下来我就针对这两个问题解答。

所谓组件化，就是把页面拆分成多个块(组件)，每个块(组件)依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。因为块(组件)是资源独立的，所以块(组件)在系统内部可复用(复用性高)，块(组件)和块(组件)之间可以嵌套，如果项目比较复杂，可以极大简化代码量，并且对后期的需求变更和维护也更加友好。

在这里插入图片描述
如果你现在处于懵逼状态的话，没关系。我会在后面几章用代码给你更深的理解！万事还得靠敲！！！

1. 体验Vue响应式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
    <div id="app">
        {{count}} 
    </div>
</body>

<script>
	// const Es6新增语法
    const app = new Vue({
    	// 挂载 id为app DOM
        el: "#app",
        data: {
        	// 测试数据
            count: 0
        }
    })
</script>
</html>

浏览器查看结果，可以看到count被渲染出来了
注意注意看我控制台数据
在这里插入图片描述

在这里，我们在控制台设置我们app对象的count值，页面数据也随着改变(不是我改的哦)。小伙伴可以试一下
在这里插入图片描述

2.生命周期函数

官方是这样子说的：

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

![在这里插入图片描述](https://img-blog.csdnimg.cn/2020112721060885.png#pic_center

上图就是Vue实例从出生到嗝屁的整个过程！

剖析

我们都知道代码是自上向下运行，我们可以把Vue实例也如图自上向下看，执行，按步骤执行。当然它是有旁支的，并且有条件判断。而在这旁支里有八个函数，他们就是生命周期函数，官网叫他生命周期钩子！！也是回调函数！！
在很多的框架中都在使用生命周期函数。
beforeCreate（创建前） created（创建后）
beforeMount（挂载前） mounted（挂载后）
beforeUpdate（更新前） updated（更新后）
beforeDestory（销毁前） destoryed（销毁后）
Vue的生命周期总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。
结合图理解

beforeCreate(创建前)

它处在init Eevent&Lifecyle 与 init injectiors&reactivity之间，
"想一想"当Vue实例跑到int Ev&Lf后，中间有个虚线，意思就是Vue实例会检测你写没写beforeCreate这个函数。如果你没写，Vue实例就甩都不甩beforeCreate函数，继续向下执行。但如果你写了，那好。Vue实例不先去执行init injec&rct 了，它去回调(运行)你写的beforeCreate函数，该执行啥执行啥。完事后他就继续向下执行init ijt&rct等等等了。
类似于你用javascript在页面加载完成后想使用一下alert(或别的)一样有没有。可以搞一些好玩的*.*

created(创建后)

它处在init injec&rct和Has el中间一个虚线，当Vue实例跑到init injec&rct后，他会判断你写没写created函数。如果你没写，继续向下执行。如果你写了，会先回调created函数，在继续向下执行。

<script>
	// const Es6新增语法
    const app = new Vue({
    	// 挂载 id为app DOM
        el: "#app",
        data: {
        }，
        beforeCreate() {
				console.log('beforeCreate')
	 	},
	 	Created() {
				console.log('Created')
		}
    })
</script>

在这里插入图片描述

beforeMount（挂载前）

相同思路，想一想啦
mounted（挂载后）

相同思路，想一想啦
beforeUpdate（更新前）

相同思路，想一想啦
updated（更新后）

相同思路，想一想啦
beforeDestory（销毁前）

相同思路，想一想啦
destoryed（销毁后）

相同思路，想一想啦

组件销毁之后调用，对 data 的改变不会再触发周期函数，vue 实例已解除事件监听和 dom绑定，但 dom 结构依然存在。

总结

Vue这个生命周期函数在以后的开发中还是会经常使用的，面试的时候也是会提的一个哦。

VHotdog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue生命周期和实例

大家好，我是VHotdog，一只小哈狗！人生苦短，我选javascript.py今天开始我就开始要撸代码，今天主要目标还是蛮简单的。首先了解并创建一个Vue实例，然后再探讨生命周期函数。创建一个Vue实例每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：<script>const app = new Vue({ ....})</script>在Vue中所有的组件都是Vue实例在vue中有个重要的思想组件化开发，那么问题来了，什么
复制链接

扫一扫

专栏目录