vue生命周期的区别

最新推荐文章于 2024-07-16 17:20:09 发布
最新推荐文章于 2024-07-16 17:20:09 发布
阅读量266 收藏
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_67693370/article/details/126849601
版权

创建前后
    beforeCreate 创建前
        特点:有this,没有data与methods方法
    created创建后
        特点:有data,没有$el,dom节点
        用处:ajax请求,定时器,事件监听

挂载前后
    beforeMount 挂载前
     特点:有$el ,数据没有渲染

mounted挂载后
        特点:有dom节点,数据也渲染
        用处:操作节点,ajax请求
更新前后
  beforeUpdate更新前
        特点: 会执行多次数据更新,dom节点没有更新
 updated 更新完毕
        特点: 会执行多次数据更新,dom节点也更新
销毁前后
    beforeDestroy 销毁前
     特点:数据可以更新,视图已经不更新
     用处:移除事件监听,停止定时器
    destroyed 销毁完毕
     特点:没有this,切换视图与vue实例的联系

陈先生2468
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
细说vue生命周期
weixin_44237608的博客
06-04 273
细说Vue生命周期前言一、什么是生命周期？二、vue2源码1.callHook函数2.beforeCreate和created总结 前言 作为前端开发工程师，对于vue和react这样的框架，不能仅仅停留在会用API，更要能懂它们的原理，具体来说便是在源码层面上对它们的工作原理进行理解。 由于我学react时日尚短，这里就不献丑了，来细说一下vue的生命周期吧。 一、什么是生命周期？ 我们可以看一下vue.js是怎么说的： 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听
vue2生命周期和vue3生命周期的区别
qq252750818的博客
05-12 6219
vue2常用生命周期： 创建前：beforeCreate() 只有一些实例本身的事件和生命周期函数 创建后：Created() 是最早使用data和methods中数据的钩子函数 挂载前：beforeMount() 指令已经解析完毕，内存中已经生成dom树 挂载后：Mounted() dom渲染完毕页面和内存的数据已经同步 更新前：beforeUptate() 当data的数据发生改变会执行这个钩子，内存中的数据是新的，页面是旧的 更新后：Updated() 内存和页面都是新的 销毁前：bef
vue生命周期有哪些，以及区别
LL8476791的博客
07-05 1929
Vue生命周期总共分为8个阶段： 创建前后、挂载前后、更新前后、销毁前后 ①Vue生命周期第一个阶段：数据挂载阶段 创建前：获取不到数据，也拿不到DOM元素； 创建后：可以获取数据，但拿不到DOM元素。 ②Vue生命周期第二个阶段：模板渲染阶段 加载前：可以拿到DOM元素，但是DOM元素没有被解析； 加载后：可以拿到DOM元素，DOM元素被解析了。 ③Vue生命周期第三个阶段：组件更新阶段 更新前：数据改变了，DOM没有发生变化； 更新后：数据改变了，DOM也发生了变化。 ④Vue生命周期第四个阶段：组件销
VUE生命周期函数简单的区别
一起coding，一起嗨。
10-28 961
43、Vue2和vue3生命周期
sunnnnh的博客
06-09 560
1、什么是vue生命周期 每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。 ...
浅析Vue 生命周期
08-27
浅析Vue 生命周期 Vue 生命周期是指从 Vue 实例创建到销毁之间的一系列状态，整个过程可以被分为多个阶段，每个阶段都有其特定的钩子函数，可以在不同的生命周期中执行特定的操作。 实例初始化阶段 在创建 Vue ...
vue生命周期实例小结
10-18
下面是对Vue生命周期的详细解释： ### 初始化阶段 1. **`beforeCreate`**：在Vue实例被创建但数据观测（data observer）和属性及方法尚未初始化时调用。这个阶段实例还不能访问数据和DOM，通常用于配置实例的外部...
vue生命周期图片
09-20
这个图片主要介绍的是vue生命周期的整个过程，从创建到销毁的8个阶段
Vue 生命周期
01-08
什么是vue的生命周期 Vue 实例从开始创建、初始化数据、编译模板、挂载Dom和渲染、更新和渲染、卸载等一系列过程，这是 Vue 的...vue生命周期在项目中执行的顺序 1.beforeCeate() beforeCeate(){ console.log(this.
Vue生命周期.xmind
01-29
Vue生命周期.xmind
Vue生命周期中mounted和created的区别
热门推荐
xdnloveme的博客
09-19 40万+
一、什么是生命周期？ 用通俗的语言来说，就是Vue中实例或者组件从创建到消灭中间经过的一系列过程。虽然不太严谨，但是也基本上可以理解。 通过一系列实践，现在把所有遇到的问题整理一遍，今天记录一下created和mounted的区别： 二、created和mounted区别？ 官方图解如下: 我们从图中看两个节点： created:在模板渲染成html前调用，即通常初始化
Vue笔记（四）—— Vue生命周期中mounted和created的区别
成长笔记
07-29 3万+
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。 mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。 如：数据初始化一般放到created里面，这样可以及早发请求获取数据， 如果有依赖dom必须存在的情况，就放到mounted(){this.$nextTick(() => { /* co...
Vue生命周期区别
weixin_34220963的博客
02-05 266
2019独角兽企业重金招聘Python工程师标准>>> ...
Vue生命周期有哪几个？Vue生命周期每个阶段有什么区别？
weixin_47097924的博客
07-11 2812
Vue生命周期总共分为8个阶段： 创建前后、挂载前后、更新前后、销毁前后 Vue生命周期第一个阶段： 创建前：获取不到数据，也拿不到DOM元素； 创建后：可以获取数据，但拿不到DOM元素。 Vue生命周期第二个阶段： 加载前：可以拿到DOM元素，但是DOM元素没有被解析； 加载后：可以拿到DOM元素，DOM元素被解析了。 Vue生命周期第三个阶段： 更新前：数据改变了，DOM没有发生变化； 更新后：数据改变了，DOM也发生了变化。 Vue生命周期第四个阶段： 销毁前：所有的事件监听和实例都可以用； 销毁后：
vue生命周期的理解
小毛驴的博客
10-26 4万+
Vue实例从创建到销毁的过程，就是生命周期。详细来说也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。
vue生命周期共有几个阶段？分别是什么？
brain_bo的博客
01-31 2万+
一共8个阶段 1、beforeCreate（创建前） 2、created（创建后） 3、beforeMount（载入前） 4、mounted（载入后） 5、beforeUpdate（更新前） 6、updated（更新后） 7、beforeDestroy（销毁前） 8、destroyed（销毁后）   vue第一次页面加载会触发哪几个钩子函数？ beforeCreate、cre...
vue1.0与2.0区别之生命周期
Tank_in_the_street的博客
06-08 3709
vue1.0和vue2.0之间的区别
vue3【详解】单文件组件 SFC（含SFC的优点、缺点、使用场景、原理、使用预处理器、＜script setup＞语法详解、资源拆分）
最新发布
朝阳39的博客
07-16 598
自定义指令必须遵循命名规范（自定义指令名的首字母必须是v，后续跟首字母大写的自定义指令名称 ）// 在元素上做些操作 } } < template > < h1 v-my-directive > This is a Heading const。
【Vue】 style中的scoped
DX390609的博客
07-15 168
在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，通过该属性，可以使得组件之间的样式不互相污染。
react和vue生命周期区别
05-23
React 和 Vue 是两个流行的 JavaScript 框架，它们都有自己的生命周期方法。React 的生命周期方法包括： 1. Mounting：组件被创建并且插入到 DOM 中。 - constructor: 组件构造函数 - getDerivedStateFromProps: 从 props 中获取派生状态 - render: 渲染组件 - componentDidMount: 组件挂载到 DOM 上 2. Updating：组件更新，可以是 props 或者 state 的改变。 - getDerivedStateFromProps: 从 props 中获取派生状态 - shouldComponentUpdate: 判断是否需要重新渲染组件 - render: 渲染组件 - componentDidUpdate: 组件更新完成 3. Unmounting：组件被从 DOM 中移除。 - componentWillUnmount: 组件移除前的清理工作 Vue 的生命周期方法包括： 1. Creation：创建阶段，包括实例化、数据观测、模板解析、编译等。 - beforeCreate: 实例创建前调用 - created: 实例创建后调用 - beforeMount: 模板编译/挂载前调用 2. Mounting：挂载阶段，包括模板编译、挂载、渲染等。 - mounted: 模板编译/挂载后调用 3. Updating：更新阶段，包括响应式数据更新、虚拟 DOM 重构、渲染等。 - beforeUpdate: 组件更新前调用 - updated: 组件更新后调用 4. Destruction：销毁阶段，包括实例销毁前的清理工作等。 - beforeDestroy: 实例销毁前调用 - destroyed: 实例销毁后调用 总的来说，React 和 Vue 的生命周期方法有一些相似之处，但是也存在一些差异。React 有一个 shouldComponentUpdate 方法来判断是否需要重新渲染组件，Vue 则没有这个方法，但是提供了一个 watch 选项来观察数据的变化。另外，React 的生命周期方法是在组件的 class 中定义的，而 Vue 的生命周期方法则是在 Vue 实例中定义的。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值