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中的<div id="app"></div>）

二、模板语法详解

2.1 文本插值

<template><p>{{ message }}</p>  <!-- 双大括号语法 -->
</template><script setup>
const message = 'Hello Vue 3!'
</script>

要点：

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

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

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

2.2 常用指令

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

<div v-if="score >= 90">优秀</div>
<div v-else-if="score >= 60">及格</div>
<div v-else>不及格</div>

注意事项：

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

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

v-for

<ul><li v-for="(item, index) in items" :key="item.id">{{ index }} - {{ item.name }}</li>
</ul>

最佳实践：

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

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

v-bind (缩写:)

<img :src="imageUrl" :alt="imageAlt">
<div :class="{ active: isActive, 'text-danger': hasError }"></div>

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

<button @click="handleClick">点击</button>
<input @keyup.enter="submit">

v-model

<input v-model="message" placeholder="输入内容">
<select v-model="selected"><option value="A">选项A</option>
</select>

原理： 相当于以下语法糖

<input :value="text" @input="text = $event.target.value"
>

三、响应式系统核心

3.1 ref 和 reactive

一：ref 是什么？

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

<script setup>
import { ref, reactive } from 'vue'// 基本类型使用ref
const count = ref(0)
console.log(count.value) // 访问值// 对象类型使用reactive
const user = reactive({name: 'Alice',age: 25
})
console.log(user.name) // 直接访问
</script>

区别对比：

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

3.2 响应式原理

Vue 3使用Proxy实现响应式：

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

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

• 性能优于Vue 2的Object.defineProperty

四、计算属性和监听器

4.1 计算属性 (computed)

核心步骤：1导入computed函数

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

<script setup>
import { ref, computed } from 'vue'const price = ref(10)
const quantity = ref(2)// 自动计算总价（有缓存）
const total = computed(() => {return price.value * quantity.value//这里面放计算属性的计算逻辑
})
</script>

特点：

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

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

• 适合复杂逻辑计算

最佳实践：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 组件定义

<!-- ChildComponent.vue -->
<template><div class="child"><h3>{{ title }}</h3><button @click="emitEvent">触发事件</button></div>
</template><script setup>
// 定义props
defineProps({title: {type: String,default: '默认标题'}
})// 定义emits
const emit = defineEmits(['custom-event'])const emitEvent = () => {emit('custom-event', '额外数据')
}
</script>

5.2 组件使用

<template><ChildComponent title="子组件标题"@custom-event="handleEvent"/>
</template><script setup>
import ChildComponent from './ChildComponent.vue'const handleEvent = (data) => {console.log('收到子组件事件:', data)
}
</script>

六、生命周期钩子

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 核心概念详解：生命周期、组件通信与模板引用