Document

vue2和vue3区别

1、v-model原理不同
vue2：vue2的双向数据绑定是利用ES5的一个APIObject.definePropert() 对数据进行劫持，结合发布订阅模式的方式来实现的。
vue3：vue3中使用了ES6的Proxy API对数据代理。相比vue2，使用proxy的优势有：
        defineProperty只能监听某个属性，不能对全对象监听
        可以省去for in，闭包等内容来提升效率(直接绑定整个对象即可)
        可以监听数组，不用再去单独的对数组做特异性操作vue3.x可以检测到数组内部数据的变化。
2、是否支持碎片
        vue2：vue2不支持碎片。就是在template下必须且只能有一个根节点
        vue3：vue3支持碎片（Fragments），就是说可以拥有多个根节点。
3、API类型不同
        vue2：vue2使用选项式api，选项型api在代码里分割了不同的属性：data,computed,methods等。
        vue3：vue3使用组合式api，组合式api能让我们使用方法来分割，相比于旧的api使用属性来分组，这样代码会更加简便和整洁。
4、定义数据变量和方法不同
        vue2：vue2是把数据放入data中，在vue2中定义数据变量是data(){}，创建的方法要在methods:{}中。
        vue3：vue3就需要使用一个新的setup()方法，在组件初始化构造的时候触发。
5、生命周期钩子函数不同
vue2中的生命周期：
        beforeCreate 组件创建之前，created 组件创建之后
        beforeUpdate 组件更新之前，updated 组件更新之后
        销毁前：beforeDestroy, 销毁后：destroyed vue3：vue3中的生命周期：
        setup 开始创建组件
        onBeforeMount 组价挂载到页面之前执行
        onMounted 组件挂载到页面之后执行
        onBeforeUpdate 组件更新之前
        onUpdated 组件更新之后
        onBeforeUnmount：页面销毁之前；onUnmounted：页面销毁之后；而且vue3生命周期在调用前需要先进行引入。除了这些钩子函数外，vue3还增加了onRenderTracked（注册一个调试钩子，当组件渲染过程中追踪到响应式依赖时调用。）和onRenderTriggered函数（注册一个调试钩子，当响应式依赖的变更触发了组件渲染时调用）。
6、父子传参不同
        vue2：父传子，用props接收,子传父使用this.$emit然后传入事件名和参数。
        在vue3中的setup()语法糖里使用defineProps接收父组件传递的参数，子传父使用defineEmits
7、指令与插槽不同
        vue2：vue2中使用slot可以直接使用slot；v-for与v-if在vue2中优先级高的是v-for指令，而且不建议一起使用。
        vue3：vue3中必须使用v-slot的形式；vue3中v-for与v-if, 只会把当前v-if当做v-for中的一个判断语句，不会相互冲突； vue3中移除keyCode作为v-on的修饰符，当然也不支持config.keyCodes； vue3中移除v-on.native修饰符；vue3中移除过滤器filter。
8、main.js文件不同
        vue2：vue2中我们可以使用pototype(原型)的形式去进行操作，引入的是构造函数。
        vue3：vue3中需要使用结构的形式进行操作，引入的是工厂函数；vue3中app组件中可以没有根标签。

追问
1.vue2vue3哪个更方便