前端面试准备---Vue篇

时间 2019-11-06

标签前端面试准备 vue 栏目快乐工作繁體版

原文原文链接

本文主要从下边几个方面复习Vue知识点：

1. MVC && MVVM  
2. 数据双向绑定
3. Vue的生命周期
4. 虚拟dom的实现原理
5. vue-router
6. Proxy
7. vuex复制代码

MVC && MVVM

M -- model层，表明数据模型

V -- view层，表明视图层，UI展现

C -- control层，控制层，处理复杂的业务逻辑

VM-- viewModel层，一个同步view和model的对象，其实能够理解为数据双向绑定

Vue就是一种MVVM模式的框架

v-show、v-if的实现原理

v-show为false时，经过js设置display为none;为true时，设置display:''; 这样为了让js设置的display属性失效。javascript

v-if是经过js手动添加或删除dom元素。vue

组件间通讯

组件间通讯总共分为一下几种：java

一、父 --> 子：es6

父元素用属性的格式传进来，子元素用props属性接收；算法

// 父元素
<editor :name='data'></editor>

// 子元素
props: {
    name: {
        type: Object,
        defalut: function(){
        
        }
    }
}

复制代码

二、子 --> 父：vue-router

在父组件绑定一个事件，自组件用$emit出发事件vuex

三、兄弟组件：数组

四、组件嵌套比较深的时候：vuex浏览器

Vue数据双向绑定

所谓数据双向绑定，就是指视图层和数据层相互影响，好比input框输入数据，存储的数据发生相应的变化；当给存储数据的数据从新赋值时，input框的值也会变。

实现双向数据绑定主要是经过数据劫持+发布订阅者模式，劫持各个属性的set和get，在数据发生变化的时候发布给订阅者，触发相应的回调。

真正靠的是Object.defineProperty这个属性

说到这个原理，能够先来了解一下发布-订阅模式。

发布-订阅模式：

开始我对这个模式也有点不理解，可是看到这个文章的一个比喻瞬间就理解了。

其实这个发布订阅模式就跟平时咱们常见的订阅微信公众号的模式是同样的。

整个发布订阅模式就像一个平台，让用户能够发生订阅和发布的操做，也就相似于微信公众号平台
订阅者能够订阅多个操做，就像咱们能够订阅多个公众号同样，可是须要提供给平台咱们要订阅的名称，以及订阅者本身的一些信息。
做为发布者，其实就像一个公众号，他不关心具体的订阅者是谁，只要订阅了的用户都会收到发布的信息。整个发布操做须要告知平台，是哪一个公众号须要发布，发布什么信息。
订阅者还能够取消订阅，那么平台须要知道，发起取消订阅的用户是哪一个，还有取消的公众号的名称是什么。

那么一个简单的发布订阅模式就造成了，下边话很少说，直接上代码：

const SubPub = function() {
    // 用Object格式，能够经过value存储订阅者的一些信息
    // 订阅器 --- 相似于微信公众号这个平台，每个元素相似于一个公众号，key值为公众号的名字，value值记录订阅公众号的人；
    this._observer = {};
}

SubPub.prototype = {
    // 订阅函数，须要提供我要订阅的公众号名称，以及本身的姓名
    subscribe: function(type, callback) {
        const self = this;
        if(Type(callback) !== 'function') return;
        if(!self._observer[type]) this._observer[type] = []
        this._observer[type].push(callback);
        return self;
    },
    // 发布函数，须要提供哪一个公众号须要发布信息，以及发布的内容；
    publish: function() {
        const self = this;
        const type = Array.prototype.shift.call(arguments); // 由于arguments不是数组，是一种类数组类型，因此没有shift、slice这些方法
        //发布的内容
        const theme = Array.prototype.slice.call(arguments);
        const subs  = self._observer[type];
        if(!subs || !subs.length) return;

        subs.forEach(sub => {
            sub.apply(self, theme);
        });
        return this;
    },
    // 取消订阅，须要提供取消公众号的名字，和发起该取消操做的用户
    removeSub: function(type, callback) {
        const _subs = this._observer[type];
        if(!_subs || !_subs.length) return;
        _subs.map((item, index) => {
            if(item === callback) {
                _subs.splice(index, 1);
            }
        })
        
        return this;
    }
}

function Type(value) {
    return Object.prototype.toString.call(value).slice(8, -1).toLowerCase();
}

// 实例一个发布订阅器
let sp = new SubPub();
// 定义订阅者
const sub1 = function(data) {
    console.log('sub1' + data);
}

const sub2 = function(data) {
    console.log('sub2' + data);
}

const sub3 = function(data) {
    console.log('sub3' + data);
}
// 发起订阅操做
sp.subscribe('click', sub1);
sp.subscribe('input',sub1);
sp.subscribe('qqq',sub1);

sp.subscribe('click', sub2);

sp.subscribe('input', sub3);

// 开启发布
sp.publish('click', '第一次发布click事件');
sp.publish('input', '第一次发布input事件');

sp.removeSub('click', sub1).publish('click', '第二次发布click事件');复制代码

Object.defineProperty的使用方法

接下来看一下Object.defineProperty的使用方法。

let obj = {};
let song = '七里香';
obj.singer = 'JayZhou';
Object.defineProperty(obj, 'music', {
    configurable: true, // 能够配置对象, 为true的时候才能够删除属性
    enumerable: false, // 是否可枚举
    get () {
        return song;
    },
    set (val) {
        song = val;
    }
});

console.log(obj.music); // {singer: '周杰伦', music: '七里香'}

obj.music = '听妈妈的话';
console.log(obj.music);

delete obj.music
console.log(obj);

for(var i in obj) {
    console.log(i); // 只有singer 由于music是不可枚举的
}复制代码

缺点：

没法监听数组变化

Vue的MVVM模式实现原理：

observe：一个数据监听器，对数据对象的全部属性，包括子属性进行监听，若是发生变化，拿到最新值并通知订阅者
compile：一个指令解析器，对每一个元素的节点指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的函数
watcher: 一个订阅者，它将做为链接数据监听器和指令解析器的一个桥梁。可以订阅每一个属性的数据变化，收到数据变化的通知，执行回调函数，更新UI页面
Mvvm的入口函数，将三者整合

Vue的生命周期

vue的生命周期是指的从建立 --> 挂载 --> 更新 --> 销毁的过程。

总共分为8个步骤：

beforeCreate, created,

beforeMount, mounted,

beforeUpdate, updated,

beforeDestroy, destroyed

Vue虚拟DOM

所谓虚拟DOM，就是一个JS对象，用来存储DOM树结构。

过程：

建立dom树
利用diff算法进行对比，存储差别patches对象，按下边四种格式

节点类型改变
属性改变
文本改变
增长/移动/删除子节点

3. 渲染差别

遍历patches，把须要修改的节点取出来
局部更新dom，利用document.fragments来操做dom，进行浏览器一次性更新。

document.fragment:

是DOM节点，不是主DOM树的一部分。

一般用来建立文档片断，将元素附加到文档片断中，而后将文档片断附加到DOM树中。因为文档片断存在内存中，不在DOM树中，因此插入子元素的时候不会引起浏览器回流，因此性能更好

nextTick

用于执行dom渲染以后的回调，新版本默认是microtasks

vue-router

模式：hash、history

跳转方式：

this.$router.push()
<router-link to=''></router-link>
this.$router.replace()

占位：

<router-view></router-view>

默认状况下是hash模式，history须要后台配置，利用Html5的History API实现的，监听change变化。缓存

router和route的区别：

$router：是VueRouter的一个实例，是一个全局的对象，主要实现路由的跳转使用。经常使用的router.push()和router.replace()方法。

push方法会像浏览器的history栈添加一个新纪录。

replace替换路由，没有历史记录。

route：是一个路由信息对象，每个路由都有一个route对象，是一个局部对象。能够获取name、query、params、path等参数。

Proxy

定义：来自 MDN的定义：用于定义基本操做的自定义行为（如：属性查找、赋值、枚举、函数调用等）；

另外阮一峰解释的比较容易理解：在目标对象以前架设一层拦截，外界对象对该对象的访问，都必须先经过这层拦截，所以提供了一种机制，能够对外界的访问进行过滤和改写。

语法：

let p = new Proxy(target, handler);复制代码

简单例子：

var proxy = new Proxy({}, {
    get: function(target, key, receiver) {
        console.log(`get ${key}`);
        return Reflect.get(target, key, receiver);
    },
    set: function(target, key, value, receiver) {
        console.log(`set ${key}`);
        return Reflect.set(target, key, value, receiver);
    }
});

proxy.name = 'jack'; 
// set name
console.log(proxy.name);
// get name
// jack复制代码

上边的例子是对一个空对象进行了拦截。

Vue3.0中要用Proxy代替defineProperty。proxy不管是从操做上仍是底层功能上远强于defineProperty。

优势：

能够监听数组的变化，这个是defineProperty作不到的
直接监听对象，而不是对象的属性，并且会生成一个新对象

Vuex

什么是Vuex?

Vuex是vue的状态管理工具，采用集中存储全部组件的状态，并以相应的规则保证状态以一种能够预测的方式发生变化

Vuex的核心属性：

Vuex有五个核心属性：state、getter、mutation、action、module

State：存储数据状态；能够经过this.$store.state访问；对应vue里的data；存放数据的方式是响应式的，vue组件能够从store中读取数据，若是数据变化，组件也会发生相应的更新。
Getter：就至关于store的计算属性，他的返回值会根据他的依赖被缓存起来，且只有当它的依赖发生改变的时候才会被从新计算。
Mutation：更改vuex的store的惟一方法就是提交mutation
Action：包含任意异步操做，经过提交mutation间接改变状态。
Module：将store分割成模块，每一个模块都具有上边四种方法，甚至子模块

vuex数据传递流程

当组件进行数据修改时，调用dispatch来触发action里边的方法；
每一个action里边都有一个commit方法，能够经过commit来修改mutations里边的方法进行数据修改
mutation中都会有一个state参数，这样能够经过mutation修改了state数据
数据修改完毕以后，页面发生改变

为何用vuex?

当组件多层嵌套的时候，父子组件传递数据很麻烦。
增长代码的可读性和可维护性
数据是响应式的，减小数据的派发操做；