博客空间

外观

Vue3、Vue2

约 1767 字大约 6 分钟

Vue

2025-11-01

本文详细解释Vue2、Vue3二个版本的区别

1.API 风格：选项式 vs 组合式

总结 选项方和组合式的区别

对比维度Vue2 选项式 APIVue3 组合式 API（setup 函数 / setup 语法糖）
代码组织方式按选项类型组织：data、methods、computed、watch 等分散在不同选项中按逻辑功能组织：相关变量、函数、计算属性和监听器集中在一起
访问响应式数据通过 this 访问 data、methods 等成员使用 ref 和 reactive 创建响应式数据，通过 .value 访问 ref 值（在 JS 中）
模板中使用变量直接使用 data 中定义的属性，无需 .value模板中使用 ref 时自动解包，无需 .value
入口函数组件选项对象本身（如 export default { ... }）setup() 函数作为组件的入口，或使用 setup 语法糖自动执行
语法糖支持不支持 setup支持 setup语法糖，省去 setup() 函数和 return，更简洁
this 指向在 methods、computed 中可使用 this 指向组件实例例 setup() 中没有 this，完全基于函数式编程思想
代码拆分灵活性难以将同一功能的逻辑拆分到多个文件可轻松将逻辑提取为独立的组合函数（composables）并跨组件复用

Vue2：选项式 API

  • 逻辑按类型组织：data、methods、computed、watch分散在不同区域
<!-- Vue 2 -->
<template>
  <div>
    <h2>计数器: {{ count }}</h2>
    <p>双倍值: {{ doubleCount }}</p>
    <button @click="increment">+1</button>

    <input v-model="search" placeholder="搜索用户" />
    <ul>
      <li v-for="user in filteredUsers" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        count: 0,
        search: '',
        users: [
          { id: 1, name: 'Alice' },
          { id: 2, name: 'Bob' },
          { id: 3, name: 'Charlie' }
        ]
      }
    },
    methods: {
      increment() {
        this.count++
      }
    },
    computed: {
      doubleCount() {
        return this.count * 2
      },
      filteredUsers() {
        return this.users.filter(u =>
            u.name.toLowerCase().includes(this.search.toLowerCase())
        )
      }
    },
    watch: {
      count(newVal) {
        console.log('count changed:', newVal)
      }
    }
  }
</script>

Vue3：组合式 API

  • 逻辑按功能组织，复用性更强，适合大型项目

写法一：使用 setup() 函数

<!-- Vue 3 - 标准 setup -->
<template>
  <div>
    <h2>计数器: {{ count }}</h2>
    <p>双倍值: {{ doubleCount }}</p>
    <button @click="increment">+1</button>

    <input v-model="search" placeholder="搜索用户" />
    <ul>
      <li v-for="user in filteredUsers" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, computed, watch } from 'vue'

export default {
  setup() {
    // 计数逻辑
    const count = ref(0)
    const doubleCount = computed(() => count.value * 2)
    const increment = () => {
      count.value++
    }

    // 搜索逻辑
    const search = ref('')
    const users = ref([
      { id: 1, name: 'Alice' },
      { id: 2, name: 'Bob' },
      { id: 3, name: 'Charlie' }
    ])
    const filteredUsers = computed(() => {
      return users.value.filter(u =>
        u.name.toLowerCase().includes(search.value.toLowerCase())
      )
    })

    // 监听
    watch(count, (newVal) => {
      console.log('count changed:', newVal)
    })

    // 返回给模板使用的变量和方法
    return {
      count,
      doubleCount,
      increment,
      search,
      filteredUsers
    }
  }
}
</script>

写法二：使用 setup(语法糖)

<!-- Vue 3 - 使用 <script setup>（顶级语法糖） -->
<script setup>
import { ref, computed, watch } from 'vue'

// 计数逻辑
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
const increment = () => count.value++

// 搜索逻辑
const search = ref('')
const users = ref([
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
])
const filteredUsers = computed(() => {
  return users.value.filter(u =>
    u.name.toLowerCase().includes(search.value.toLowerCase())
  )
})

// 监听
watch(count, (newVal) => {
  console.log('count changed:', newVal)
})
</script>

<template>
  <div>
    <h2>计数器: {{ count }}</h2>
    <p>双倍值: {{ doubleCount }}</p>
    <button @click="increment">+1</button>

    <input v-model="search" placeholder="搜索用户" />
    <ul>
      <li v-for="user in filteredUsers" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>

2.应用初始化方式不同

Vue2全局构造函数

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')

Vue3全局构造函数

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

3.初始化生命周期

Vue 2 生命周期钩子

钩子执行时机是否常用
beforeCreate实例初始化后，数据观测和事件配置之前❌ 少用
created实例创建完成，数据已响应式，但 DOM 未挂载✅ 常用于请求数据
beforeMount模板编译完成，即将挂载到 DOM❌ 较少使用
mounted组件已挂载到 DOM，可操作真实 DOM✅ 最常用之一
beforeUpdate数据更新时，虚拟 DOM 重新渲染前✅ 可用于调试
updated虚拟 DOM 重新渲染并应用到 DOM 后✅ 注意避免无限循环
beforeDestroy组件销毁前，仍可访问实例✅ 清理定时器、事件监听等
destroyed组件已销毁，所有绑定解除，子实例也被销毁✅ 常用

Vue 2 完整生命周期演示

<!-- Vue 2 -->
<template>
  <div id="app">
    <h2 v-if="show">当前计数：{{ count }}</h2>
    <button @click="count++">+1</button>
    <button @click="show = false">销毁组件</button>
  </div>
</template>

<script>
export default {
  name: 'App',

  data() {
    return {
      count: 0,
      show: true,
      timer: null
    }
  },

  beforeCreate() {
    console.log('🚀 beforeCreate: 实例还未初始化')
    // 此时 this.$el 不存在，data 未代理
  },

  created() {
    console.log('✅ created: 实例创建完成', this.count)
    // 可以发起网络请求
    this.timer = setInterval(() => {
      console.log('定时器运行中...')
    }, 1000)
  },

  beforeMount() {
    console.log('📦 beforeMount: 模板编译完成，DOM 未挂载')
  },

  mounted() {
    console.log('🎉 mounted: 组件已挂载到页面', this.$el)
    // 可操作 DOM
  },

  beforeUpdate() {
    console.log('🔄 beforeUpdate: 数据变化，视图更新前')
  },

  updated() {
    console.log('📈 updated: 视图已更新')
  },

  beforeDestroy() {
    console.log('🧹 beforeDestroy: 组件即将销毁')
    // 必须手动清除副作用
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  },

  destroyed() {
    console.log('💀 destroyed: 组件已完全销毁')
  }
}
</script>

Vue3 生命周期钩子

钩子执行时机是否常用
setup组件创建前，替代 beforeCreate 和 created，是 Composition API 的入口✅ 必用，用于初始化数据和逻辑
onBeforeMount模板编译完成，即将挂载到 DOM❌ 较少使用，但可用于调试
onMounted组件已挂载到 DOM，可安全操作真实 DOM✅ 最常用之一，常用于请求数据、绑定事件、初始化第三方库
onBeforeUpdate数据更新时，虚拟 DOM 重新渲染前✅ 可用于调试或获取更新前的 DOM 状态
onUpdated虚拟 DOM 重新渲染并应用到 DOM 后✅ 注意避免在其中修改数据导致无限循环
onBeforeUnmount组件销毁前，实例仍可用，可清理副作用（如定时器、事件监听✅ 常用于资源清理，防止内存泄漏
onUnmounted组件已完全卸载，所有绑定解除，子实例也被销毁✅ 常用于确认销毁逻辑或日志记录

Vue3 生命周期示例代码

<!-- Vue 3 - 使用 <script setup> -->
<script setup>
import {
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from 'vue'

const count = ref(0)
const show = ref(true)
let timer = null

// 模拟副作用：定时器
timer = setInterval(() => {
  console.log('[Timer] 运行中...')
}, 1000)

// === 生命周期钩子 ===

console.log('🚀 setup: 组件开始初始化')

onBeforeMount(() => {
  console.log('📦 onBeforeMount: 即将挂载')
})

onMounted(() => {
  console.log('🎉 onMounted: 组件已挂载', document.getElementById('app'))
})

onBeforeUpdate(() => {
  console.log('🔄 onBeforeUpdate: 视图更新前')
})

onUpdated(() => {
  console.log('📈 onUpdated: 视图已更新')
})

onBeforeUnmount(() => {
  console.log('🧹 onBeforeUnmount: 组件即将卸载')
  // 清理副作用
  if (timer) {
    clearInterval(timer)
    timer = null
    console.log('✅ 定时器已清除')
  }
})

onUnmounted(() => {
  console.log('💀 onUnmounted: 组件已完全卸载')
})
</script>

<template>
  <div id="app">
    <h2 v-if="show">当前计数：{{ count }}</h2>
    <button @click="count++">+1</button>
    <button @click="show = false">销毁组件</button>
  </div>
</template>

vue2 和 vue3 的初始化总结

功能Vue 2Vue 3区别说明
初始化前beforeCreatesetup() 开始处setup() 替代了 beforeCreate 和 created
初始化后createdsetup() 结束前Vue 3 推荐在 setup() 中统一处理初始化逻辑
挂载前beforeMountonBeforeMount()名称一致，但 Vue 3 需导入使用
挂载后mountedonMounted()用法相同，功能不变
更新前beforeUpdateonBeforeUpdate()无本质变化
更新后updatedonUpdated()注意避免在其中修改响应式数据
销毁前beforeDestroyonBeforeUnmount()命名变更，语义更准确（“卸载”而非“销毁”）
销毁后destroyedonUnmounted()同上，名称更规范

版权归属：念宇

许可证：署名-非商业性-禁止演绎 4.0 国际 (CC-BY-NC-ND-4.0)