vue2.0和vue3.0的区别

1. 放弃es5的Object.defineProperty，使用ES6原生更快的proxy
2. 优化diff方法

vue2：虚拟的dom是进行全量的对比
vue3：新增了PatchFlag（静态标记），只对比带有PF的节点
3. 静态的提升
vue2：无论元素是否参与更新，每次都会被重新创建然后再进行渲染
vue3：对于不参与更新的元素只做静态的提升，只会被创建一次，在渲染的时候直接复用即可

4. API

vue2的组件内部都是options api风格，也就是在data, methods, mounted等来组织代码，这样会让逻辑很分散，每次变动需要反复查找位置。
vue3中使用setup，逻辑都放到里边，Composition API。

5. 碎片化节点的优化

vue2中，template下只允许存在一个根节点
vue3中可以有多个跟结点，为我们创建一个虚拟的Fragment节点。

6. 更好的ts支持
7. ssr渲染
8. 生命周期的变化

初始化加载顺序：
setup => beforeCreate => created => onBeforeMount => onMounted

Vue2.0	Vue3.0
beforeCreate	setup
created	setup
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted
activated	onActivated
deactivated	onDeactivated
error	onUnmounted
activated	onActivated

9. 路由跳转，获取路由参数

路由跳转：

vue2：this.$router 来进行路由的跳转
vue3：使用 vue-router 提供的 useRouter 方法，来进行路由跳转

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()
function handleRouter() {
  router.push({
    path: '/a',
    query: {
      msg: 'hello vue3!'
    }
  })
}
</script>

获取路由参数

vue2：this.$route 来进行路由的参数获取
vue3：使用 vue-router 提供的 useRoute 方法，来获取参数

<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()
console.log(route.query.msg)
</script>

10. 父子组件数据传递

父组件数据传递到子组件方式相同，通过属性传递数据

子组件接受数据的方式：

vue3 需要使用defineProps来声明props

子组件传递到父组件：

vue2 需要使用$emit来传递数据
vue3 需要使用defineEmits来声明传递的数据

<script setup>
const emit = defineEmits(['dataName'])
function onClick() {
  emit('dataName', '这里是传递的数据')
}
</script>

<template>
  <button @click="onClick">点击</button>
</template>

注意：defineProps 、defineEmits 、 defineExpose 和 withDefaults 这四个宏函数只能在