《Vue.js前端开发实战》学习笔记 第2章 单文件组件、数据绑定
每个 Vue通过数据绑定实现数据与页面分离，最终达成数据驱动视图的效果，核心解决重复编写页面模板的问题（如图书商城复用图书详情页模板，仅修改数据展示不同内容）。 Vue3提供基础写法和setup语法糖写法（推荐），语法糖可大幅简化代码，提高开发效率。 使用Vue提供的Mustache语法（双大括号语法），在 Mustache语法可直接解析表达式，返回结果作为输出内容，示例如下： 步骤1：创建 步骤2：修改 页面效果： 直接定义的普通数据，修改后数据本身会变化，但页面视图不会同步更新，示例验证如下： 效果验证： Vue3提供 语法： 实操示例： ② 修改 ③ 页面效果： 语法： 实操示例： ② 修改 ③ 页面效果： 语法： 实操示例： ② 修改 ③ 页面效果： 语法： 实操示例： ② 修改 ③ 页面效果：一、单文件组件（.vue）核心定义与结构
.vue文件对应一个Vue单文件组件，是Vue组件的专属文件格式，由模板、样式、逻辑三部分构成，各部分各司其职且结构固定。1. 三大组成部分说明
组成部分 对应标签 核心功能 关键注意点 模板 <template>搭建当前组件的DOM结构，仅作为包裹容器，不会被渲染为真实DOM元素 每个组件最多1个顶层 <template>；Vue3支持多根节点，Vue2仅支持单根节点（必须有唯一外层根标签包裹）样式 <style>通过CSS代码为当前组件设置样式 可添加 scoped属性实现组件样式隔离，避免样式污染逻辑 <script>通过JavaScript代码处理组件的数据定义、业务逻辑 Vue3提供 setup语法糖，简化数据和方法的定义与暴露二、数据绑定核心内容
数据绑定分为定义数据和输出数据两个核心步骤，且普通数据无响应式，需通过专属函数处理为响应式数据，才能实现数据变化视图同步更新。1. 初识数据绑定
1.1 定义数据
写法1：基础写法（setup函数）
<script>
export default {
setup() {
return {
数据名: 数据值,
// 可定义多个数据，以键值对形式存在
...
}
}
}
</script>export default是模块导出语法；setup()是Vue3组合式API的起点，需通过return暴露数据给模板；组件实例创建时执行该代码。写法2：setup语法糖写法（推荐）
<script setup>
// 直接定义变量即可，无需export和return，自动暴露给模板
const 数据名 = 数据值;
</script><script>标签添加setup属性即可使用，代码更简洁，是Vue3开发首选方式。1.2 输出数据
<template>中作为占位符，页面渲染时会被替换为实际数据。基本语法
<template>
{{ 数据名 }}
</template>支持的表达式类型
<template>
{{ 'Hello Vue.js' }} <!-- 字符串表达式 -->
{{ number + 1 }} <!-- 算术运算表达式 -->
{{ obj.name }} <!-- 对象属性取值表达式 -->
{{ ok ? 'YES' : 'NO' }} <!-- 三元运算符表达式 -->
{{ '<div>HTML标签</div>' }} <!-- HTML字符串（会被当作纯文本输出，不解析标签） -->
</template>1.3 基础数据绑定实操示例
src\components\Message.vue文件，编写代码<template>{{ message }}</template>
<script setup>
const message = '不积跬步,无以至千里'
</script>src\main.js文件，切换展示组件import { createApp } from 'vue'
import './style.css'
// 替换为自定义的Message组件
import App from './components/Message.vue'
createApp(App).mount('#app')
2. 响应式数据绑定
2.1 普通数据的问题
修改src\components\Message.vue：<template>{{ message }}</template>
<script setup>
let message = '不积跬步,无以至千里'
// 2秒后修改数据
setTimeout(() => {
console.log("更新前的message:" + message)
message = '长风破浪会有时, 直挂云帆济沧海'
console.log('更新后的message:' + message)
}, 2000)
</script>
2.2 响应式数据定义函数
ref()、reactive()、toRef()、toRefs()四个函数，用于将普通数据处理为响应式数据，实现数据变化 → 视图自动同步更新，四个函数适用场景不同，需按需选择。函数1：ref()
// 导入ref函数
import { ref } from 'vue'
// 定义响应式数据
const 响应式数据 = ref(初始数据值)
// 修改响应式数据（必须通过.value属性）
响应式数据.value = 新值
① 创建src\components\Ref.vue<template>{{ message }}</template>
<script setup>
// 导入ref函数
import { ref } from 'vue'
// 定义ref响应式数据
const message = ref('会当凌绝顶,一览众山小')
// 2秒后修改数据
setTimeout(() => {
message.value = '锲而不舍,金石可镂'
}, 2000)
</script>src\main.js切换组件import App from './components/Ref.vue'
初始效果：
2秒后效果：
函数2：reactive()
// 导入reactive函数
import { reactive } from 'vue'
// 定义响应式对象/数组
const 响应式对象 = reactive(普通对象/普通数组)
// 修改响应式数据（直接修改属性/元素，无需.value）
响应式对象.属性名 = 新值
① 创建src\components\Reactive.vue<template>{{ obj.message }}</template>
<script setup>
// 导入reactive函数
import { reactive } from 'vue'
// 定义reactive响应式对象
const obj = reactive({ message: '不畏浮云遮望眼,自缘身在最高层' })
// 2秒后修改数据
setTimeout(() => {
obj.message = '欲穷千里目,更上一层楼'
}, 2000)
</script>src\main.js切换组件import App from './components/Reactive.vue'
初始效果：
2秒后效果：
函数3：toRef()
// 导入reactive、toRef函数
import { reactive, toRef } from 'vue'
// 先定义基础响应式对象
const 响应式对象 = reactive({ 属性1: 值1, 属性2: 值2 })
// 将单个属性转为响应式数据
const 响应式属性 = toRef(响应式对象, '属性名')
// 修改数据（需通过.value）
响应式属性.value = 新值
① 创建src\components\ToRef.vue<template>
<div>message的值:{{ message }}</div>
<div>obj.message的值:{{ obj.message }}</div>
</template>
<script setup>
// 导入所需函数
import { reactive, toRef } from 'vue'
// 定义基础响应式对象
const obj = reactive({ message: '黑发不知勤学早,白首方悔读书迟' })
// 将obj的message属性转为独立响应式数据
const message = toRef(obj, 'message')
// 2秒后修改数据
setTimeout(() => {
message.value = '少壮不努力,老大徒伤悲'
}, 2000)
</script>src\main.js切换组件import App from './components/ToRef.vue'
初始效果：
2秒后效果：
函数4：toRefs()
// 导入reactive、toRefs函数
import { reactive, toRefs } from 'vue'
// 先定义基础响应式对象
const 响应式对象 = reactive({ 属性1: 值1, 属性2: 值2 })
// 将所有属性转为响应式数据，解构赋值获取
const { 属性1, 属性2 } = toRefs(响应式对象)
// 修改数据（需通过.value）
属性1.value = 新值
① 创建src\components\ToRefs.vue<template>
<div>message的值:{{ message }}</div>
<div>obj.message的值:{{ obj.message }}</div>
</template>
<script setup>
// 导入所需函数
import { reactive, toRefs } from 'vue'
// 定义基础响应式对象
const obj = reactive({ message: '盛年不重来,一日难再晨' })
// 将obj的所有属性转为响应式数据，解构获取message
let { message } = toRefs(obj)
// 2秒后修改数据
setTimeout(() => {
message.value = '及时当勉励,岁月不待人'
}, 2000)
</script>src\main.js切换组件import App from './components/ToRefs.vue'
初始效果：
2秒后效果：
三、核心知识点总结
1. 单文件组件关键
<template>的根节点限制放宽，支持多根节点，解决Vue2外层根标签的冗余问题；<script setup>是Vue3推荐写法，无需export default和return，直接定义数据/方法即可暴露给模板；<style scoped>是组件样式隔离的核心方式，开发中建议默认添加。2. 数据绑定关键
3. 响应式数据核心
ref()是通用响应式函数，支持所有数据类型，修改时必须加.value（模板中使用无需加）；reactive()仅支持对象/数组，修改时直接操作属性/元素，无需.value；toRef()和toRefs()基于已有响应式对象创建，用于拆分对象属性，实现属性的独立响应式，修改后会同步更新原对象；4. 开发实操注意
src\main.js中import App from 'xxx'的导入路径；setup语法糖，简化代码编写；优先使用ref()定义响应式数据，通用性更强。
