前端面试，笔试题

$refs的优点以及弊端

$refs的弊端是，状态管理比较混乱，不利于维护

异步组件和路由懒加载区别

异步组件：异步组件是一种技术，它允许在页面需要时才从服务器加载相应的组件。这种方式适用于大型应用，可以将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块，从而提高页面渲染速度

路由懒加载：路由懒加载结合了异步组件技术和webpack代码分割功能，以达到优化项目的目的。它允许只加载当前点击的模块，而不是整个网页。这种方式可以有效地分担首页所承担的加载压力，减少首页加载用时，提高用户体验

总结来说，异步组件和路由懒加载都是为了提高页面加载速度和用户体验，但它们的技术实现和应用场景有所不同。异步组件更侧重于代码分割和模块加载，而路由懒加载则侧重于页面加载的优化和用户体验的提升

组件上使用v-model

父组件


<template><div id="app"><HelloWorld v-model="showFlag" v-if="showFlag"></HelloWorld><button @click="showFlag=true">打开组件</button></div>
</template><script>
import HelloWorld from './components/HelloWorld'export default {name: 'App',data(){return {showFlag: false}},components: {HelloWorld}
}
</script>简单说明一下，这里我们引入了我们的子组件HelloWorld，通过showFlag来控制组件的显示隐藏，当然，组件上还用v-model绑定了showFlag，那么我们就来看看子组件是如何搞的吧。

子组件


<template><div class="hello"><h1>这是组件里面的内容</h1><button @click="close">关闭组件</button></div>
</template><script>
export default {name: 'HelloWorld',model: {prop: 'checked',event: 'change'},props: {checked: {type: Boolean}},methods: {close(){this.$emit('change', false)}}
}对于子组件来说，允许自定义使用v-model时定制prop和event，v-model中的prop就是把value用作prop，input用作event，但是为了避免冲突，我们使用model的选项可以回避这些冲突，当然，你也得使用props声明checked这个prop