Vue2和Vue3的区别

 1. 响应式不同

vue2	vue2中使用的是 ES5 的 object.definepropert() 中的 setter 和 getter 方法对数据进行劫持监听，结合发布订阅模式来实现的
vue3	vue3中使用的是 ES6 的 Proxy 来实现劫持监听

     

    object.definepropert 和 Proxy 的区别

    (1). definepropert只能监听某个属性，不能对全对象进行监听

    (2). 可以省去for in，闭包等内容来提升效率

    (3). 可以监听数组，不用再去单独的对数组做特异性操作vue3可以检测到数组内部数据的变                   化。

2. 节点不同

vue2	就是在组件中只能有一个根节点（template标签），不能支持多个templa标签
vue3	支持多个根节点

3. API类型不同

        

vue2	vue2使用的是选项型API，选项型API使用选项 (如：data，methods等) 来进行分割代码
vue3	vue3使用的是组合式API，组合型API可以使用定义数据变量和方法来进行分割代码

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

        

vue2	vue2中我们要想定义一个变量要将变量放在data中，方法放在methods中
vue3	vue3我们要想定义一个变量或者方法，使用setup语法糖或者setup()来定义方法或变量

// vue2

<script>
    // 定义变量
    data(){
        return {
            username:'张三'
        }
    },

    // 定义方法
    method:{
        getUserName(){
            console.log(this.username) // 张三
        }
    }

</script>


// vue3

<script setup>

const username = '张三'
const getUsername= () => {
    console.log(username)
}

</script>

         

5. 父子传参不同

        

vue2	父传子使用 props ，子传父使用 this.$emit()
vue3	父传子使用 defineProps，子传父使用 defineEmits

6.生命周期钩子不同

        

生命周期	vue2	vue3
创建组件前	beforeCreate	setup
创建组件后	created	setup
组件挂载前	beforeMount	onBeforeMount
组件挂载后	mounted	onMounted
组件更新前	beforeUpdate	onBeforeUpdate
组件更新后	updated	onUpdated
组件销毁前	beforeDestroy	onBeforeUnmount
组件销毁后	destroyed	onUnmounted

7. 指令和插槽不同

            

vue2	solt插槽可以当做标签来使用，v-for和v-if不可以一起使用，容易发生冲突
vue3	插槽必须使用v-solt形式使用，v-for和v-if之间不会有冲突，v-for会把v-if当做一个判断条件，不会发生冲突

当然还有很多不同点，以上都是常见的不同点，如果有知道的小伙伴可以在下方进行评论！！！