vue2和vue3的区别？

vue2是选项类型api（option）：定义methods，computed，watch，data属性方法共同处理页面的逻辑；vue3是合成类型的api（composition）：vue3整合了data，methods一些属性用setup代替，代码更加简便整洁。setup函数是处于生命周期beforeCreated和created俩个钩子函数之前。

vue2

<script>
export default {
    // 存放数据
    data(){
      return {},
    },
    // 方法 例如：点击事件
    methods:{
    
    }，
    // 页面加载时执行
    created(){
    
    }
}
</script>

vue3

<script>
export default{
    // 数据和方法都存放在这里
    setup(){
    
    }
}

vue2的双向数据绑定是利用es5的一个api  object.definedPropert().对数据进行劫持，结合 发布订阅模式的方式来实现的。

vue3 中使用了es6的 ProxyAPI 对数据代理。（Proxy对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义）使⽤ref或者reactive将数据转化为响应式数据。

路由的传参：vue2是 this.$router.push({}) ; vue3是导入 import { useRouter } from “vue-rouer”  接收参数的时候也是 this.$route ;而 setup 是里面写一个函数  cosnt router = useRouter  声明，接收router.push({ }), 接收也要声明 cosnt route = useRoute。vue2里面一般都是用this；vue3里面是没有this。

生命周期:

vue2

beforeCreate():      组件创建之前

create():                 组件创建完成

beforeMount():       组件挂载之前

mounted()：           组件挂载完成

beforeUpdate():      数据更新之前

updated():               数据更新完成

beforeDestroy():     组件销毁之前

destroyed():            组件销毁之后

vue3

setup():                   创建组件之前,beforeCreate和created之前执行

onBeforeMount():    组件挂载之前

onMounted()：        组件挂载完成

onBeforeUpdate():   数据更新之前

onUpdated():            数据更新完成

onBeforeDestroy():  组件销毁之前

onBestroyed():         组件销毁之后