vue的生命周期

忘是亡心i 2021-09-19 00:34 330阅读 0赞

生命周期：

Vue实例从开始创建、初始化数据、编译模板、挂载DOM->渲染，更新->渲染、卸载等一系列过程，我们称这是Vue的声明周期，各个阶段有相对应的事件钩子。

8个生命周期钩子：

1.beforeCreate:

实例初始化之后，this指向创建的实例，不能访问data、computed、methods里面的方法和数据。

作用：（一般用于关于初始化非响应式变量）。

2.created:

实例创建完成，可访问data、computed、methods里面的数据和方法。未挂载到DOM，不能访问到$el属性，$ref属性内容为空数组。

作用：一般用于简单的ajax请求，页面的初始化。

3.beforeMount:

在挂载之前被调用，在beforeMount 之前，会找到对应的 template ,并编译成render函数。

(此处的Template就是指的是每个vue组件的跟标签<template></template>;然后这个render函数就是里面就是有 createElement 这中的，就是将标签都通过js来 创建VNode ,虚拟节点。然后后面再直接渲染到页面中，然后变成真实节点。)

4.mounted:

实例挂载到DOM上，此时可以通过DOM api 获取到DOM节点，$ref也可以访问

作用：常用语获于Node 信息和操作，ajax请求。

5.beforeUpdate:

响应式数据更新的时候调用，发生在虚拟DOM打补丁之前

作用：适合再更新之前访问现有的DOM，比如手动移除已添加的事件监听器。

6.updated:

虚拟DOM重新渲染和打补丁之后调用，组件DOM已经更新，可执行依赖于DOM的操作。

作用：避免在这个钩子函数中操作数据，可能陷入死循环。

7.beforeDestory:

实例销毁之前调用，实例仍然完全可用，this仍能获取到实例。

作用：常用于销毁定时器、解绑全局事件、销毁插件对象等操作。

8.destoryed:

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

注意：

1.created阶段的ajax请求与mounted请求的区别：前者页面视图未出现，如果请求信息过多，页面会长时间处于白屏状态

2.mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染

发表评论取消回复

表情：

评论列表（有 0 条评论，330人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue的生命周期

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

墨蓝/ 2023年01月17日 03:23/ 0 赞/ 93 阅读

相关 Vue_Vue的生命周期

Vue的生命周期：Vue实例的创建、运行、到销毁称为vue的生命周期 8个阶段： beforeCreate():创建之前，获取不到数据和methods;初始化中，初始化

ゝ一世哀愁。/ 2022年12月10日 08:43/ 0 赞/ 157 阅读

相关 vue的生命周期

vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。 ![af04d1adb

àì夳堔傛蜴生んèń/ 2022年10月29日 13:27/ 0 赞/ 70 阅读

相关 Vue的生命周期

Vue的生命周期解释（作用）：Vue的生命周期是指，页面在不同的状态下触发的事件。 vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作,

- 日理万妓/ 2022年10月29日 05:22/ 0 赞/ 93 阅读

相关 Vue的生命周期

什么是Vue的生命周期？答：Vue实例从创建到销毁的过程就是生命周期。即：开始创建创建，初始化数据，编译模板，挂载DOM→渲染，更新→渲染，销毁

缺乏、安全感/ 2022年03月21日 06:24/ 0 赞/ 235 阅读

相关 Vue的生命周期

生命周期：是一个组件从创建到销毁的过程。生命周期钩子函数　　分为几个阶段：生命周期的几个阶段跟人的一生相似　　beforeCreate : 　　　　　　　创

╰半橙微兮°/ 2021年12月24日 08:13/ 0 赞/ 208 阅读

相关 vue的生命周期

vue生命后期有以下几个： beforeCreated created beforeMounted mounted beforeUpdated updated b

àì夳堔傛蜴生んèń/ 2021年10月23日 13:32/ 0 赞/ 248 阅读

相关 vue的生命周期

生命周期： Vue实例从开始创建、初始化数据、编译模板、挂载DOM->渲染，更新->渲染、卸载等一系列过程，我们称这是Vue的声明周期，各个阶段有相对应的事件钩子。

忘是亡心i/ 2021年09月19日 00:34/ 0 赞/ 331 阅读

相关 vue的生命周期

一.概念了解 1.什么是生命周期 Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue

小鱼儿/ 2021年09月15日 15:40/ 0 赞/ 391 阅读

相关 vue的生命周期

vue实例生命周期支持vue实例的生命周期如下：beforeCreatecreatedbeforeMountmounted beforeUpdateupdatedactiva

矫情吗；*/ 2021年07月24日 18:10/ 0 赞/ 513 阅读