Vue面试题（第一版）

Vue面试题（第一版）

vue设计模式（MVVM）

1. MVVM是 Model-View-ViewModel的缩写。mvvm是一种设计思想。

2. Model层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；

3. View层代表UI组件，它负责将数据模型转化成UI展现出来

4. ViewModel是一个同步View和Model的对象。

5. 在MVVM架构下，View和Model之间并没有直接的联系，而是通过ViewModel进行交互，Model和VIewModel之间的交互是双向的，因此View数据的变化会同步到Model中，而Model数据的变化也会立即反应到View上。

6. ViewModel通过双向数据绑定把View层和Model层连接到一起，而View和Model之间的同步工作全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由MVVM来统一管理。

MVVM和MVC的区别

mvc和mvvm其实区别并不大，都是一种设计思想。主要是mvc中的Controller演变成mvvm中的ViewModel。mvvm主要解决了mvc中大量的操作DOM，使页面渲染性能降低，加载速度变慢，影响用户体验。

vue生命周期

1. 什么是生命周期？

   Vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。

2. Vue生命周期的作用是什么？

   他的生命周期中有多个事件钩子，让使用者在控制整个Vue实例的过程时更容易形成好的逻辑。

3. Vue生命周期总有几个阶段？

   它总共分为8个阶段：创建前/后(breforeCreate，created)、载入前/后(breforeMount，mounted)、更新前/后(beforeUpdate，updated)、销毁前/后(breforeDestory，destory)

   1. 创建前/后：在beforeCreate阶段，Vue实例的挂载元素el还没有。
   2. 载入前/后：在beforeMount阶段，Vue实例的$el和data都初始化了，但还是挂载之前的虚拟的dom节点，data.message还未替换。在mounted阶段，Vue实例挂载完成，data.message成功渲染。
   3. 更新前/后：当data变化时，会触发beforeUpdate和updated方法。
   4. 销毁前/后：在执行destory方法后，对data的改变不会再触发周期函数，说明此时Vue实例已经解除了事件监听以及dom的绑定，但是dom结构依然存在。

4. 第一次页面加载会触发哪几个钩子函数？

   beforeCreate，created，beforeMount，mounted

5. DOM渲染在哪个生命周期就已经完成？

   DOM渲染在mounted中就已经完成

6. 每个生命周期适合哪些场景

   beforeCreate：可以在加个loading事件，在加载实例时触发

   created：初始化完成时的事件写这里，如loading事件的结束，异步请求也适宜在这里调用

   mounted：挂载元素，获取到DOM节点

   updated：如果对数据统一处理，在这里写相应函数

   beforeDestory：可以做确认事件停止的确认框

   nextTick：更新数据后立即操作DOM

v-show与v-if的区别

• v-show是切换css，v-if是完整的销毁和重新创建
• 使用频繁切换时用v-show，运行时较少改变时用v-if
• v-if="false"，v-if是条件渲染，当false时不会渲染

开发中常用的指令有哪些

• v-model：一般用在表达输入，实现表单控件和数据的双向数据绑定

• v-html：更新元素的innerHTML

• v-show与v-if：条件渲染

  使用v-if时，如果值为false时，页面不会生成这个标签

  v-show则是不管值为true或false，都会生成标签，只是css中的display显示或隐藏

• v-on:click：简写@click，绑定事件，可以触发指定事件处理函数

• v-for：源数据多次渲染元素或模板块

• v-bind:属性名：简写:属性名，当表达式的值改变时，可以直接改变DOM

  语法：v-bind:tit="msg"   简写： :title="msg"
  

路由跳转方式

• 声明式跳转，即标签跳转

  <router-link to="/foo">Go to Foo</router-link>
  

• 编程式导航，即js跳转

  this.$router.push({ path: "" })
  

computed和watch有什么区别

• computed：

  • computed是计算属性，计算值，多用于计算值的场景
  • computed具有缓存性，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter；来计算
  • computed适用于计算比较消耗性能的计算场景

• watch：

  • 更多只是观察的作用，类似于某些数据的监听回调；用于观察props，$emit或者本组件的值，当数据变化是来执行回调监听
  • 无缓存性，页面重新渲染时值不变化也会执行

  小结：

  1. 当我们要进行数值计算时，而且依赖其他数据，那么设计为computed
  2. 如果只是需要在某个数据变化时做一些事情，使用watch来观察数据变化

keep-alive

keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，避免重新渲染，其特性入下：

• 一般结合路由和动态组件一起使用，用于缓存组件
• 提供include和exclude属性，两者都支持字符串或正则表达式，include表示只有名称匹配的组件会被缓存，exclude表示任何名称匹配的组件都不会被缓存，其中exclude的优先级比include高
• 对应两个钩子函数activated和deactivated，当组件被激活时，触发钩子函数activated，当组件被移出时，触发钩子函数deactivated。

nextTick()

• 在下次DOM更新循环结束之后执行延迟回调。在修改数据之后，立即使用这个回调函数，获取更新后的DOM

  vm.msg = "nextTick"
  Vue.nextTick(function() {
      // DOM 更新
  })
  

key

key是为Vue中vnode标记的唯一id，通过key，diff操作更准确、更快速

• 准确
  • 如果不加key，那么vue会选择复用节点(Vue的就地更新策略)，导致之前的状态被保留下来，会产生一系列的bug
• 快速
  • key的唯一性可以被Map数据结构充分利用

组件之间的通信

1. 父组件与子组件通信

// 父组件通过标签上面定义传值
<template>
    <Main :obj="data"></Main>
</template>
<script>
    import Main from "./main.vue";
    export default{
        name: "parent",
        data() {
            return {
                data: "我要传值给子组件"
            }
        },
        components: {
            Main
        }
    }
</script>
// 子组件通过props方法接受数据
<template>
    <div>{{data}}</div>
</template>
<script>
    export default{
        name: "son",
        props: ["data"]
    }
</script>

2. 子组件向父组件传递参数

// 父组件监听派发的事件接收参数
<template>
    <main @msgFun="events">点我</main>
</template>
<script>
    import Main from "./main.vue";
    export default{
        name: "parent",
        methods: {
            events: function(msg) {
                console.log(msg);
            }
        }
    }
</script>

// 子组件通过$emit方法传递参数
<template>
    <div @click="handleClick">点我</div>
</template>
<script>
    export default{
        name: "main",
        data() {
            return {
                msg: "子组件参数"
            }
        },
        methods: {
            handleClick() {
                this.$emit("msgFun", this.msg)
            }
        }
    }
</script>

3. 非父子，兄弟组件之间通信

   通过实例一个Vue实例Bus座位媒介，要相互通信的兄弟组件之中，都引入Bus，然后通过分别调用Bus事件触发和监听来实现通信和参数传递

// Bus.js
import Vue from "vue";
export default new Vue();

// 兄弟组件
<template>
    <div @click="handleToBus">点我</div>
</template>
<script>
    import Bus from "./bus.js";
    export default{
        methods: {
            handleToBus() {
                Bus.$emit("on", "来自兄弟组件");
            }
        }
    }
</script>

// 另一个兄弟组件
<script>
    import Bus from "./Bus.js";
    export default{
        data() {
            return {
                message: ""
            }
        },
        mounted() {
            Bus.$on("on", (msg) => {
                this.message = msg;
            })
        }
    }
</script>

Vue项目优化

1. 代码层面的优化

   1. v-if 和 v-show 区分使用场景
   2. computed 和 watch 区分使用场景
   3. v-for 遍历必须为 item 添加 key，避免同时使用 v-if
   4. 长列表性能优化
   5. 事件的销毁
   6. 图片资源懒加载
   7. 第三方插件按需引入
   8. 路由懒加载
   9. 优化无限列表性能
   10. 服务端渲染SSR 或 预渲染

2. webpack层面的优化

   1. webpack对图片进行压缩

   2. 减少ES6转为ES5的冗余代码

   3. 提取公共代码

   4. 提取组件的css

   5. 优化SourceMap

   6. 构建结果输出分析

   7. Vue项目的编译优化

3. 基础的web技术的优化

   1. 开启 gzip 压缩浏览器缓存
   2. CDN的使用
   3. 使用Chrome Performance 查找性能瓶颈