Vue2\3有什么区别-Vue前端框架学习-基础-CSDN博客

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">Count is: {{ count }}></button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

API风格

Vue组件可以按照两种不同风格书写：选项式API 和组合式API

选项式：Vue2中用包含多个选项的对象来描述组件的逻辑，例如 data、methods等，这些属性都会暴露在函数内部的 this 上，这是隐式的（自动将选项内容挂载到当前组件实例的 this 上）（在Vue3的组合式API中要求显式 return 暴露内容

<script>
export default {
  // data() 返回的属性将会成为响应式的状态
  // 并且暴露在 `this` 上
  data() {
    return {
      count: 0
    }
  },

  // methods 是一些用来更改状态与触发更新的函数
  // 它们可以在模板中作为事件处理器绑定
  methods: {
    increment() {
      this.count++
    }
  },

  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
  // 例如这个函数就会在组件挂载完成后被调用
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

组合式：使用导入的 API 函数来描述组件逻辑，在但文件组件中，组合式 API 通常和 <script setup> 搭配使用，这个 setup 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API ，比如， <script setup> 中导入和顶层变量/函数都可以在模版中直接使用

<script setup>
import { ref, onMounted } from 'vue'

// 响应式状态
const count = ref(0)

// 用来修改状态、触发更新的函数
function increment() {
  count.value++
}

// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

Vue3和Vue2有什么区别

核心架构与性能

响应式系统:（响应式系统是 Vue 框架的核心特性之一，它能够自动追踪 JavaScript 状态变化并在变化发生时更新相关的 DOM。简单来说，它建立了数据与视图之间的自动同步机制，当数据变化时，视图会自动更新，无需手动操作 DOM，Vue能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM操作）
- Vue2 基于 Object.defineProperty，通过 data 选项定义响应式数据
- Vue3 使用 Proxy，提供更全面的响应式能力和更好的性能，通过 setup 函数和 Composition

（setup 是 Vue3中 Composition API（组合式API）的入口，它是组件内的一个特殊函数，在组件实例创建时，在初始 prop 解析后立即执行）

（Composition API 是 Vue3 引入的新的组织组件逻辑的方式，主要概念如下：

响应式系统：
- ref：创建一个响应式的基本类型值，通过.value访问和修改
- reactive：创建一个响应式的对象或数组
生命周期钩子：
- onMounted、onUpdated、onUnmounted等，用于在相应的生命周期阶段执行代码
计算属性和监听器：
- computed：创建一个计算属性
- watch/watchEffect：监听响应式数据的变化）

性能优化:
- Vue3 打包体积更小（减少约40%）
- 更优的内存占用和渲染速度
- 改进的静态树提升和事件缓存

Vue2只能有一个应用实例，而Vue3可以有多个应用实例

API 设计（Application Programming Interface）

组合式 API:
- Vue3 引入了组合式 API (Composition API)，解决了选项式 API 在大型应用中的代码组织问题（ Vue2 的话得在2.7版本以后才能用组合式API ）
- 更好的逻辑复用和代码组织能力
全局 API 改变:
- Vue2: 直接修改全局 Vue 对象
- Vue3: 使用 createApp() 创建应用实例，避免全局污染

语法与功能增强

Vue实例创建方式

- Vue 2: `const app = new Vue({ el: '#app', ... })`
- Vue 3 用 .mount( ) 方式: `const app = Vue.createApp({ ... }).mount('#app')`

生命周期钩子
- 与传统Vue2钩子不同，setup内不能使用 this 访问组件实例
- Vue2 中用 created() 作为选项，Vue3 中 onMounted() 在 setup() 里面使用
- Vue3 重命名了部分钩子（如 beforeDestroy → beforeUnmount）
- 组合式 API 中使用新的生命周期函数