《通信软件前端开发》课件-项目一：Vue3基础语法与响应式系统

《通信软件前端开发》Vue3指令1那像刚刚展示的这些画面，同学们知不知道，这些功能是怎么实现的呢？对，这就是我们将给大家介绍的Vue3的几个基本指令，如：v-bind指令、v-model指令、v-for指令、v-if指令与v-show指令。案例导入，激发兴趣知识科普小问答在上节课中，我们给大家简单介绍了一下通信设备报警系统，在该系统中包含了设备展示、实时报警监控、报警历史记录、设备状态可视化图表等核心模块。基础指令v-bind基础用法：v-bind:属性名="数据变量"也可简写为：

:属性名="数据变量"（比如:class、:src）。即HTML标签的属性会根据数据进行动态变化。v-bind（动态绑定属性）基础指令假设你有一个设备状态显示模块，设备“在线”时显示绿色图标，“离线”时显示灰色图标。用v-bind可以这样写：<!--设备在线时，图标是绿色的；离线时，图标是灰色的--><img:src="device.status==='online'?'/green-icon.png':'/gray-icon.png'"/>再比如，你想根据设备类型（路由器、交换机）显示不同的图标，也可以用v-bind动态绑定src：<img:src="getIconByType(device.type)"/>getIconByType是Vue里写的一个方法，根据设备类型返回对应的图标路径v-bind（动态绑定属性）示例基础指令v-model基础用法：v-model="数据变量"v-model（双向数据绑定）基础指令v-model（双向数据绑定）示例<!--用户在输入框里打字--><inputv-model="searchText"placeholder="搜索设备..."/><!--设备列表根据输入内容自动过滤--><divv-for="deviceinfilteredDevices">{{}}</div>（filteredDevices是Vue里根据searchText计算出的过滤结果，输入时自动更新）（1）搜索框实时过滤设备列表：基础指令v-model（双向数据绑定）示例<!--用户滑动开关--><inputtype="checkbox"v-model="device.isOnline"/>在线状态<!--数据自动同步：device.isOnline会变成true/false-->（2）开关控制设备状态基础指令v-model（双向数据绑定）示例<!--用户选“路由器”或“交换机”--><selectv-model="device.type"><optionvalue="router">路由器</option><optionvalue="switch">交换机</option></select><!--数据自动同步：device.type会变成"router"或"switch"-->（3）下拉框选择设备类型基础指令基础语法：v-for="iteminitems"，其中：items是数据数组（比如devices=[{name:'路由器A',status:'online'},{name:'交换机B',status:'offline'}]）；item是数组里的每个元素（比如每个设备对象）。必须加：key（比如：key="item.id"），相当于给每个元素贴“唯一身份证”，Vue才能高效更新（比如删掉某个设备时，不会误删其他）。v-for（列表渲染）基础指令v-for（列表渲染）示例<divv-for="deviceindevices":key="device.id">{{}}-状态：{{device.status==='online'?'在线':'离线'}}</div>比如设备列表页面，用v-for可以这样写基础指令在“通信设备报警系统”中，有一个实时报警页面组件，在该组件下有一个设备详情弹窗功能，即当设备发生离线、警告、错误、信息等四种类型时，会进行报警处理，触发报警指令。想要完成这个动作，要怎么做才能实现呢？v-if/v-show（条件渲染）基础指令v-if指令用于根据表达式值的真假对元素进行条件渲染。赋值为true时，将元素插入DOM中，否则对应元素从DOM中移除。因此，Vue里的v-if指令类似于模版引擎的if条件语句。即条件为真时“创建元素”，为假时“销毁元素”。v-if/v-show（条件渲染）基础指令v-if/v-show（条件渲染）示例<divv-if="isAlarmActive">报警指示灯亮起！</div><divv-else>设备运行正常</div>比如设备指示灯亮起，可以用v-if这样写基础指令v-if/v-show（条件渲染）示例<divv-if="device.status==='error'"class="red-light">⚠️故障报警</div><divv-else-if="device.status==='warning'"class="yellow-light">⚠️警告</div><divv-elseclass="green-light">✅运行正常</div>或者当设备状态为“故障”时，显示红色报警灯，正常时显示绿色指示灯基础指令v-show指令会根据表达式的值切换元素的display属性。当v-show被赋值为true时，元素显示，否则元素被隐藏。即条件为真时“显示元素”，为假时“隐藏元素”。v-if/v-show（条件渲染）基础指令v-if/v-show（条件渲染）示例<divv-show="showAlertPanel">报警详情面板</div>如下所示，当"showAlertPanel"为true时，“报警详情面板”会显示：基础指令v-if/v-show（条件渲染）示例<button@click="showAlertPanel=!showAlertPanel">{{showAlertPanel?'隐藏详情':'查看详情'}}</button><divv-show="showAlertPanel"class="alert-panel"><p>报警时间：{{alertTime}}</p><p>报警设备：{{deviceName}}</p></div>点击“查看详情”按钮时，动态显示/隐藏详情面板：v-if指令与v-show指令的对比对比总结：选哪个？场景推荐指令原因报警状态切换（每秒更新多次）v-show高频切换时性能更好（仅改CSS）报警规则配置（初始化后不常改）v-if条件为假时彻底移除DOM，节省内存多分支逻辑（如多级报警等级）v-if支持v-else-if多分支判断总结几个基本核心指令：v-bind动态绑定HTML属性v-model将表单输入与数据进行双向绑定v-for进行循环渲染列表v-if进行条件渲染与v-show进行条件显示但同时，也需要注意各个指令之间的使用规范与区别，并进行正确的使用。课后习题选择题以下哪个指令适合实现“鼠标悬停显示提示框”？A.v-ifB.v-showC.v-bind课后习题代码优化问题：以下代码能否优化？如何改进？<divv-for="userinusers"v-if="user.role==='admin'">{{}}</div>查阅习题答案选择题答案：B（提示框需频繁显示/隐藏，v-show性能更优）。查阅习题答案代码优化用计算属性过滤管理员用户，避免每次循环都判断role。computed:{adminUsers(){returnthis.users.filter(user=>user.role==='admin');}}《通信软件前端开发》Vue3指令2回顾上节知识、温故知新v-bind指令：动态绑定HTML属性v-model指令：表单输入与数据的双向绑定v-for指令：循环渲染列表v-if与v-show指令：条件渲染与显示知识回顾今日课程大纲v-on指令详解自定义指令详解实战应用与案例分析课后思考与作业v-on指令基本语法v-on指令完整版写法：

v-on:事件名="要干的事情"实例：<buttonv-on:click="sayHello">点我</button>即监听这个click（点击）事件，当这个按钮被按下时（click事件被触发），赶紧去执行sayHello这个任务（比如弹出‘你好!’的弹窗）。<formv-on:submit.prevent="onSubmit"><!--表单内容--></form>示例代码v-on事件类型与修饰符事件类型：点击（click）、鼠标悬停(mouseover)、键盘按下(keydown)等事件修饰符：.stop（阻止事件冒泡）、.prevent（阻止默认行为）等自定义指令介绍定义：扩展Vue指令系统，创建满足特定需求的指令作用：实现特殊功能（如自动聚焦、状态变化提示等）类比：“自定义工具箱”javascriptapp.directive('focus',{mounted(el){el.focus();}});全局注册示例自定义指令基本用法解释：元素挂载到DOM后自动获得焦点javascriptapp.directive('offline-alert',{updated(el,binding){if(binding.value==='offline'){

el.style.color='red';

el.textContent='设备已离线，请检查！';}else{

el.style.color='';

el.textContent='';}}});案例:设备状态变化提示自定义指令实战案例实战应用与案例分析场景一：使用v-on监听设备点击事件，显示设备详情场景二：使用自定义指令实现设备状态变化提示互动环节:邀请学生思考其他应用场景课后思考与作业作业要求完成上述思考问题，并编写相应代码示例。思考问题在通信设备报警系统中，还有哪些场景可以使用v-on指令？尝试创建一个自定义指令，用于在设备状态变化时自动记录日志。课程总结总结：掌握了v-on指令与自定义指令的核心概念与应用展望：下节课将介绍更多Vue3高级特性查阅习题答案设备状态监控与交互实时告警触发：通过v-on:click绑定设备状态按钮，当设备离线/故障时触发报警弹窗（如<button@click="triggerAlarm(device)">报警</button>）。状态确认操作：使用v-on:submit.prevent监听报警确认表单，阻止默认提交行为并执行自定义校验逻辑。键盘快捷操作：结合v-on:keydown.enter实现设备列表回车快速定位，提升操作效率。动态数据交互参数动态过滤：通过v-on:input监听搜索框输入，实时过滤设备列表（如<input@input="filterDevices">）。多事件协同：采用对象语法v-on="{click:handleClick,mouseover:showDetails}"实现设备卡片的复合交互。自定义事件通信组件间通信：使用$emit触发自定义事件，父组件通过v-on:status-change监听设备状态变更（如<child@status-change="logChange">）。事件修饰符优化：结合.stop阻止冒泡、.once确保报警通知只触发一次。查阅习题答案<template><divclass="device-monitor"><device-cardv-for="deviceindevices":key="device.id":device="device"@status-change="handleStatusChange"@click="showDetails(device)"/><alarm-form@submit.prevent="processAlarm"/></div></template>思考题1参考代码<script>exportdefault{methods:{handleStatusChange(newStatus){this.$logService.record(newStatus);},showDetails(device){this.$router.push(`/devices/${device.id}`);},processAlarm(formData){//自定义校验逻辑

this.$emit('alarm-processed',formData);}}}</script>思考题1参考代码查阅习题答案思考题2参考解析指令设计思路通过v-log-status指令监听设备状态变化，自动记录状态变更日志。采用updated钩子捕获状态变化，对比新旧值差异后触发日志写入。查阅习题答案//全局注册自定义指令app.directive('log-status',{updated(el,binding){const{value:newVal,oldValue:oldVal}=binding;if(newVal!==oldVal){consttimestamp=newDate().toISOString();constlogMsg=`[${timestamp}]设备${el.dataset.deviceId}状态变更：${oldVal}→${newVal}`;writeLog(logMsg);//实际项目可替换为日志系统调用

}}});//组件模板使用<divv-log-status="device.status":data-device-id="device.id">{{}}</div>

《通信软件前端开发》Vue3模版语法与数据绑定案例导入在之前的课程中，我们介绍了“通信设备报警系统”，该系统包含了设备列表、模拟访问后端API、设备详情弹窗、数据分页、顶部搜索框和添加设备等功能。这些功能的实现都离不开Vue3的模板语法与数据绑定。提问：大家是否还记得，在通信设备报警系统中，设备列表是如何动态渲染到页面上的？对，这就是我们今天要学习的Vue3模板语法与数据绑定的核心内容。Vue3模板语法基础在vue3中，我们可以使用双大括号“{{}}”进行文本插值。例如，在设备列表中显示名称：<div>{{}}</div>。插值表达式使用v-bind:或简写:来动态绑定HTML属性，例如<img:src="device.icon"/>。属性绑定使用对象语法或数组语法来动态绑定CSS类，例如<div:class="{active:isActive}"></div>。动态样式数据绑定详解双向数据绑定使用v-model指令实现表单输入与应用状态之间的双向绑定。例如，在搜索框中绑定搜索关键词：<inputv-model="searchText"placeholder="搜索设备..."/>。单向数据绑定使用v-bind或简写:进行单向数据绑定。例如，绑定设备的图标路径：<img:src="device.icon"/>。数据绑定详解计算属性使用计算属性computed对数据进行处理。

computed:{filteredDevices(){returnthis.devices.filter(device=>.includes(this.searchText));}}案例演示设备列表渲染使用v-for指令循环渲染设备列表

<divv-for="deviceinfilteredDevices":key="device.id">{{}}-{{device.status}}</div>案例演示设备详情弹窗使用v-if或v-show控制设备详情弹窗的显示与隐藏

<divv-if="showDetail"class="device-detail"><h3>{{selectedD}}</h3><p>状态:{{selectedDevice.status}}</p></div>案例演示数据分页使用计算属性实现数据分页

computed:{paginatedDevices(){conststart=(this.current1)*this.pageSize;constend=start+this.pageSize;returnthis.filteredDevices.slice(start,end);}}播放一段关于Vue3模板语法与数据绑定的短视频，展示实际开发中的应用场景。互动环节观看视频互动环节测试：提供一个简单的测试题，让学生巩固所学知识。例如：问题：在Vue3中，如何实现表单输入与应用状态之间的双向绑定？v-bindv-modelv-forv-if√互动环节讨论：提出一个讨论话题：在通信设备报警系统中，哪些功能可以通过Vue3的模板语法与数据绑定实现？让学生分组讨论并分享答案。课后作业与思考思考如何在通信设备报警系统中实现以下功能：使用v-model实现搜索框的双向数据绑定。使用v-for和计算属性实现设备列表的分页显示。使用v-if或v-show控制设备详情弹窗的显示与隐藏。课后思考完成以下代码示例：编写一个设备列表页面，使用v-for渲染设备数据。实现搜索框的双向数据绑定，使用v-model和计算属性过滤设备列表。添加一个按钮，点击后显示设备详情弹窗，使用v-if或v-show控制弹窗的显示与隐藏。作业要求课程总结预告下节课我们将继续学习Vue3的其他核心功能。希望大家继续学习，下次再见！总结今天我们学习了Vue3的模板语法与数据绑定，包括插值表达式、属性绑定、单向数据绑定、双向数据绑定、计算属性、列表渲染和条件渲染等内容。这些知识是前端开发的基础，掌握它们对于开发通信设备报警系统等复杂应用至关重要。《通信软件前端开发》Vue3响应式系统之ref与reactive基础用法案例导入通信设备报警系统响应式需求回顾通信设备报警系统：实时展示通信设备状态设备列表、设备详情弹窗、数据分页当后端API返回新数据时，前端界面自动更新通信设备报警系统Vue3响应式系统概述响应式系统是Vue3的核心特性之一允许声明式地描述数据与视图之间的关系数据变化时，视图自动更新，无需手动操作DOM响应式原理：使用Proxy对象劫持数据访问和修改ref基础语法示例代码import{ref}from'vue';constcount=ref(0);console.log(count.value);//输出:0count.value++;console.log(count.value);//输出:1创建一个响应式的引用对象接受一个初始值作为参数，返回包含.value属性的响应式对象reactive基础用法示例代码import{reactive}from'vue';conststate=reactive({count:0,name:'Vue3'});console.log(state.count);//输出:0state.count++;console.log(state.count);//输出:1创建一个响应式的对象接受一个普通对象作为参数，返回该对象的响应式代理案例演示

import{ref,reactive}from'vue';constsearchText=ref('');constdevices=reactive({list:[],pagination:{ currentPage:1, pageSize:10}});functionfetchDevices(){devices.list=[/*设备数据*/];}使用ref创建搜索文本的响应式引用使用reactive创建设备列表和分页信息的响应式对象在通信设备报警系统中使用ref与reactive案例演示观看视频Vue3响应式系统实战Vue3响应式系统实战演示重点讲解ref与reactive的用法测试环节Part02在JavaScript代码中访问ref创建的响应式数据的值，需要加什么后缀？Part01ref与reactive的主要区别是什么？测试题分组讨论，每组派代表分享讨论结果讨论环节Part02哪些场景适合诗人reactive?Part01在通信设备报警系统中，还有哪些场景适合ref？讨论问题分组讨论，每组派代表分享讨论结果课后思考Part02在通信设备报警系统中，如何使用ref与reactive来管理设备详情的显示，与隐藏状态？Part01如何使用ref与reactive结合计算属性来实现设备列表的过滤功能？思考问题尝试编写相应的代码示例课程总结今天我们学习了Vue3响应式系统中的ref与reactive这两个核心API的基础用法了解了它们的区别和适用场景通过案例演示、观看视频、测试和讨论等方式加深了对这些概念的理解和应用希望大家能够在课后继续探索和实践，不断提升自己的前端开发能力预告：下节课我们将继续学习Vue3的其他核心功能。希望大家继续学习，下次再见！《通信软件前端开发》vue3响应式系统之响应式数据修改与监听案例导入回顾通信设备报警系统这个系统包含了设备列表展示、模拟访问后端API获取设备数据、设备详情弹窗、数据分页、顶部搜索框以及添加设备等功能。这些功能中，数据的实时更新和同步是至关重要的。例如，当设备状态发生变化时，我们需要立即更新界面以反映最新状态。那么，Vue3是如何实现这一点的呢？接下来，我们就来详细探讨。通信设备报警系统概览Vue3响应式系统基础回顾Vue3使用Proxy对象来实现数据的响应式追踪ref和reactive是创建响应式数据的两个核心APIref适用于基本数据类型，reactive适用于复杂数据类型（如对象和数组）响应式数据的修改示例1：修改ref创建的数据count.value++;console.log(count.value);//输出:1直接修改ref或reactive创建的数据，Vue会自动追踪这些变化并更新视图示例2：修改reactive创建的数据='AnotherDevice';console.log();//输出:AnotherDevice监听响应式数据的变化示例代码import{ref,watch,watchEffect}from'vue';constcount=ref(0);//使用watch监听count的变化watch(count,(newValue,oldValue)=>{console.log(`Countchangedfrom${oldValue}to${newValue}`);});//使用watchEffect自动追踪count的变化watchEffect(()=>{console.log(`Currentcountvalue:${count.value}`);});使用watch和watchEffect来监听响应式数据的变化。watch：监听特定数据源的变化，并在变化时执行回调函数。watchEffect：自动追踪函数内使用的响应式数据，并在这些数据变化时重新执行函数。案例演示示例代码import{reactive,watch}from'vue';constdevice=reactive({status:'online'});watch(device,(newDevice,oldDevice)=>{if(newDevice.status!==oldDevice.status){console.log(`Devicestatuschangedfrom${oldDevice.status}to${newDevice.status}`);//这里可以添加发送通知或更新日志的逻辑

}},{deep:true});//深度监听对象内部的变化在通信设备报警系统中监听数据变化观看视频Vue3响应式数据修改与监听实战接下来，请大家观看一段视频，这段视频将详细展示Vue3中响应式数据的修改与监听在实际项目中的应用。视频内容应包括：数据修改示例、watch和watchEffect的使用场景和注意事项。测试环节测试题1：watch和watchEffect的主要区别是什么？测试题2：在监听复杂数据类型（如对象）时，为什么需要设置deep:true选项？讨论环节Part02如何优化监听逻辑，以减少不必要的性能开销？Part01在通信设备报警系统中，还有哪些场景适合使用watch或watchEffect来监听数据变化？讨论问题分组讨论，每组派代表分享讨论结果课后思考Part02在通信设备报警系统中，如何使用watch来监听设备列表的变化，并在列表更新时执行某些操作（如重新计算分页信息）？Part01如何结合computed和watch来实现更复杂的数据处理和监听逻辑？思考问题尝试编写相应的代码示例，并在下节课中分享课程总结今天我们学习了Vue3响应式系统中响应式数据的修改与监听方法。掌握了watch和watchEffect的使用场景和注意事项。通过案例演示、观看视频、测试和讨论等方式加深了对这些概念的理解和应用。希望大家能够在课后继续探索和实践，不断提升自己的前端开发能力。《通信软件前端开发》vue3生命周期钩子函数详解问题导入通信设备报警系统界面截图：设备列表页（标注搜索框、分页、弹窗）核心需求：✅页面加载时自动请求数据✅关闭弹窗时清空表单悬念提问：这些操作该放在哪里？Vue3生命周期钩子函数生命周期是什么？组件的“人生阶段”动态流程图：创建实例→挂载DOM→数据更新→组件销毁关键点：⚠️Vue3用8个钩子函数标记节点⚠️必须在setup()中通过onXXX引入（如onMounted）核心钩子函数代码示例onMounted(()=>{fetchDeviceList();//模拟API请求

});数据加载onBeforeMount→onMounted：初始化黄金期对比提问：为什么不用onBeforeMount？❌DOM未生成，依赖DOM的API会报错核心钩子函数搜索框案例onBeforeUpdate(()=>{console.log('即将更新，搜索词：',searchQuery.value);});onUpdated(()=>{console.log('DOM已更新');});数据更新onBeforeUpdate→onUpdated：更新双保险禁忌：onUpdated中修改状态会引发无限循环！核心钩子函数弹窗定时器案例lettimer;onBeforeUnmount(()=>{clearInterval(timer);//必须清理！});组件销毁onBeforeUnmount→onUnmounted：善后工作后果演示：未清理的定时器继续运行（配CPU占用率上升动画）内存泄漏互动环节参考代码watch(currentPage,(newVal)=>{console.log('页码变化：',newVal);});onMounted(()=>{console.log('初始页码：',currentPage.value);});编码挑战实践：分页组件页码监控任务：监听页码变化并打印日志提示：结合onMounted+watch互动环节小组讨论思考：设备添加后如何刷新列表？onMountedwatchAPI回调中直接调用fetchDeviceList()正确答案：C（钩子函数无法感知异步结果）总结与拓展4个最常用钩子函数钩子函数用途onMounted初始化数据、操作DOMonUpdated更新后副作用处理onBeforUnmount清理定时器、事件监听onUnmounted彻底销毁资源《通信软件前端开发》vue3setup语法糖Setup语法糖是什么<script>exportdefault{setup(){constname='小明'constsayHi=()=>{alert('大家好')}return{name,sayHi}}}</script>

<scriptsetup>constname='小明'constsayHi=()=>{alert('大家好')}</script>

Setup语法糖定义setup语法糖是Vue3.2版本引入的新特性，用<scriptsetup>标记，允许我们在组件中直接用顶级变量和函数，无需手动返回。不用写exportdefault不用写setup()函数不用写returnSetup关键细节setup语法糖不是一种新的API仅作用于单文件组件它的核心目的只有一个——简化编码Setup语法糖的核心特点自动导出组件自动创建setup作用域自动暴露数据和方法Setup语法糖规则<scriptsetup>//定义变量consttitle='我的第一个Vue程序'constcount=100constisStudent=true</script><template><h1>{{title}}</h1><p>计数：{{count}}</p><p>是否是学生：{{isStudent?'是':'否'}}</p></template>规则1：变量直接用在模板Setup语法糖规则<scriptsetup>//定义函数constshowMessage=()=>{alert('你点击了按钮！')}constgetCurrentTime=()=>{returnnewDate().toLocaleTimeString()}</script><template><!--函数用在事件中--><button@click="showMessage">点我</button><!--函数用在显示内容中--><p>当前时间：{{getCurrentTime()}}</p></template>规则2：函数直接用在模板Setup语法糖规则<scriptsetup>//导入外部文件import{formatDate}from'./utils/helpers'importMyTitlefrom'./components/MyTitle.vue'//直接使用！consttoday=formatDate(newDate())</script><template><!--组件直接使用，不用注册--><MyTitle/><p>今天是：{{today}}</p></template>规则3：导入的内容直接用实战小案例<scriptsetup>import{ref}from'vue'constcount=ref(0)constincrement=()=>{

count.value++}</script><template><div><p>当前计数：{{count}}</p><button@click="increment">+1</button></div></template>计数器组件变量→模板直接显示规则1函数→模板直接调用规则2导入→模板直接使用规则3规则小结课堂总结三个不用记不用写exportdefault不用写setup()函数不用写return三大核心规则有哪些？变量直接用在模板函数直接用在模板导入内容直接用setup语法糖是什么？Vue的快捷写法，用<scriptsetup>代替传统写法；《通信软件前端开发》vue3ref与reactive数据类型差异与转换代码分析//这是你写的代码（javascript）constcount=reactive(0)//❌页面不更新constuser=ref({name:'张三'})='李四'//❌数据变了，视图没变

基本概念ref定义：用于创建一个响应式的引用对象，可用于任何数据类型语法：constcount=ref(0)访问：通过.value属性访问和修改值适用场景：基本类型（数字、字符串、布尔值）和复杂类型都可以使用reactive定义：用于创建一个响应式的对象，只能用于对象类型语法：conststate=reactive({count:0,name:'Vue'})访问：直接访问属性，无需.value适用场景：主要用于复杂的对象数据ref和reactive的核心差异特性refreactive数据类型支持所有类型只支持对象类型访问方式需要.value直接访问属性引用传递始终保持响应性可能失去响应性（如解构赋值）类型推断自动推断类型需要显式类型注解代码展示//ref-全能选手constcount=ref(0)//✅基本类型constuser=ref({name:'张三'})//✅引用类型//reactive-专业选手conststate=reactive({name:'张三'})//✅对象constlist=reactive([1,2,3])//✅数组//constnum=reactive(10)//❌报错！

ref与reactive的相互转换//场景1：ref→reactiveconstcount=ref(0)conststate=reactive({count:count.value})//或者conststate=reactive({count:0})

//场景2：reactive→refconststate=reactive({count:0})constcountRef=ref(state.count)//双向同步watchEffect(()=>{countRef.value=state.count})watchEffect(()=>{state.count=countRef.value})

两个转换函数—toref、torefs//使用torefsimport{reactive,toRefs}from'vue'conststate=reactive({count:0,name:'Vue'})conststateRefs=toRefs(state)//现在可以使用stateRefs.count.value访问

//使用torefimport{reactive,toRef}from'vue'conststate=reactive({count:0,name:'Vue'})constcountRef=toRef(state,'count')

随堂测试单选题constdata=reactive({count:0})//下面哪种修改方式是响应式的？A.data.count=1B.data={count:1}判断题constcount=ref(0)//在模板中可以直接使用{{count}}不需要.value改错题constuser=reactive({name:'张三'})const{name}=user//这里有什么问题？ref应用实例基础类型-字符串（/src/views/DeviceList.vue）//定义constsearchQuery=ref('')//使用<el-inputv-model="searchQuery"/>//访问值：需要通过.value访问searchQuery.value//获取值searchQuery.value='新值'//修改值ref应用实例基础类型-布尔值//定义constdialogVisible=ref(false)//详情弹窗constaddDialogVisible=ref(false)//添加设备弹窗//使用<el-dialogv-model="dialogVisible">...</el-dialog>ref应用实例对象类型constaddDeviceForm=ref({name:'',type:'',status:'normal',location:'',ipAddress:'',