2023年最新前端面试题（vue相关3）_前端面试题2023vue3-CSDN博客

本文链接：https://blog.csdn.net/m0_68393821/article/details/128968734

文章详细解释了Vue组件命名多词化的原因，data()使用return的用意，为何应详细定义Prop，以及Vue组件初始化顺序。还探讨了Vue-router的hash模式和history模式的工作原理，并区分了$router和$route的区别。此外，提到了Vue全家桶的组成部分，Vue2与Vue3的区别，以及slot的三种类型：默认插槽、具名插槽和作用域插槽的使用方法。

摘要由CSDN通过智能技术生成

一、为什么组件名字是由多个单词组成

可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的

二、为什么 data(){ return { } }这样写? 而不是直接写 data: { }

当 data 的值是一个对象时，它会在这个组件的所有实例之间共享，会造成变量污染；使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件

三、为什么Prop 定义应该尽量详细, 而不使用props: [ ]这种写法?

写明了组件的 API，所以很容易看懂组件的用法

如果向一个组件提供格式不正确的 prop，Vue 将会告警，以帮助捕获潜在的错误来源。

四、Vue组件的初始化顺序

props>methods>data>cumputed>watch

props接收了一个变量a，data里也定义了一个变量a，忽略报错,a变量取哪个值？

取props里面的a

五、 Vue-router的模式，特点及原理

hash模式：#以及#后面的字符称之为hash，用 window.location.hash 读取

特点：在url后面跟#号，有onhashchange事件，前端访问，#后面的变化不会经过服务器

原理：#后面的地址发生改变, 触发onhashchange事件，修改盒子内容(切换组件)

history模式：

特点：在url后没有#号，和正常的url一致，没有onhashchange事件，history模式需要后端的配合，后端访问，任意地址的变化都会访问服务器

原理：利用 history.pushState() 专门给浏览器添加路径地址而且不会触发页面刷新

六、$router和$route区别是什么? 分别包含哪些内容?

$route保存当前路由的信息, 包含了路径, 传递的参数query:{},params:{},meta: {}

$router路由的实例, 包含了完整的路由配置项, 包含了路由跳转的方法

七、vue全家桶是指哪些东西

脚手架vue-cli、路由vue-Router、状态管理模式vuex、Axios、elementUI等ui框架和打包工具webpack

八、vue3和vue2的区别

双向数据绑定原理发生了改变

Vue3在组件可以拥有多个根节点

Vue3是合成型API

声明变量位置不同

生命周期不同

6.父子传参不同

九、slot分类

默认插槽：<slot>夹着内容默认显示内容, 如果不给插槽slot传东西, 则使用<slot>夹着的内容在原地显示

<slot>默认内容</slot>

具名插槽：传入的标签可以分别派发给不同的slot位置，slot占位，name属性起名字，template配合v-slot：插槽名，夹着传入具体标签

子组件Pannel.vue：
slot标签，自定义属性和变量关联
<template>
  <div>
    <div class="title">
      <slot name="title"></slot>
    </div>
    <div class="container">
      <slot name="content"></slot>
    </div>
  </div>
</template>

父组件：
<template>
  <div>
    <Pannel>
      <template v-slot:title>
        <h4>标题</h4>
      </template>
    </Pannel>
    <Pannel>
      <template v-slot:content>
        <img src="../assets/mm.gif" alt="">
      </template>
    </Pannel>
  </div>
</template>

作用域插槽：使用组件内的变量

子组件MyTable.vue：
slot标签，自定义属性和变量关联
<template>
  <div>
    <table border="1">
      <thead>
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>头像</th>
       </tr>
     </thead>
     <tbody>
       <tr v-for="(obj, index) in arr" :key="index">
         <td>{{ index + 1 }}</td>
         <td>{{ obj.name }}</td>
         <td>{{ obj.age }}</td>
         <td>
           <slot :row="obj">
           <!-- 默认值给上,如果使用组件不自定义标签显示默认文字 -->
           {{ obj.headImgUrl}}
           </slot>
         </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
export default {
props: {
arr: Array
}
}
</script>

父组件UseTable.vue：
template配合v-slot="变量名"，变量名会收集slot身上属性和值形成对象
<template>
  <div>
    <MyTable :arr="list">
      <template v-slot="scope">
        <img style="width: 100px;" :src="scope.row.headImgUrl" alt="">
      </template>
    </MyTable>
  </div>
</template>

<script>
import MyTable from "../components/MyTable";
export default {
  components: {
    MyTable,
  },
  data() {
    return {
      list: [
        {
        name: "one",
        age: 18,
        headImgUrl:"http://yun.it.com/Upload/./Images/20210303/603f2d2153241.jpg",
        },
        {
        name: "two",
        age: 25,
        headImgUrl:"http://yun.it.com/Upload/./Images/20210304/6040b101a18ef.jpg",
        },
        {
        name: "three",
        age: 21,
        headImgUrl:"http://yun.it.com/Upload/./Images/20210302/603e0142e535f.jpg",
        }
      ]
    }
  }
}
</script>