Vue面试题收集

最新推荐文章于 2024-04-20 22:50:58 发布

原创最新推荐文章于 2024-04-20 22:50:58 发布 · 269 阅读

1 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

11 篇文章

订阅专栏

一、对于MVVM的理解？

MVVM 是 Model-View-ViewModel 的缩写。
Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。
View 代表UI 组件，它负责将数据模型转化成UI 展现出来。
ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。
在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的，因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

二、Vue的生命周期

Vue å®ä¾çå½å¨æ

beforeCreate（创建前）在数据观测和初始化事件还未开始
created（创建后）完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来
beforeMount（载入前）在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
mounted（载入后）在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
beforeUpdate（更新前）在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
updated（更新后）在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy（销毁前）在实例销毁之前调用。实例仍然完全可用。
destroyed（销毁后）在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

1.什么是vue生命周期？
答： Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。

2.vue生命周期的作用是什么？
答：它的生命周期中有多个事件钩子，生命周期钩子的函数Vue实例在某一时间点会自动执行的函数，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

3.vue生命周期总共有几个阶段？
答：它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后。

4.第一次页面加载会触发哪几个钩子？
答：会触发下面这几个beforeCreate, created, beforeMount, mounted 。

5.DOM 渲染在哪个周期中就已经完成？
答：DOM 渲染在 mounted 中就已经完成了。

三、 Vue实现数据双向绑定的原理：Object.defineProperty（）

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。Object.defineProperty(obj, prop, descriptor) obj：要在其上定义属性的对象。

prop:要定义或修改的属性的名称。

descriptor:将被定义或修改的属性描述符。

____________________________________________________

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象.

Object.assign(target, ...sources) target:目标对象。

sources:源对象。

当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

data

vue的数据双向绑定将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。

受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。例如：
var vm = new Vue({
  data:{
    a:1
  }
})

// `vm.a` 是响应的
vm.b = 2
// `vm.b` 是非响应的
Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上：
Vue.set(vm.someObject, 'b', 2)
您还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名：
this.$set(this.someObject,'b',2)
有时你想向一个已有对象添加多个属性，例如使用 Object.assign() 或 _.extend() 方法来添加属性

this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

<div>
    <input type="text" id="input">
    <span id="show"></span>
</div>
<script>
    var obj = {
        // txt:''
    }
    Object.defineProperty(obj,'txt',{
        get:function () {
            return obj
        },
        set:function (newValue) {
            document.getElementById("input").value = newValue
            document.getElementById("show").innerText = newValue
        }
    })
    
    document.getElementById("input").addEventListener("input", function (ev) {
        obj.txt = ev.target.value
    })
</script>

四、Vue组件间的参数传递

1.父组件与子组件传值
父组件传给子组件：子组件通过props方法接受数据;
子组件传给父组件：$emit方法传递参数
2.非父子组件间的数据传递，兄弟组件传值
eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适。（虽然也有不少人推荐直接用VUEX，具体来说看需求咯。技术只是手段，目的达到才是王道。）

https://blog.youkuaiyun.com/xiaojinguniang/article/details/87821198

五、Vue的路由实现：hash模式和 history模式

hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取；
特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。
hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

history模式：history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。
history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”

八、vuex是什么？怎么使用？哪种功能场景使用它？

vuex 可以理解为一个仓库

state: 所有的公用数据都存放在state之中，如果一个组件想用state，直接调用即可

Actions：放置异步操作，复杂的同步操作和一些批量的同步操作

Mutations：Mutations中放的是一个一个对state的同步的修改

有的时候，我们需要改变state中的数据，不能直接让组件去修改数据，需要走一个流程

这个流程是这样的，如果我们有一些异步操作，我们将这个异步操作放在Actions里面，或者复杂的同步操作和一些批量的同步操作，也可以放在action中，组件先去调用Actions，Actions去调用Mutations（Mutations中放的是一个一个对state的同步的修改）,只有通过Mutations,才可以改变公用数据的值。

有时候，我们可以略过Actions，直接去调用Mutations去修改state里面的数据，

需要注意的是，当组件调用Actions的时候，我们调用的是dispatch方法来操作Actions，当组件去调用Mutations或者Actions去调用Mutations的时候，我们需要commit方法来操作Mutations，

vuex的大致内容就这么多，实际上他就是一个单向数据的改变流程，

改变数据呢，就是先调用Actions，再调用Mutations，去改变State的数据，当数据发生变化的时候，组件上面展示的内容也会发生改变

当然，在使用vuex的时候，我们也可以使用Devtools(也就是开发者工具)，帮助我们进行代码的调试

使用vuex的时候，

1.在src目录下创建一个store文件夹，然后在里面新建一个index.js文件，代码如下：

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

state: {

city: '北京'

}

})

2.在入口文件main.js中引入store，并且在new Vue中添加store，如下：

import store from './store/index'

new Vue({

store

})

3.在组件中使用，使用差值表达式

<span>{{this.$store.state.city}}</span>

注意：this.$store获取到store，store里面有一个state（公用数据）

4.点击修改数据，需要传入数据

5.在4操作对应的组件下面编写方法，需要使用dispatch派发一个changeCity的函数

methods: {

handleCityClick (city) {

this.$store.dispatch('changeCity', city)

}

6.在store文件夹下面的index.js文件中，在actions中编写传入的函数，如下修改

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

state: {

city: '上海'

actions: {

changeCity (ctx, city) {

ctx.commit('changeCity', city)

}

mutations: {

changeCity (state, city) {

state.city = city

}

})

场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车

十一、对keep-alive 的了解？

keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

在vue 2.1.0 版本之后，keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于include) 。

使用方法

<keep-alive include='include_components' exclude='exclude_components'>
  <component>
    <!-- 该组件是否缓存取决于include和exclude属性 -->
  </component>
</keep-alive>

参数解释
include - 字符串或正则表达式，只有名称匹配的组件会被缓存
exclude - 字符串或正则表达式，任何名称匹配的组件都不会被缓存
include 和 exclude 的属性允许组件有条件地缓存。二者都可以用“，”分隔字符串、正则表达式、数组。当使用正则或者是数组时，要记得使用v-bind 。

使用示例

<!-- 逗号分隔字符串，只有组件a与b被缓存。 -->
<keep-alive include="a,b">
  <component></component>
</keep-alive>

<!-- 正则表达式 (需要使用 v-bind，符合匹配规则的都会被缓存) -->
<keep-alive :include="/a|b/">
  <component></component>
</keep-alive>

<!-- Array (需要使用 v-bind，被包含的都会被缓存) -->
<keep-alive :include="['a', 'b']">
  <component></component>
</keep-alive>