概念

首先,我们了解一下"生命周期"这个词。通俗的来说,生命周期就是一个事务从出生到消失的过程。例如,一个人从出生到去世。在vue中,vue的生命周期是指,从创建vue对象到销毁vue对象的过程。

vue2生命周期:(8个阶段)

  1. beforeCreate(创建前)
  2. created(创建后)
  3. beforeMount(载入前)
  4. mounted(载入后)
  5. beforeUpdate(更新前)
  6. updated(更新后)
  7. beforeDestroy(销毁前)
  8. destroyed(销毁后)

Vue第一次页面加载会触发beforeCreate created beforeMount mounted四个钩子函数,DOM渲染在mounted这个周期就已经完成

<template>
<div>
<h2>{{title}}</h2>
<ul>
<h3>{{num}}</h3>
<button @click="num++">+</button>
</ul>
</div>
</template> <script> export default {
data() {
return {
title: "Hello Vue!",
num:0
};
}, methods:{
show(){
console.log('我是show方法');
}, },
beforeCreate() {
console.log("-------beforeCreate--------");
/*
beforeCreate钩子函数在组件创建之前被调用,该函数被调用的时候,props,data,mehtods都没有被创建
该组件的用处不是很大,但地位很高。
*/
console.log("data", this.msg);
//console.log('props',this.title);
//this.show();
},
created(){
console.log("-------created--------");
/*
created钩子函数是在init Injections&Activitys之后被调用,此时已经完成props,data,methods的创建,所以在此处
调用这些方法或方法
模板或者DOM还没有被创建
此钩子函数重要的用途是用来向服务端获取网络请求数据
在此钩子函数之后的钩子中也能完成网络请求,但是一般都是在这里完成最佳
*/ this.show(); },
beforeMount(){
console.log('-------beforeMount--------');
/*
该钩子函数之前的环节主要工作是将数据读取后填充到模板上,之后有读到内存中暂时存储
*/
console.log('dom',document.querySelector('h2'));
},
mounted(){
console.log('-------mounted--------');
console.log('dom',document.querySelector('h2'));
},
beforeUpdate(){
console.log('---------beforeUpdate-----------');
/*
beforeUpdate钩子函数中的特征
数据已经变了
但是页面还没来得及渲染
数据是新的,而页面是旧的
*/
console.log('data',this.num);
console.log('dom',document.querySelector('h3').innerHTML);
},
updated(){
console.log('---------updated-----------');
console.log('data',this.num);
console.log('dom',document.querySelector('h3').innerHTML);
},
beforeDestroy(){
console.log('-----------beforeDestroy--------------');
/*
此处是准备在销毁之前调用的钩子
此处特征,数据props,data,methods都可以访问,但是DOM已经被移除了
*/
console.log('data',this.num);
// console.log('dom',document.querySelector('h3').innerHTML);
},
destroyed(){
console.log('-----------destroyed--------------');
console.log('data',this.num);
}
};
</script> <style>
</style>

生命周期图示:

vue3生命周期:

  1. setup() : 开始创建组件之前,在 beforeCreate 和 created 之前执行,创建的是 data 和 method
  2. onBeforeMount() : 组件挂载到节点上之前执行的函数;
  3. onMounted() : 组件挂载完成后执行的函数;
  4. onBeforeUpdate(): 组件更新之前执行的函数;
  5. onUpdated(): 组件更新完成之后执行的函数;
  6. onBeforeUnmount(): 组件卸载之前执行的函数;
  7. onUnmounted(): 组件卸载完成后执行的函数;
  8. onActivated(): 被包含在 <keep-alive> 中的组件,会多出两个生命周期钩子函数,被激活时执行;
  9. onDeactivated(): 比如从 A 组件,切换到 B 组件,A 组件消失时执行;
  10. onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。
<script>
import {
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted,
ref
} from 'vue' export default {
setup () {
// 其他的生命周期
onBeforeMount (() => {
console.log("App ===> 相当于 vue2.x 中 beforeMount")
})
onMounted (() => {
console.log("App ===> 相当于 vue2.x 中 mounted")
}) // 注意,onBeforeUpdate 和 onUpdated 里面不要修改值
onBeforeUpdate (() => {
console.log("App ===> 相当于 vue2.x 中 beforeUpdate")
}) onUpdated (() => {
console.log("App ===> 相当于 vue2.x 中 updated")
}) onBeforeUnmount (() => {
console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
}) onUnmounted (() => {
console.log("App ===> 相当于 vue2.x 中 destroyed")
}) return {
} }
}
</script>

vue2和vue3 区别

1,vue2和vue3双向数据绑定原理发生了改变

vue2的双向数据绑定是利用ES5的一个APIObject.definePropert() 对数据进行劫持,结合发布订阅模式的方式来实现的。

vue3中使用了ES6Proxy API对数据代理。

相比vue2.x,使用proxy的优势如下:

  • defineProperty只能监听某个属性,不能对全对象监听
  • 可以省去for in,闭包等内容来提升效率(直接绑定整个对象即可)
  • 可以监听数组,不用再去单独的对数组做特异性操作vue3.x可以检测到数组内部数据的变化。
2, vue2和vue3定义数据变量和方法的改变

vue2中定义数据变量是data(){},创建的方法要在methods:{}中。

而在vue3中直接在setup(){}中,在这里面定义的变量和方法因为最终要在模板中使用,所以最后都得 return

如:

<script lang="ts">
import { defineComponent, ref } from 'vue'; export default defineComponent({
name: 'App',
setup() {
//使用ref,说明这个数组就是全局在面板中可以使用了
const girls = ref(['美女1','美女2','美女3'])
const selectGirl = ref('2')
//设置一个函数
const selectGirlFun = (index: number) => {
//改变selectGirl的值要加value
//要得到值要加value ,这些都因为使用了ref函数
selectGirl.value = girls.value[index]
}
//在标签中使用的变量要使用return
//为什么要使用return,因为有的不需要在标签中使用的就不用return
return{
girls,
selectGirl,
selectGirlFun
}
},
});
</script>
3,vue2和vue3生命周期钩子函数的不同
  • vue2中的生命周期

    • beforeCreate 组件创建之前
    • created 组件创建之后
    • beforeMount 组价挂载到页面之前执行
    • mounted 组件挂载到页面之后执行
    • beforeUpdate 组件更新之前
    • updated 组件更新之后
  • vue3中的生命周期

    • setup 开始创建组件

    • onBeforeMount 组价挂载到页面之前执行

    • onMounted 组件挂载到页面之后执行

    • onBeforeUpdate 组件更新之前

    • onUpdated 组件更新之后

      而且Vue3.x 生命周期在调用前需要先进行引入。

      如:

import {
reactive,
toRefs,
onMounted,
onBeforeMount,
onBeforeUpdate,
onUpdated,
} from "vue";
  • 来一个总的生命周期对比,这样更便于记忆
Vue2--------------vue3
beforeCreate -> setup()
created -> setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
activated -> onActivated
deactivated -> onDeactivated
errorCaptured -> onErrorCaptured

除了这些钩子函数外,Vue3.x还增加了onRenderTracked 和onRenderTriggered函数。

4,vue3中新加入了TypeScript和PWA的支持

 

vue2和vue3生命周期的区别的更多相关文章

  1. Vue2.0关于生命周期和钩子函数

    Vue生命周期简介:   Vue1.0+和Vue2.0在生命周期钩子上的区别还是很大的,如下:   代码验证: <!DOCTYPE html> <html> <head& ...

  2. 一起学习vue源码 - Vue2.x的生命周期(初始化阶段)

    作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...

  3. 你还不知道Vue的生命周期吗?带你从Vue源码了解Vue2.x的生命周期(初始化阶段)

    作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...

  4. Vue2.0 探索之路——生命周期和钩子函数的一些理解

    前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什 ...

  5. vue的生命周期(又称钩子函数)----以及vue1.0版本与vue2.0版本生命周期的不同

    vue生命周期 1. vue1.0版本与vue2.0版本生命周期的不同 vue1.0版本生命周期图示 图1  vue1.0版本生命周期 vue1.0版本的生命周期: init 实例创建之前 creat ...

  6. Vue2.0 探索之路——生命周期和钩子函数的一些理解 - JS那些事儿

    在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什么,这 ...

  7. vue2.0 之 生命周期

     一.vue1.x与vue2.x生命周期的变化区别及含义表(图表摘自网络)   二.vue2.x生命周期图和各阶段具体含义 beforecreated:el 和 data 并未初始化 created: ...

  8. 面试之jsp、Servlet相关知识——生命周期, 区别等

    1.servlet生命周期 所谓生命周期,指的是servlet容器如何创建servlet实例.分配其资源.调用其方法.并销毁其实例的整个过程. 阶段一: 实例化(就是创建servlet对象,调用构造器 ...

  9. Asp.Net Core中服务的生命周期选项区别和用法

    在做一个小的Demo中,在一个界面上两次调用视图组件,并且在视图组件中都调用了数据库查询,结果发现,一直报错,将两个视图组件的调用分离,单独进行,却又是正常的,寻找一番,发现是配置依赖注入服务时,对于 ...

  10. vue2.0的生命周期

    生命周期先上图 什么是生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程, 我们称这是Vue的生命周期.通俗说就是Vue实 ...

随机推荐

  1. nginx正向代理,反向代理,透明代理(总结)

    1正向代理 正向代理,也就是传说中的代理,他的工作原理就像一个跳板, 简单的说, 我是一个用户,我访问不了某网站,但是我能访问一个代理服务器 这个代理服务器呢,他能访问那个我不能访问的网站 于是我先连 ...

  2. mac下 ssh免密码登陆设置

    由于mac os 是基于unix的操作系统终端和linux非常类似,所以不用借助类似于windows下的putty 和CRT工具即可远程登陆linux服务器,只需简单地3步即可免密码ssh远程. 1 ...

  3. activiti 任务节点 处理人设置【转】

    转自http://blog.csdn.net/qq_30739519/article/details/51225067 1.1.1. 前言 分享牛原创(尊重原创 转载对的时候第一行请注明,转载出处来自 ...

  4. [转载]MySQL5.6 PERFORMANCE_SCHEMA 说明

    背景: MySQL 5.5开始新增一个数据库:PERFORMANCE_SCHEMA,主要用于收集数据库服务器性能参数.并且库里表的存储引擎均为PERFORMANCE_SCHEMA,而用户是不能创建存储 ...

  5. html案例详解(一)

    一.入门. <html> <!-- 头信息的作用 1. 可以设置网页的标题. 2. 可以通知浏览使用指定的码表解释html页面. 3. --> <head> < ...

  6. js获取元素属性值为空的原因和解决办法

    问题描述:js获取某元素的属性值为空 代码: <!-- css定义在head中 --> <style> #box{ width: 100px; height: 100px; b ...

  7. HTML5-Input

    HTML5拥有多个新的表单输入类型,这些新特性提供了更好的输入控制和验证(有的浏览器不支持) color.date.datetime.datetime-local.email.month.number ...

  8. php项目执行composer install时报错

    报错信息: Loading composer repositories with package informationInstalling dependencies (including requi ...

  9. MyEclipse配置Maven插件

    一.工具环境 1.jdk-7u80-windows-x64 2.apache-tomcat-7.0.70 3.apache-maven-3.3.9 4.MyEclipse 10.7 5.windows ...

  10. Python3.x:open()文件操作

    Python3.x:open()文件操作 open/文件操作: #open(路径+文件名,读写模式) #读写模式:r只读,r+读写,w新建(会覆盖原有文件),a追加,b二进制文件.常用模式 f=ope ...