2021前端vue面试题

心已赠人 2022-11-04 14:26 235阅读 0赞

### 1. 什么是 MVVM？ ###

*  MVVM 是Model-View-ModelView的缩写，是一种脱胎于 MVC 模式的设计模式。
 *  Model 代表数据层，负责存放业务相关的数据；
 *  View 代表视图层，负责在页面上展示数据；
 *  ViewModel 是的作用是同步 View 和 Model 之间的关联，其实现同步关联的核心是DOM Listeners和 Data Bindings两个工具。DOMListeners 工具用于监听 View 中 DOM 的变化，并会选择性的传给 Model；Data Bindings 工具用于监听 Model 数据变化，并将其更新给 View。

### 2.组件通讯 ###

#### 父传子 ####

> 父传子利用props

**父组件代码**
    <template>
        <header-box :title-txt="showTitleTxt"></header-box>
    </template>
    <script>
        import Header from './header'
        export default {
            name: 'index',
            components: {
                'header-box': Header
            },
            data () {
                return {
                    showTitleTxt: '首页'
                }
            }
        }
    </script>
    
    
    **子组件代码**
    <template>
        <header>
            {
       {thisTitleTxt}}
        </header>
    </template>
    <script>
        export default {
            name: 'header-box',
            props: {
                titleTxt: String
            },
            data () {
                return {
                    thisTitleTxt: this.titleTxt
                }
            }
        }
    </script>

#### 子传父 ####

1.  利用 o n 和 on和 on和emit 即子组件利用一个事件来触发$emit来传递出去一个事件及参数，然后在父组件里绑定这个事件，然后处理这个事件，获取传递的参数
2.  子组件改变父组件传递的props（你会发现通过props可传递复杂类型数据，可以通过子组件改变数据内容，不推荐使用，因为vue是规定props是单向绑定）

*通过$on,$emit*
    **父组件代码**
    <template>
        <div id="counter-event-example">
          <p>{
       { total }}</p>
          <button-counter v-on:increment="incrementTotal"></button-counter>
    </div>
    </template>
    <script>
        import ButtonCounter from './buttonCounter'
        export default {
            name: 'index',
            components: {
                'button-conuter': ButtonCounter
            },
            data () {
                return {
                    total: 0
                }
            },
            methods: {
                incrementTotal () {
                    this.total++
                }
            }
        }
    </script>
    
    
    **子组件代码**
    <template>
        <button @click="incrementCounter">{
       {counter}}</button>
    </template>
    <script>
        export default {
            name: 'button-counter',
            data () {
                return {
                    counter: 0
                }
            },
            metheds: {
                incrementCounter () {
                    this.$emit('increment')
                    this.counter++
                }
            }
        }
    </script>

#### 非父子 ####

> 创建一个空的vue实例，然后挂载到当前的vue实例的原型上,然后一个组件进行 e m i t 传 递 事 件 以 及 需 要 传 递 的 数 据 。 在 另 一 个 组 件 那 里 就 可 以 进 行 使 用 emit传递事件以及需要传递的数据。在另一个组件那里就可以进行使用 emit传递事件以及需要传递的数据。在另一个组件那里就可以进行使用on来接受这个事件并处理这个传递参数

let bus =new Vue()
    Vue.prototype.bus = bus

### 3.生命周期 ###

*  beforeCreate：vue实例的挂载元素el和数据对象data都是undefined，还没用初始化
 *  created：vue实例的数据对象data有了，可以访问里面的数据和方法，未挂载到DOM，el还没有
 *  beforeMount：vue实例的el和data都初始化了，但是挂载之前未虚拟DOM节点
 *  mounted：vue实例挂载到真实DOM上，就可以通过DOM获取DOM节点
 *  beforeupdated：响应式数据更新时调用，发生在虚拟DOM打补丁之前，适合在更新之前访问现有的DOM，比如手动一处已添加的事件监听器
 *  updated：虚拟DOM重新渲染和打补丁之后调用，组成新的DOM已经更新，避免在这个钩子函数中操作数据，防止死循环
 *  beforeDestroy：实例销毁前调用，实例还可以用，this能获取到实例，常用于销毁定时器，解绑事件
 *  destroyed：实例销毁后调用，调用后所有事件监听器会被移除，所有的子实例都会被销毁

### 4.vue组件中data必须是一个函数 ###

如果 data 是一个对象，当复用组件时，因为 data 都会指向同一个引用类型地址，其中一个组件的 data 一旦发生修改，则其他重用的组件中的 data 也会被一并修改。  
如果 data 是一个返回对象的函数，因为每次重用组件时返回的都是一个新对象，引用地址不同，便不会出现如上问题。

### 5.Vue 中 v-if 和 v-show 有什么区别？ ###

v-if 在进行切换时，会直接对标签进行创建或销毁，不显示的标签不会加载在 DOM 树中。v-show 在进行切换时，会对标签的 display 属性进行切换，通过 display 不显示来隐藏元素。  
一般来说，v-if 的性能开销会比 v-show 大，切换频繁的标签更适合使用 v-show。

### 6.Vue 中 computed 和 watch 有什么区别？ ###

计算属性 computed：

1.  支持缓存，只有依赖数据发生变化时，才会重新进行计算函数；
2.  计算属性内不支持异步操作；
3.  计算属性的函数中都有一个 get(默认具有，获取计算属性)和 set(手动添加，设置计算属性)方法；
4.  计算属性是自动监听依赖值的变化，从而动态返回内容。

侦听属性 watch：

1.  不支持缓存，只要数据发生变化，就会执行侦听函数；
2.  侦听属性内支持异步操作；
3.  侦听属性的值可以是一个对象，接收 handler 回调，deep，immediate 三个属性；
4.  监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些其他事情。

### 7.$nextTick 是什么 ###

Vue 实现响应式并不是在数据发生后立即更新 DOM，使用 vm.$nextTick 是在下次 DOM 更新循环结束之后立即执行延迟回调。在修改数据之后使用，则可以在回调中获取更新后的 DOM。

### 8. v-for 中 key 的作用是什么？ ###

key 是 Vue 使用 v-for 渲染列表时的节点标识。使用了 key 之后，当列表项发生变化时，Vue 会基于 key 的变化而重新排列元素顺序，并且移除 key 不存在的元素，提升运行效率。

### 9. Vue 的双向数据绑定原理是什么？ ###

Vue 采用数据劫持+订阅发布模式实现双向绑定。通过 Object.defineProperty()方法来为组件中 data 的每个属性添加 get 和 set 方法，在数据变动时，触发 set 里相应的监听回调函数，将变动信息发布给订阅者。主要有以下步骤：

1.  组件初始化时：

*  创建一个dep 对象作为观察者（依赖收集、订阅发布的载体）；
 *  通过Object.defineProperty()方法对 data 中的属性及子属性对象的属性，添加 getter 和 setter 方法； 调用 getter 时，便去 dep 里注册函数。调用 setter 时，便去通知执行刚刚注册的函数。

1.  组件挂载时：

*  compile解析模板指令，将其中的变量替换成数据。然后初始化渲染页面视图，并将每个指令对应的节点绑定上更新函数、监听函数。后续一旦数据发生变化，便会更新页面。页面发生变化时也会相应发布变动信息；
 *  组件同时会定义一个watcher 类作为订阅者，watcher 可以视作 dep 和组件之间的桥梁。其在实例化时会向 dep 中添加自己，同时自身又有一个 update 方法，待收到 dep 的变动通知时，便会调用自己的 update 方法，触发 compile 中的相应函数完成更新。

### 10.如何动态更新对象或数组的值？ ###

因为 Object.defineProperty()的限制，Vue 无法监听到对象或数组内部某个属性值的变化，因此在直接设置以上两类数据的值时，页面不会实时更新。此时可以通过 this.$set 方法来解决：

this.$set(要改变的数组/对象，要改变的位置/key，要改成的value)
    
    this.$set(this.arr, 0, "OBKoro1");
    // 改变数组 
    this.$set(this.obj, "c", "OBKoro1"); // 改变对象
    
    数组原生方法造成的数据更新，可以被 Vue 监听到。如 splice()push()pop()等。

### 11.常用的事件修饰符有哪些？ ###

.stop：阻止冒泡；
    .prevent：阻止默认行为；
    .self：仅绑定元素自身可触发；
    .once：只触发一次..

### 12.Vue 如何获取 DOM 元素？ ###

首先先为标签元素设置 ref 属性，然后通过 this.$refs.属性值获取。

<div ref="test"></div>
    
    const dom = this.$refs.test

### 13.v-on 如何绑定多个事件？ ###

### 14.Vue 初始化页面闪动问题如何解决？ ###

出现该问题是因为在 Vue 代码尚未被解析之前，尚无法控制页面中 DOM 的显示，所以会看见模板字符串等代码。
    解决方案是，在 css 代码中添加 v-cloak 规则，同时在待编译的标签上添加 v-cloak 属性：

[v-cloak] { display: none; }
    
    <div v-cloak>
     {
       { message }}
    </div>

### 15.Vue 如何清除浏览器缓存？ ###

1.  项目打包的时候给每个打包文件加上 hash 值，一般是在文件后面加上时间戳；
2.  在 html 文件中加入 meta 标签，content 属性设置为no-cache;
3.  在后端服务器中进行禁止缓存设置。

### 16.Vue-router 路由有哪些模式？ ###

一般有两种模式：

1.  hash 模式：后面的 hash 值的变化，浏览器既不会向服务器发出请求，浏览器也不会刷新，每次 hash 值的变化会触发 hashchange 事件。
2.  history 模式：利用了 HTML5 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

### 17.Vue-cli 项目中 assets 和 static 文件夹有什么区别？ ###

两者都是用于存放项目中所使用的静态资源文件的文件夹。其区别在于：  
\*\* assets 中的文件在运行 npm run build 的时候会打包\*\*，简单来说就是会被压缩体积，代码格式化之类的。打包之后也会放到 static 中。static 中的文件则不会被打包。

### 18.Vuex 是什么？有哪几种属性？ ###

Vuex 是专为Vue设计的状态管理工具，采用集中式储存管理 Vue 中所有组件的状态。

1.  state属性：基本数据；
2.  getters属性：从 state 中派生出的数据；
3.  mutation属性：\*\*更新 store 中数据的唯一途径，\*\*其接收一个以 state 为第一参数的回调函数；

const store = new Vuex.Store({
      state: {
        count: 1,
      },
      mutations: {
        increment(state) {
          // 变更状态
          state.count++;
        },
      },
    });

1.  action 属性：提交 mutation 以更改 state，其中可以包含异步操作；

1.  module 属性：用于将 store分割成不同的模块。

const moduleA = {
      state: () => ({ ... }),
      mutations: { ... },
      actions: { ... },
      getters: { ... }
    }
    
    const moduleB = {
      state: () => ({ ... }),
      mutations: { ... },
      actions: { ... }
    }
    
    const store = new Vuex.Store({
      modules: {
        a: moduleA,
        b: moduleB
      }
    })
    
    store.state.a // -> moduleA 的状态
    store.state.b // -> moduleB 的状态

### 19.说一下v-model的原理 ###

v-model本质就是一个语法糖，可以看成是value + input方法的语法糖。 可以通过model属性的prop和event属性来进行自定义。原生的v-model，会根据标签的不同生成不同的事件和属性。

### 20.Vue模版编译原理知道吗，能简单说一下吗？ ###

简单说，Vue的编译过程就是将template转化为render函数的过程。会经历以下阶段：

*  生成AST树
 *  优化
 *  codegen

首先解析模版，生成AST语法树(一种用JavaScript对象的形式来描述整个模板)。  
使用大量的正则表达式对模板进行解析，遇到标签、文本的时候都会执行对应的钩子进行相关处理。

Vue的数据是响应式的，但其实模板中并不是所有的数据都是响应式的。有一些数据首次渲染后就不会再变化，对应的DOM也不会变化。那么优化过程就是深度遍历AST树，按照相关条件对树节点进行标记。这些被标记的节点(静态节点)我们就可以跳过对它们的比对，对运行时的模板起到很大的优化作用。

编译的最后一步是将优化后的AST树转换为可执行的代码。

### 21.Vue中组件生命周期调用顺序 ###

组件的调用顺序都是先父后子,渲染完成的顺序是先子后父。

组件的销毁操作是先父后子，销毁完成的顺序是先子后父。

#### 加载渲染过程 ####

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount- >子mounted->父mounted

#### 子组件更新过程 ####

父beforeUpdate->子beforeUpdate->子updated->父updated

#### 父组件更新过程 ####

父 beforeUpdate -> 父 updated

#### 销毁过程 ####

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

### 22.你都做过哪些Vue的性能优化 ###

#### 编码阶段 ####

*  尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher
 *  v-if和v-for不能连用
 *  如果需要使用v-for给每项元素绑定事件时使用事件代理
 *  SPA 页面采用keep-alive缓存组件
 *  在更多的情况下，使用v-if替代v-show
 *  key保证唯一
 *  使用路由懒加载、异步组件
 *  防抖、节流第三方模块按需导入
 *  长列表滚动到可视区域动态加载
 *  图片懒加载

#### SEO优化 ####

*  预渲染
 *  服务端渲染SSR

#### 打包优化 ####

*  压缩代码
 *  Tree Shaking/Scope Hoisting
 *  使用cdn加载第三方模块
 *  多线程打包happypack
 *  splitChunks抽离公共文件
 *  sourceMap优化

#### 用户体验 ####

*  骨架屏
 *  PWA