生命周期
vue2.0
生命周期的过程分为:创建前,创建后,挂载前,挂载后,更新前,更新后,销毁前,销毁后
beforeCreate:组件刚被创建的时候调用,在此所有变量和函数都未初始化
created:在组件创建完成后调用,此时变量和函数都已初始化完毕
beforeMount:在组件挂载前调用,此时el可以寻找到标签元素
mounted:在组件挂载后前调用,此时可以操作dom元素
beforeUpdate:在组件更新前调用,此时可以拿到新旧的虚拟dom做对比
update:在组件更新后调用,此时也可以操作dom,但是拿的是新的dom值
beforeDestory:在组件销毁前调用,用来解除组件的数据,例如销毁轮播图,变量,函数等
destoryed:在组件销毁后调用,此时组件已被销毁,无法调用组件了
vue3.0的生命周期
1.createApp(App) 实例化一个vue对象,创建应用
2.init Event & Lifecycle 执行一些初始化和生命周期相关操作
3.init injections & reactivity 初始化注入和校验
4.setup 组件创建时调用,属性和函数创建了,dom元素没有
5.has "template" option?判断模块是否存在
6.onBeforeMount 挂载前,属性和函数创建了,el没有挂载
7.create APP.$el and replace el 给vue对象添加el成员,替换挂载的dom元素
8.onMounted 挂载后,属性,函数,el都有数据了
9.onBeforeUpdate更新前,可以拿到更新的新旧数据,没有渲染到页面
10.onUpdate更新后,此时数据已经渲染到页面上,可以做后期处理
11.onBeforeUnmount销毁前,让数据和函数也跟着销毁
12.onUnmount销毁后,此时组件已经销毁,跟着的子组件和数据也都不存在,可以做后续处理
对比:
createAPP(App)
beforecreate,created->setup
beforeMount->onBeforeMount
mounted->onMounted
beforeUpdate->onBeforeUpdate
update->onUpdated
beforeDestory->onBeforeUnmount
destoried->onUnmount
定义方式:
import { reactive } from 'vue'
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated } from 'vue'
setup(){
const data=reactive({
arr:[],
str:"ASFFGH"
});
const selectfun=()=>{console.log(data.str)};
onBeforeMount(function(){
console.log("挂载前")
console.log(data.str)
});
onMounted(function(){
console.log("挂载后")
});
onBeforeUpdate(function(){
console.log("更新前")
});
onUpdated(function(){
console.log("更新后")
});
onBeforeUnmount(function(){
console.log("销毁前")
});
onUnmounted(function(){
console.log("销毁后")
});
},
vue2.0和vue3.0的区别?
1.vue2使用object.defineProperty进行数据劫持,结合发布订阅者模式实现;vue3.0使用ES6的proxy的代理器,用ref或者reactive将数据转化为响应式数据
2.vue2使用选项类型,数据放在data里,函数放在methods里;vue3使用合成型,数据和函数都放在setup里
3.vue2和vue3的生命周期函数不同
4.vue2父组件传给子组件的值,console.log('props',this.变量)获取;vue3 setup(props,context){console.log('props',props)}
5.vue2子组件传给父组件的值,this.$emit()调用父组件;
vue3 setup(props,context){context.$emit()}调用父组件
6.vue3相比vue2,更快,更小,更易维护,更易于原生