vue常规面试题

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 时，便去通知执行刚刚注册的函数。

2. 组件挂载时：

• 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 如何绑定多个事件？

<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur }">

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++;
    },
  },
});

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

const store = new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  actions: {
    increment2(context) {
      context.commit('increment');
    },
    fun(context) {
      context.dispatch('increment2');
    },
  },
});

5. 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