vue面试必备知识点

jiezi

5 年前

MVVM 是 Model-View-ViewModel 的缩写
Model：代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑。我们可以把 Model 称为数据层，因为它仅仅关注数据本身，不关心任何行为
View：用户操作界面。当 ViewModel 对 Model 进行更新的时候，会通过数据绑定更新到 View
ViewModel：业务逻辑层，View 需要什么数据，ViewModel 要提供这个数据；View 有某些操作，ViewModel 就要响应这些操作，所以可以说它是 Model for View.
总结：MVVM 模式简化了界面与业务的依赖，解决了数据频繁更新。MVVM 在使用当中，利用双向绑定技术，使得 Model 变化时，ViewModel 会自动更新，而 ViewModel 变化时，View 也会自动变化。

v-model：一般用在表达输入，很轻松的实现表单控件和数据的双向绑定
v-html：更新元素的 innerHTML
v-show 与 v-if：条件渲染, 注意二者区别

使用了 v -if 的时候，如果值为 false，那么页面将不会有这个 html 标签生成。v-show 则是不管值为 true 还是 false，html 元素都会存在，只是 CSS 中的 display 显示或隐藏

v-on:click：可以简写为 @click,@绑定一个事件。如果事件触发了，就可以指定事件的处理函数
v-for：基于源数据多次渲染元素或模板块
v-bind：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

v-bind:title="msg"
:title="msg"

vue 生命周期总共分为 8 个阶段：创建前 / 后，载入前 / 后，更新前 / 后，销毁前 / 后。

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

vue.js 是采用数据劫持结合发布者 - 订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
具体实现步骤，感兴趣的可以看看:

当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 都加上 setter 和 getter 这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化
compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要做的事情是:1、在自身实例化时往属性订阅器 (dep) 里面添加自己；2、自身必须有一个 update()方法；3、待属性变动 dep.notice()通知时，能调用自身的 update()方法，并触发 Compile 中绑定的回调，则功成身退。
MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通过 Observer 来监听自己的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据 model 变更的双向绑定效果。

vue 实现数据双向绑定的原理就是用 Object.defineproperty()重新定义（set 方法）对象设置属性值和（get 方法）获取属性值的操纵来实现的。
Object.property()方法的解释：Object.property(参数 1，参数 2，参数 3) 返回值为该对象 obj。其中参数 1 为该对象（obj），参数 2 为要定义或修改的对象的属性名，参数 3 为属性描述符，属性描述符是一个对象，主要有两种形式：数据描述符和存取描述符。这两种对象只能选择一种使用，不能混合使用。而 get 和 set 属于存取描述符对象的属性。
这个方法会直接在一个对象上定义一个新属性或者修改对象上的现有属性，并返回该对象。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <div id="myapp">
        <input v-model="message" /><br>
        <span v-bind="message"></span>
    </div>
    <script type="text/javascript">
        var model = {message: ""};
        var models = myapp.querySelectorAll("[v-model=message]");
        for (var i = 0; i < models.length; i++) {models[i].onkeyup = function() {model[this.getAttribute("v-model")] = this.value;
            }
        }
        // 观察者模式 / 钩子函数
        // defineProperty 来定义一个对象的某个属性
        Object.defineProperty(model, "message", {set: function(newValue) {var binds = myapp.querySelectorAll("[v-bind=message]");
                for (var i = 0; i < binds.length; i++) {binds[i].innerHTML = newValue;
                };
                var models = myapp.querySelectorAll("[v-model=message]");
                for (var i = 0; i < models.length; i++) {models[i].value = newValue;
                };
                this.value = newValue;
            },
            get: function() {return this.value;}
        })
</script>
</body>
</html>

全局守卫
路由独享守卫
路由组件内的守卫

router.beforeEach 全局前置守卫进入路由之前
router.beforeResolve 全局解析守卫(2.5.0+) 在 beforeRouteEnter 调用之后调用
router.afterEach 全局后置钩子进入路由之后

使用方法:

 // main.js 入口文件
import router from './router'; // 引入路由
router.beforeEach((to, from, next) => {next();
});
router.beforeResolve((to, from, next) => {next();
});
router.afterEach((to, from) => {console.log('afterEach 全局后置钩子');
});

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => { 
        // 参数用法什么的都一样, 调用顺序在全局前置守卫后面，所以不会被全局守卫覆盖
        // ...
      }
    }
  ]
})

beforeRouteEnter 进入路由前, 在路由独享守卫后调用不能获取组件实例 this，组件实例还没被创建
beforeRouteUpdate (2.2) 路由复用同一个组件时, 在当前路由改变，但是该组件被复用时调用可以访问组件实例 this
beforeRouteLeave 离开当前路由时, 导航离开该组件的对应路由时调用，可以访问组件实例 this

hash 模式：
在浏览器中符号“#”，# 以及 #后面的字符称之为 hash，用 window.location.hash 读取；
特点：hash 虽然在 URL 中，但不被包括在 HTTP 请求中；用来指导浏览器动作，对服务端安全无用，hash 不会重加载页面。
hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.xiaogangzai.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 依赖的页面。”

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

// 父组件
<template>
    <child :msg="message"></child>
</template>

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

// 子组件
<template>
    <div>{{msg}}</div>
</template>

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

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

// 父组件 
<template>
    <child @msgFunc="func"></child>
</template>

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

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

<script>
export default {
    props: {
        msg: {
            type: String,
            required: true
        }
    },
    methods () {handleClick () {
            //........
            this.$emit('msgFunc');
        }
    }
}
</script>

非父子, 兄弟组件之间通信；vue2 中废弃了 $dispatch 和 $broadcast 广播和分发事件的方法。父子组件中可以用 props 和 $emit()。如何实现非父子组件间的通信，可以通过实例一个 vue 实例 Bus 作为媒介，要相互通信的兄弟组件之中，都引入 Bus，然后通过分别调用 Bus 事件触发和监听来实现通信和参数传递。

bus.js 可以是这样:

import Vue from 'vue'
export default new Vue()

在需要通信的组件都引入 Bus.js:

<template>
    <button @click="toBus"> 子组件传给兄弟组件 </button>
</template>

<script>
import Bus from '../common/js/bus.js'
export default{
    methods: {toBus () {Bus.$emit('on', '来自兄弟组件')
        }
    }
}
</script>

另一个组件也 import Bus.js 在钩子函数中监听 on 事件:

import Bus from '../common/js/bus.js'
export default {data() {
        return {message: ''}
    },
    mounted() {
       Bus.$on('on', msg => {this.message = msg})
    }
}

vuex 就是一个仓库，仓库里放了很多对象。其中 state 就是数据源存放地，对应于一般 vue 对象里面的 data。
state 里面存放的数据是响应式的，vue 组件从 store 读取数据，若是 store 中的数据发生改变，依赖这相数据的组件也会发生更新，它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性。

Vuex 有 5 种属性: 分别是 state、getter、mutation、action、module;

state
Vuex 使用单一状态树, 即每个应用将仅仅包含一个 store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。
mutations
mutations 定义的方法动态修改 Vuex 的 store 中的状态或数据。
getters
类似 vue 的计算属性，主要用来过滤一些数据。
action
actions 可以理解为通过将 mutations 里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。

vuex 一般用于中大型 web 单页应用中对应用的状态进行管理，对于一些组件间关系较为简单的小型应用，使用 vuex 的必要性不是很大，因为完全可以用组件 prop 属性或者事件来完成父子组件之间的通信，vuex 更多地用于解决跨组件通信以及作为数据中心集中式存储数据。

使用 Vuex 解决非父子组件之间通信问题，vuex 是通过将 state 作为数据中心、各个组件共享 state 实现跨组件通信的，此时的数据完全独立于组件，因此将组件间共享的数据置于 State 中能有效解决多层级组件嵌套的跨组件通信问题。
vuex 作为数据存储中心，vuex 的 State 在单页应用的开发中本身具有一个“数据库”的作用，可以将组件中用到的数据存储在 State 中，并在 Action 中封装数据读写的逻辑。这时候存在一个问题，一般什么样的数据会放在 State 中呢？目前主要有两种数据会使用 vuex 进行管理：1、组件之间全局共享的数据；2、通过后端异步请求的数据。比如做加入购物车、登录状态等都可以使用 Vuex 来管理数据状态。

vue面试必备知识点

对于 MVVM 的理解

开发中常用的指令有哪些

请详细说下你对 vue 生命周期的理解

Vue 的双向数据绑定原理是什么

vue-router 有哪几种导航守卫?

1、全局守卫，主要有三个：

2、路由独享守卫（如果你不想全局配置守卫的话，你可以为某些路由单独配置守卫）

3、路由组件内的守卫

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

组件之间的传值通信

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