Vue 3 最基础核心知识详解

 

  Vue3作为现代前端主流框架，是前后端开发者都应当掌握的核心技能。本篇文章将带你了解vue3的基础核心知识，适合学习与复习

一、Vue 3 应用创建

1.1 创建Vue应用的基本步骤

// main.js
import { createApp } from 'vue'  // 1. 导入createApp函数
import App from './App.vue'     // 2. 导入根组件

const app = createApp(App)      // 3. 创建应用实例
app.mount('#app')               // 4. 挂载到DOM元素

详细说明：

• createApp 是Vue 3新引入的函数，替代了Vue 2的new Vue()

• 每个Vue应用都是通过createApp函数创建的

• mount()方法将Vue应用挂载到指定的DOM元素上（通常是index.html中的

  ）

二、模板语法详解

2.1 文本插值

要点：

• 双大括号{{ }}称为"Mustache"语法

• 内部可以写简单的JavaScript表达式

• 不支持语句或复杂逻辑（应该使用计算属性）

2.2 常用指令

v-if / v-else / v-else-if

优秀
及格
不及格

注意事项：

• 条件渲染会真正创建/销毁元素

• 频繁切换时考虑使用v-show

v-for

  

    {{ index }} - {{ item.name }}
  

最佳实践：

• 必须为每个项提供唯一的:key

• 可以使用对象解构：v-for="{ id, name } in users"

v-bind (缩写:)

v-on (缩写@)注册事件

点击

v-model

  选项A

原理： 相当于以下语法糖

三、响应式系统核心

3.1 ref 和 reactive

一：ref 是什么？

在 Vue 3 或者其他采用响应式设计的框架里，ref 是用于创建响应式数据的函数。它会把传入的参数封装成一个对象，这个对象具备 .value 属性，借助这个属性就能访问或修改原始值。

区别对比：

特性	ref	reactive
适用类型	基本类型	对象类型
访问方式	需要.value	直接访问
模板中使用	自动解包	直接使用
重新赋值	支持	不推荐

3.2 响应式原理

Vue 3使用Proxy实现响应式：

• 当数据变化时，自动更新DOM

• 跟踪依赖关系，精确更新

• 性能优于Vue 2的Object.defineProperty

四、计算属性和监听器

4.1 计算属性 (computed)

核心步骤：1导入computed函数

                  2执行函数在回调参数中return基于响应式数据做计算的值，用变量接收

特点：

• 基于它们的响应式依赖进行缓存

• 依赖不变时不会重新计算

• 适合复杂逻辑计算

最佳实践：1计算属性中不应该有副作用，比如异步请求修改dom

                  2避免直接修改计算属性的值

4.2 监听器 (watch)

作用：侦听一个或者多个数据的变化，数据变化时执行回调函数

回调函数：作为参数传递给其他函数的一种函数，其目的是在某个特定事件发生或者完成特定操作之后再执行。

一：监听一个数据的变化

import { ref, watch } from 'vue'

const count = ref(0)

// 当count变化时执行
watch(count, (新值, 旧值) => {
  console.log(`计数器从${旧值}变成了${新值}`)
})

二：监听多个数据的变化 

const count = ref(0)
const name = ref('张三')

// 同时监听count和name
watch([count, name], ([新count, 新name], [旧count, 旧name]) => {
  console.log(`count变化: ${旧count}→${新count}`)
  console.log(`name变化: ${旧name}→${新name}`)
})

三：immediate立即执行

const user = ref(null)

// 页面加载时立即执行一次
watch(user, (新值) => {
  if(新值) {
    console.log('用户数据:', 新值)
  }
}, {
  immediate: true  // 关键配置
})

使用场景：页面初始化时需要立即获取数据 

四： 深度监听（deep）

const formData = ref({
  name: '',
  address: {
    city: '',
    district: ''
  }
})

// 监听对象内部变化
watch(formData, (新值) => {
  console.log('表单变化:', 新值)
}, {
  deep: true  // 监听对象内部属性变化
})

默认watch进行的是浅层监视，监视简单数据类型的数据，使用deep:true后则可以监视复杂数据类型的变化

使用场景：监听复杂对象或嵌套数据

 五： 精确控制监听

watch(
  () => user.value.age,  // 只监听user对象的age属性
  (新年龄) => {
    console.log('年龄变化:', 新年龄)
  }
)

五、组件基础

5.1 组件定义

5.2 组件使用

六、生命周期钩子

Vue 3主要生命周期：

import { onMounted, onUpdated, onUnmounted } from 'vue'

onMounted(() => {
  console.log('组件挂载完成')
  // 适合做DOM操作、API请求等
})

onUpdated(() => {
  console.log('组件更新完成')
})

onUnmounted(() => {
  console.log('组件卸载')
  // 适合做清理工作
})

完整生命周期流程：

1. setup() → 2. onBeforeMount → 3. onMounted → 4. onBeforeUpdate → 5. onUpdated → 6. onBeforeUnmount → 7. onUnmounted

---

记住：Vue 3的学习是一个循序渐进的过程，建议边学边实践，通过小项目巩固知识。

组件定意的详细内容见Vue 3 核心概念详解：生命周期、组件通信与模板引用