vue2与vue3的区别

1.生命周期不同

vue2	vue3
beforeCreate
Created
beforeMount	onbBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroyed	onBeforeUnmount
destroyed	onUnmounted

主要是去掉了两个create相关周期，vue2的create和mount在使用时确实有不小重合

2.Composition API

vue2使用选项类型api

<script>
export default {
  name: "WidgetSelect",
  props: {},
  data() {
    return {};
  },
  methods: {},
  mounted(){}
  ...
}
</script>

vue3使用合成型api

<script setup lang="ts"> //有其他写法,这里仅展示本人习惯写法
import { reactive, ref, onMounted } from 'vue';

const queryParams = ref({} as any);

function getList() {}

onMounted(() => {
	getList()
});
</script>

其实我觉得vue2按属性划分api更清晰（小声BB），不过代码更多
另一点是vue3这种写法对函数的顺序有了要求，被调用的函数必须写在上面

3.双向绑定原理不同

vue2使用es5的Object.definepropert() 对数据进行劫持，结合发布订阅模式来实现。
vue3中使用es6的proxyAPI对数据进行处理。
proxyAPI的优点在于:
1.效率提升
2.可以监听整体对象
3.可以监听数组（我在vue2监听踩的第一个坑）

4.数据传递方式

vue3的写法发生了改变，在此列举常用的props和emit

<script setup lang="ts"> 
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  id: null,
});

const emit = defineEmits(['close']);

function api(){
	//props调用
	props.id;
	//emit调用('方法名',参数)
	emit('close',true)
}
</script>

5.想到再补充

vue3已经变成默认版本了，还是得学