今天的码农女孩做了关于vue2、3的区别的笔记

生命周期

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,更快，更小，更易维护，更易于原生