笑里藏刀

时间宝贵，三分钟足以

前端面试就像是一场没有硝烟的战场，不是你整懵面试官，就是你被面试官问的云里雾里

知己知彼

面试官问这个问题无非是考察你对Vue2以及Vue3的掌握程度，是否可以同时维护Vue2和Vue3代码

有备无患

Vue.js 1.0 到 Vue2.0引入了虚拟DOM，为Vue.js跨端提供了基础（知识的广度）

Vue.js 2.0已经足以优秀，但是对TypeScript的支持不够完善，以及使用的开发体验还有进一步的提升空间，性能优化方面也有提升空间导致Vue3.0的横空出世。

主要区别：

性能改进：Vue.js 3通过将响应式系统升级到Proxy API来提高性能。这使得响应式追踪更加高效，并提高了性能。Vue.js 3还引入了静态树提升（Static Tree Hoisting）来提高渲染性能。
组合式API：Vue.js 3引入了组合式API，它使得代码更加模块化和可重用，并提供更好的TypeScript支持。
更小的代码体积：Vue.js 3的代码体积比Vue.js 2更小，这使得它更易于使用和部署。
更好的TypeScript支持：Vue.js 3提供了更好的TypeScript支持，包括更好的类型推断和更好的类型定义。

百战不殆

声明组件

Vue2 的方式是使用 Vue.component 方法声明全局组件：

Vue.component('my-component', {   // options })

而在 Vue3 中，你需要使用 Vue.createApp 方法来创建一个应用实例，并使用 .component 方法来声明组件：

const app = Vue.createApp({})

app.component('my-component', {   // options })

数据响应式

Vue2 中，我们需要使用 Vue 实例的 data 选项来声明响应式数据：

new Vue({   data: {     message: 'Hello Vue!'   } })

在 Vue3 中，你需要使用 reactive 方法将一个普通对象转换为响应式对象：

const state = Vue.reactive({   message: 'Hello Vue!' })

计算属性

在 Vue2 中，我们使用 computed 选项来声明计算属性：

new Vue({   
  computed: {     
    fullName() {       
      return this.firstName + ' ' + this.lastName     
    }   
  } 
})

在 Vue3 中，你可以使用 computed 函数来声明计算属性：

const app = Vue.createApp({}) 
app.computed({   
  fullName() {     
    return this.firstName + ' ' + this.lastName   
  } 
})

生命周期钩子函数

在 Vue2 中，我们使用生命周期钩子函数来在组件的不同生命周期阶段执行代码：

Vue.component('my-component', 
              {   
                created() {     // ...   },   
                  mounted() {     // ...   },   
                    // ... 
              })

在 Vue3 中，你需要使用生命周期钩子函数作为组件选项的属性：

const app = Vue.createApp({   
    created() {     // ...   },  
    mounted() {     // ...   },   
  // ... })

模板语法

在 Vue2 中，我们使用 mustache 语法来渲染变量或表达式：

  <div>{{ message }}</div>

在 Vue3 中，你可以使用单花括号来代替双花括号来渲染变量或表达式：

<div>{ message }</div>

组件传值

在 Vue2 中，我们使用 props 来从父组件向子组件传递数据：

Vue.component('child-component', {   props: ['message'] })

在 Vue3 中，你需要使用 props 选项来声明子组件接收的属性，并使用 emit 方法来触发自定义事件从子组件向父组件传递数据：

const ChildComponent = {   
  props: ['message'],  
  methods: {     
    handleClick() {       
      this.$emit('update:message', 'new message')    
    }   
  } 
}

这些是 Vue2 和 Vue3 的一些基本区别，当然还有更多的细节和用法上的变化，需要根据具体情况进行了解和学习。

声东击西

听说点赞这篇文章的人都长命百岁，财富自由了！

3分钟前端面试三十六计之Vue2与Vue3区别

笑里藏刀

知己知彼

有备无患

百战不殆

声东击西