代码!DOCTYPE htmlhtml langenheadscript srchttps://unpkg.com/vue3/dist/vue.global.js/script/headbodydiv idappgreeting toMike clickonClickLove/greetinggreeting toJaneLike/greeting/divscriptVue.createApp({methods: {onClick(count) {alert(已经点击了 count 次)}},components: {greeting: {data() {return {count: 0}},props: [to],emits: [click],methods: {onClick() {this.countthis.$emit(click, this.count)}},template: button clickonClickslot/slot {{ to }} x {{ count }}/button}}}).mount(#app)/script/body/htmlVue.js 核心概念复习要点1. 组件系统组件注册通过components选项注册子组件Props父组件向子组件传递数据的机制Slots内容分发插槽允许父组件向子组件注入内容2. 数据绑定双向绑定v-model单向绑定{{ }}插值表达式动态属性绑定v-bind:或简写:3. 事件处理事件监听v-on:或简写自定义事件通过$emit()触发事件向父组件传递信息事件修饰符.stop,.prevent等4. 实例选项data组件的数据对象methods定义方法computed计算属性watch监听器5. 生命周期钩子created,mounted,updated,unmounted6. 指令题型一计算属性 vs 方法 vs 侦听器例题以下关于Vue 3计算属性的说法正确的是A. 计算属性默认只有getter不能定义setterB. 计算属性会缓存结果只有依赖发生变化时才重新计算C. 计算属性与方法的功能完全相同只是写法不同D. 计算属性中可以执行异步操作正确答案B解析A错计算属性可以定义set如题2、题3所示。B对这是计算属性的核心特性。C错方法每次调用都会执行不会缓存。D错计算属性必须是同步的不能包含异步逻辑。题型二v-model 修饰符例题下列哪个修饰符可以让v-model在失去焦点时才更新数据A..lazyB..trimC..numberD..sync正确答案A解析题2使用了v-model.lazy.trim.lazy改为change事件触发.trim自动去除首尾空格。.number自动转为数字.sync是Vue 2的语法Vue 3用v-model参数替代。题型三watch 的参数例题在Vue 3的watch选项中回调函数默认接收哪两个参数A.newValue, oldValueB.oldValue, newValueC.value, keyD.event, value正确答案A解析第一个参数是新值第二个是旧值题2的标准用法。注意顺序不可颠倒。题型四组件通信例题子组件通过什么方式向父组件传递数据A.propsB.$emitC.slotsD.provide/inject正确答案B解析题6中子组件通过this.$emit(click, count)向父组件发送事件和数据。props是父传子slots用于内容分发provide/inject用于跨层级传递。题型五computed 的 setter 作用例题以下哪个场景适合使用计算属性的setA. 根据输入框的值实时过滤列表B. 修改计算属性时反向更新其依赖的数据C. 监听路由变化D. 执行异步请求正确答案B解析题3中修改周长或面积会自动更新半径正是利用set反向计算。A用get即可C用watchD不能用计算属性。题型六v-for 与 key例题在Vue 3中使用v-for时推荐使用哪个属性作为:keyA. 数组索引B. 唯一标识如idC. 随机数D. 可以不设置正确答案B解析题5中:keystudent.id使用唯一id。使用索引可能导致渲染错误随机数破坏性能官方强烈建议提供唯一key。题型七动态样式绑定例题以下哪种写法可以在Vue 3中动态绑定多个内联样式A.:stylecolor: red; font-size: 20pxB.:style{ color: red, fontSize: 20px }C.stylecolor: red; font-size: 20pxD.:style[color: red, font-size: 20px]正确答案B解析题4中:style{ borderColor, backgroundColor, color }就是对象语法。A是无效的Vue绑定C是静态样式D是数组语法可用于合并多个样式对象但不直接写字符串。题型八数组方法应用例题题5中实现筛选和排序使用了哪些数组方法A.filter和sortB.map和reduceC.forEach和findD.push和pop正确答案A解析filter用于条件筛选sort用于排序按id升序。题7还用了map生成新数组。题型九随机数范围例题Math.floor(Math.random() * 100) 1生成的数字范围是A. 0~99B. 1~100C. 0~100D. 1~99正确答案B解析Math.random()生成[0,1)乘以100得[0,100)向下取整得0~99加1得1~100。题型十事件对象与 dataset例题在题7的changeCurrency方法中如何获取点击元素的data-currency属性值A.e.target.getAttribute(data-currency)B.e.currentTarget.dataset.currencyC.e.data.currencyD.e.currentTarget.currency正确答案B解析题7中使用了e.currentTarget.dataset.currency。dataset是HTML5标准自动将data-*属性映射为驼峰命名的属性。A也能获取但B更简洁且常用。备考建议v-if/v-show,v-for,v-bind,v-on,v-model,v-slot重点记忆computed的get/set、watch的参数顺序、$emit传参、v-model修饰符、filter/map/sort组合、动态样式对象语法、dataset的使用。易错点区分methods和computed、watch中新旧值顺序、v-for的key不要用索引、计算属性不能有副作用异步。读代码题可能会给一段类似题2的watch代码问你运行结果或指出错误。