2023前端vue面试题汇总

最新推荐文章于 2023-07-22 20:43:31 发布

yyzzabc123

最新推荐文章于 2023-07-22 20:43:31 发布

阅读量322

点赞数

文章标签：前端框架 vue.js

本文链接：https://blog.csdn.net/yyzzabc123/article/details/129240040

版权

Vuex有哪几种属性？

有五种，分别是 State、 Getter、Mutation 、Action、 Module

state => 基本数据(数据源存放地)
getters => 从基本数据派生出来的数据
mutations => 提交更改数据的方法，同步
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex

Vue中修饰符.sync与v-model的区别

sync的作用

.sync修饰符可以实现父子组件之间的双向绑定，并且可以实现子组件同步修改父组件的值，相比较与v-model来说,sync修饰符就简单很多了
一个组件上可以有多个.sync修饰符

<!-- 正常父传子 -->
<Son :a="num" :b="num2" />

<!-- 加上sync之后的父传子 -->
<Son :a.sync="num" :b.sync="num2" />

<!-- 它等价于 -->
<Son 
  :a="num" 
  :b="num2" 
  @update:a="val=>num=val" 
  @update:b="val=>num2=val" 
/>

<!-- 相当于多了一个事件监听，事件名是update:a, -->
<!-- 回调函数中，会把接收到的值赋值给属性绑定的数据项中。 -->

v-model的工作原理

<com1 v-model="num"></com1>
<!-- 等价于 -->
<com1 :value="num" @input="(val)=>num=val"></com1>

相同点
- 都是语法糖，都可以实现父子组件中的数据的双向通信
区别点
- 格式不同：v-model="num", :num.sync="num"
- v-model: @input + value
- :num.sync: @update:num
- v-model只能用一次；.sync可以有多个

Vue路由的钩子函数

首页可以控制导航跳转，beforeEach，afterEach等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。

beforeEach主要有3个参数to，from，next。
to：route即将进入的目标路由对象。
from：route当前导航正要离开的路由。
next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转

对Vue SSR的理解

Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。

SSR也就是服务端渲染，也就是将 Vue 在客户端把标签渲染成 HTML 的工作放在服务端完成，然后再把 html 直接返回给客户端

优点：SSR 有着更好的 SEO、并且首屏加载速度更快
- 因为 SPA 页面的内容是通过 Ajax 获取，而搜索引擎爬取工具并不会等待 Ajax 异步完成后再抓取页面内容，所以在 SPA 中是抓取不到页面通过 Ajax获取到的内容；而 SSR 是直接由服务端返回已经渲染好的页面（数据已经包含在页面中），所以搜索引擎爬取工具可以抓取渲染好的页面
- 更快的内容到达时间（首屏加载更快）： SPA 会等待所有 Vue 编译后的 js 文件都下载完成后，才开始进行页面的渲染，文件下载等需要一定的时间等，所以首屏渲染需要一定的时间；SSR 直接由服务端渲染好页面直接返回显示，无需等待下载 js 文件及再去渲染等，所以 SSR 有更快的内容到达时间
缺点：开发条件会受到限制，服务器端渲染只支持 beforeCreate 和 created 两个钩子，当我们需要一些外部扩展库时需要特殊处理，服务端渲染应用程序也需要处于 Node.js 的运行环境。服务器会有更大的负载需求
- 在 Node.js 中渲染完整的应用程序，显然会比仅仅提供静态文件的 server 更加大量占用CPU资源 (CPU-intensive - CPU 密集)，因此如果你预料在高流量环境 ( high traffic ) 下使用，请准备相应的服务器负载，并明智地采用缓存策略

其基本实现原理

app.js 作为客户端与服务端的公用入口，导出 Vue 根实例，供客户端 entry 与服务端 entry 使用。客户端 entry 主要作用挂载到 DOM 上，服务端 entry 除了创建和返回实例，还进行路由匹配与数据预获取。
webpack 为客服端打包一个 Client Bundle ，为服务端打包一个 Server Bundle 。
服务器接收请求时，会根据 url，加载相应组件，获取和解析异步数据，创建一个读取 Server Bundle 的 BundleRenderer，然后生成 html 发送给客户端。
客户端混合，客户端收到从服务端传来的 DOM 与自己的生成的 DOM 进行对比，把不相同的 DOM 激活，使其可以能够响应后续变化，这个过程称为客户端激活。为确保混合成功，客户端与服务器端需要共享同一套数据。在服务端，可以在渲染之前获取数据，填充到 stroe 里，这样，在客户端挂载到 DOM 之前，可以直接从 store里取数据。首屏的动态数据通过 window.__INITIAL_STATE__发送到客户端

Vue SSR 的实现，主要就是把 Vue 的组件输出成一个完整 HTML, vue-server-renderer 就是干这事的

Vue SSR需要做的事多点（输出完整 HTML），除了complier -> vnode，还需如数据获取填充至 HTML、客户端混合（hydration）、缓存等等。相比于其他模板引擎（ejs, jade 等），最终要实现的目的是一样的，性能上可能要差点

Vue组件之间通信方式有哪些

Vue 组件间通信是面试常考的知识点之一，这题有点类似于开放题，你回答出越多方法当然越加分，表明你对 Vue 掌握的越熟练。 Vue 组件间通信只要指以下 3 类通信 ：父子组件通信、隔代组件通信、兄弟组件通信，下面我们分别介绍每种通信方式且会说明此种方法可适用于哪类组件间通信

组件传参的各种方式

组件通信常用方式有以下几种

props / $emit 适用父子组件通信
- 父组件向子组件传递数据是通过 prop 传递的，子组件传递数据给父组件是通过$emit 触发事件来做到的
ref 与 $parent / $children(vue3废弃) 适用父子组件通信
- ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
- $parent / $children：访问访问父组件的属性或方法 / 访问子组件的属性或方法
EventBus （$emit / $on） 适用于父子、隔代、兄弟组件通信
- 这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件
$attrs / $listeners(vue3废弃) 适用于隔代组件通信
- $attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 ( class 和 style 除外 )。当一个组件没有声明任何 prop时，这里会包含所有父作用域的绑定 ( class 和 style 除外 )，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 inheritAttrs 选项一起使用
- $listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件
provide / inject 适用于隔代组件通信
- 祖先组件中通过 provider 来提供变量，然后在子孙组件中通过 inject 来注入变量。 provide / inject API 主要解决了跨级组件间的通信问题， 不过它的使用场景，主要是子组件获取上级组件的状态 ，跨级组件间建立了一种主动提供与依赖注入的关系
$root 适用于隔代组件通信 访问根组件中的属性或方法，是根组件，不是父组件。$root只对根组件有用
Vuex 适用于父子、隔代、兄弟组件通信
- Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )
- Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
- 改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。

根据组件之间关系讨论组件通信最为清晰有效

父子组件：props/$emit/$parent/ref
兄弟组件：$parent/eventbus/vuex
跨层级关系：eventbus/vuex/provide+inject/$attrs + $listeners/$root

下面演示组件之间通讯三种情况: 父传子、子传父、兄弟组件之间的通讯

1. 父子组件通信

使用props，父组件可以使用props向子组件传递数据。

父组件vue模板father.vue:

<template>
  <child :msg="message"></child>
</template>

<script>
import child from './child.vue';
export default {
     
  components: {
     
    child
  },
  data () {
     
    return {
     
      message: 'father message';
    }
  }
}
</script>

子组件vue模板child.vue:

<template>
    <div>{
  {msg}}</div>
</template>

<script>
export default {
     
  props: {
     
    msg: {
     
      type: String,
      required: true
    }
  }
}
</script>

回调函数（callBack）

父传子：将父组件里定义的method作为props传入子组件

// 父组件Parent.vue：
<Child :changeMsgFn="changeMessage">
methods: {
   
    changeMessage(){
   
        this.message = 'test'
    }
}

// 子组件Child.vue：
<button @click="changeMsgFn">
props:['changeMsgFn']

子组件向父组件通信

父组件向子组件传递事件方法，子组件通过$emit触发事件，回调给父组件

父组件vue模板father.vue:

<template>
    <child @msgFunc="func"></child>
</template>

<script>
import child from './child.vue';
export default {
     
    components: {
     
        child
    },
    methods: {
     
        func (msg) {
     
            console.log(msg);
        }
    }
}
</script>

子组件vue模板child.vue:

<template>
    <button @click="handleClick">点我</button>

最低0.47元/天解锁文章

yyzzabc123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2023前端vue面试题汇总

但是如果从别的组件跳转到 B 组件的时候，实际上是希望 B 组件重新渲染的，也就是不要从 Storage 中读取信息。除此之外，在Vue中，还可以是用keep-alive来缓存页面，当组件在keep-alive内被切换时组件的。对于最终的结果，两种方式是相同的。旧前与新后（头与尾比，此种发生了，涉及移动节点，那么新前指向的节点，移动到旧后之后）旧后与新前（尾与头比，此种发生了，涉及移动节点，那么新前指向的节点，移动到旧前之前）因为异步路由的存在，我们使用异步组件的次数比较少，因此还是有必要两者的不同。
复制链接

扫一扫