前端面试，笔试题

$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