Vue 3 最基础核心知识详解-EW帮帮网

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('组件卸载')
  // 适合做清理工作
})

完整生命周期流程：

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

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

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

Vue 3 最基础核心知识详解