Vue 基础进阶测试题（含答案）

Vue基础进阶测试题（含答案）适用场景：前端新人考核、Vue基础期末测试、面试自测难易程度：基础+中等，贴合实际开发，无偏题怪题考试时长：60分钟满分：100分一、单项选择题（每题3分，共30分）1.下列关于Vue核心特点的说法，错误的是（）A.渐进式框架B.双向数据绑定C.强制使用类组件写法D.虚拟DOM提升渲染性能2.Vue实例中，用来存放页面响应式数据的选项是（）A.methodsB.dataC.computedD.watch3.以下指令中，用于绑定HTML元素属性的是（）A.v-textB.v-bindC.v-onD.v-html4.Vue中v-on:click的简写方式是（）A.:clickB.@clickC.#clickD.$click5.下列关于computed和methods的区别，说法正确的是（）A.computed每次调用都会重新执行B.computed有缓存，依赖不变则不重新计算C.methods有缓存性能更高D.两者没有任何区别6.Vue中用来实现列表循环渲染的指令是（）A.v-ifB.v-forC.v-showD.v-bind7.切换元素显示隐藏，频繁切换场景下性能更好的是（）A.v-ifB.v-showC.v-hideD.v-display8.父组件向子组件传递数据，依靠的是（）A.propsB.$emitC.provide/injectD.vuex9.子组件向父组件触发事件传递数据，使用的方法是（）A.propsB.$emitC.watchD.computed10.Vue生命周期中，DOM首次渲染完成可以操作DOM的钩子是（）A.createdB.mountedC.updatedD.destroyed二、填空题（每题2分，共20分）1.Vue双向数据绑定的核心原理是_________。2.v-bind的简写语法是_________。3.能够监听数据变化、执行异步操作的配置项是_________。4.Vue组件中data必须是_________，避免组件数据污染。5.v-if是_________切换元素，v-show是_________切换元素。6.组件通信中，兄弟组件传值常用_________或Vuex。7.防止v-for列表渲染报错、提升Diff算法效率需要添加_________属性。8.created钩子中可以获取_________，无法获取_________。9.Vue中修饰符.stop的作用是_________。10.全局注册组件使用Vue_________方法。三、简答题（每题6分，共30分）1.简述v-if和v-show的区别，以及各自的使用场景。2.说说computed和watch的区别和适用场景。3.Vue组件中key的作用是什么？为什么不建议用index作为key？4.简述Vue单向数据流的规则。5.简单说下Vue生命周期中created和mounted的区别与用途。四、代码实操题（每题10分，共20分）1.编写一个简单Vue实例，实现：页面输入框双向绑定数据，实时显示输入内容，点击按钮清空输入框。2.编写父子组件传值案例：父组件传递用户名给子组件，子组件点击按钮修改用户名并同步到父组件。参考答案一、单项选择题答案1.C2.B3.B4.B5.B6.B7.B8.A9.B10.B二、填空题答案1.数据劫持（Object.defineProperty）+发布订阅模式2.:3.watch4.函数（返回对象）5.销毁/重建；css显示隐藏6.事件总线（EventBus）7.key8.数据；DOM9.阻止事件冒泡10.component三、简答题答案1.v-if和v-show区别及场景（1）原理：v-if是真正的条件渲染，条件不成立时直接销毁DOM元素，成立时重新创建；v-show只是切换元素的CSSdisplay属性，DOM始终存在。（2）性能：v-if切换开销大，初始渲染开销小；v-show初始渲染开销大，频繁切换开销小。（3）场景：频繁切换显示隐藏用v-show；切换频率低、需要权限控制、按需加载DOM用v-if。2.computed和watch区别及场景（1）computed：计算属性，有缓存，依赖数据不变就不会重新计算，支持只读和读写，适合简单数据计算、多对一数据处理，同步执行。（2）watch：数据监听，无缓存，数据变化就触发，支持异步操作，适合数据变化后执行异步请求、复杂逻辑、一对多数据监听。3.key的作用&不建议用index做key的原因（1）作用：key是节点唯一标识，帮助VueDiff算法精准对比新旧虚拟DOM，复用节点、减少不必要的DOM渲染，提升列表更新性能，同时避免列表状态错乱。（2）index弊端：数组删除、插入、排序时，后续元素index会变化，导致Diff算法误判，无法复用原有节点，造成不必要的DOM更新，还会引发复选框、输入框状态错乱等问题。4.Vue单向数据流规则父组件通过props向子组件传递数据，数据只能由父组件修改、向下传递，子组件不能直接修改props数据。直接修改会报错且数据状态混乱，子组件如需修改，需通过$emit触发事件通知父组件修改，或者在子组件内定义局部数据接收props值再修改。5.created和mounted区别与用途（1）created：实例创建完成，数据、方法已初始化，但DOM未生成、未挂载，无法操作DOM。常用于页面初始化数据请求、初始化变量。（2）mounted：DOM挂载完成，页面真实DOM渲染完毕，可以操作DOM、获取DOM节点、操作第三方DOM插件。四、代码实操题答案1.双向绑定+清空输入框案例html

<!DOCTYPEhtml>

<htmllang="zh-CN">

<body>

<divid="app">

<inputtype="text"v-model="inputVal"placeholder="请输入内容">

<p>实时输入内容：{{inputVal}}</p>

<button@click="clearInput">清空内容</button>

</div>

<scriptsrc="/npm/vue@2.7.14/dist/vue.js"></script>

<script>

newVue({

el:'#app',

data(){

return{

inputVal:''

}

},

methods:{

clearInput(){

this.inputVal=''

}

}

})

</script>

</body>

</html>2.父子组件传值+子改父值案例html

<!DOCTYPEhtml>

<htmllang="zh-CN">

<body>

<divid="app">

<h3>父组件用户名：{{userName}}</h3>

<son:name="userName"@change-name="handleChange"></son>

</div>

<scriptsrc="/npm/vue@2.7.14/dist/vue.js"></script>

<script>

//子组件

Vponent('son',{

props:['name'],

template:`

<div>

<p>子组件接收的用户名：{{name}}</p>

<button@click="modifyName">修改用户名</button>

</div>

`,

methods:{

modifyName(){

//子组件触发事件，传递新值给父组件

this.$emit('change-name','前端开发学习者')

}

}

})

//父组件

newVue({

el:'#app',

data(){

return{

userName:'Vue初学者'

}

},

methods:{