vue3.x相对于vue2.x生命周期改动
vue3.x已经正式发布了,部分小伙伴已经用了vue3.x开发,部分小伙伴还在观望中,下面是两个影响比较大的改动
1、beforeDestroy和destroyed不能用了。
这个应该是vue2.x项目升级为vue3.x项目影响最大的地方,突然发现项目中beforeDestroy和destroyed不会被调用了,可以批量替换为beforeUnmount和unmounted。
2、新增了 setup 函数。
执行 setup 时,组件实例尚未被创建。因此你在setup中不能使用this,同时你只能访问以下 property:props、attrs、slots、emit,将无法访问以下组件选项:data、computed、methods、refs。
setup函数有两个参数props和context。props 是响应式的,当传入新的 prop 的时侯,它将被更新。context可以用来访问上面可以使用的属性,相当于this。
最后,上两张硬核的图


vue3.x相对于vue2.x生命周期改动的更多相关文章
- vue2.0 生命周期 简析
Vue2.0 生命周期钩子函数: <template> <div id='app'> {{message}} </div> </template> va ...
- vue2.x生命周期
vue2.x生命周期 1. beforeCreate 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用. 2. created 实例已经创建 ...
- Vue2.0生命周期和钩子函数的一些理解
转自:https://segmentfault.com/a/1190000008010666 前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mount ...
- Vue2.0 —生命周期和钩子函数
vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了. 生命周期探究 对于执行顺序和什么时候执行,看上面两个图基本有个了解了.下面我们将结合代码去看看钩子函数的执 ...
- Vue2:实例生命周期、js生命周期
1.vue2生命周期 每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 DOM ...
- 详解Vue2.0生命周期
网上已经有很多关于vue生命周期的文章,我的这篇文章的由来,其实是我对官网上描述的一句话的思考与理解:“el被新创建的vm.$el替换”,所以文章更多的内容可能是在对vue生命周期中“created ...
- Vue2.0 - 生命周期
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- vue2.0生命周期
https://www.cnblogs.com/goloving/p/8616989.html(copy )
- vue2.0生命周期详解
首先上图展 <template> <div id="home"> <p>{{ message }}</p> </div> ...
随机推荐
- 集合框架3-Arrays 类
Arrays 和 Collections是分别操作数组和集合的两个工具类.今天就来对 Arrays 中的内容作个总结. 一.Arrays 类概述 Arrays 类位于 java.util包中.Arra ...
- springcloud3(五) spring cloud gateway动态路由的四类实现方式
写这篇博客主要是为了汇总下动态路由的多种实现方式,没有好坏之分,任何的方案都是依赖业务场景需求的,现在网上实现方式主要有: 基于Nacos, 基于数据库(PosgreSQL/Redis), 基于Mem ...
- python-引用/模块
导入文件,先从当前目录下找,找不到从环境变量中找 1.导入模块,实质是把制定的py文件执行一遍. 自己写的模块:要导入的文件在当前目录下的:form 文件夹.py文件名 import 函数名 标准模块 ...
- 30天自制操作系统(二)汇编语言学习和Makefile入门
我们继续学习操作系统的相关内容. ; hello-os ; TAB=4 ORG 0x7c00 ; このプログラムがどこに読み込まれるのか ; 以下は標準的なFAT12フォーマットフロッピーディスクのた ...
- python math详解(1)
python math详解(1) 一.导入 python要调用math要进行导入 import math 二.返回值 math包里有一些值 比如 math.pi 返回pi的值 约为3.14 math. ...
- 织梦 arclist调用副栏目内容解决办法
1 打开include/taglib/arclist.lib.php,找到296行: if($CrossID=='') $orwheres[] = ' arc.typeid IN ('.GetSonI ...
- switchery插件:多个按钮,用jquery进行切换
单个按钮可以参照这个链接https://blog.csdn.net/u012233776/article/details/53305846 多个按钮时, html中其中想操作这个按钮开启与关闭 < ...
- javascript 标签轮播
html <div id="banner-switch"> <!-- 切换内容 --> <div class="notice-content ...
- svn的应用
SVN 如何来进行多人协作开发? 在实际工作中,通常是一个小组或者一个团队一起开发同一个项目,不同的人开发不同的功能模块,有一个公共的地方存放项目代码. 如果多个人同时对同一个文件做了修改,比如按照分 ...
- spring Data Jpa的依赖+配置
spring data jpa 是spring基于的orm框架,jpa规范的基础上封装的一套JPA应用框架 添加的相关依赖: <properties> <spring.version ...