vue3和vue2的区别

1，数据双向绑定原理不同

        1，vue2是采用es5的一个API object.defineProperty 对数据进行劫持，结合发布订阅者模式来实现

        2，vue3是采用es6的proxy API对于数据处理，相比于vue2它的优势在于：

        definePropety只能监听某个属性，不能对全对象监听

        可以省去for..in的循环，闭包等内容来提升效率

        可以监听数组，不再单独对数组做特定的操作，vue3可以监听到数组内部数据变化

2，是否支持碎片

        1，vue2不支持碎片化

        2，vue3支持碎片（Fragments），可以拥有多个节点

3，API不同

        vue2采用的是option API(选项类型api)，里面包含了多个属性（data,mounted,computed...）

        vue3采用的是Composition API(组合式api)，提高代码逻辑的可复用性，是代码更加简洁

4，定义数据变量和方法不同

        vue2是把数据放到data里面，创建方法要在methods中

        vue3使用了setUp（），在组件初始化的时候触发，使用以下三个步骤来建立反应性数据：

                从vue引入reactive；

                使用reactive（）方法来声明数据为响应性数据；

                使用setUp（）来返回我们的响应性数据，从而template可以获取这些响应性数据

5，生命周期钩子函数不同

        vue2的生命周期：

                beforeCreate（）组件创建之前，created（）组件创建之后

                beforeMount（）组件挂载到页面之前 ， mounted（）组件挂载页面之后

                beforeUpdate（）组件更新之前， updated（）组件更新之后

        vue3的生命周期：

                setup（）开始创建组件之前，

                onbeforeMount（）组件挂载页面之前， onMounted（）组件挂载页面之后

                onBeforeUpdate（）组件更新之前， onUpdate（）组件更新之后

        而且vue3生命周期在调用前需要先进行引入，出这些钩子函数外，vue3还提供了两个函数：

                onRenderTracked（）（它会跟踪页面上所有响应式变量和方法的状态）                    onRenderTriggered（）（它不会跟踪每一个值，而是给你变化值的信息）

6，父子传参不同

        vue2父传子props，子传父$emit,会调用this.$emit传入的事件名

        vue3父传子props，子传父$emit,vue3中setup（）函数中的第二个参数content对象就有$emit

7，指令与插槽不同

        vue2中可以直接使用slot，v-for和v-if优先级v-for高，两者尽量不同时使用

        vue3中必须使用v-slot的形式，v-for和v-if优先级v-if高，两者不冲突