vue @click 赋值_前端面试准备---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模式的框架

Vue数据双向绑定

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

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

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

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

• 发布-订阅模式：

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

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

1. 整个发布订阅模式就像一个平台，让用户可以发生订阅和发布的操作，也就类似于微信公众号平台
2. 订阅者可以订阅多个操作，就像我们可以订阅多个公众号一样，但是需要提供给平台我们要订阅的名称，以及订阅者自己的一些信息。
3. 作为发布者，其实就像一个公众号，他不关心具体的订阅者是谁，只要订阅了的用户都会收到发布的信息。整个发布操作需要告知平台，是哪个公众号需要发布，发布什么信息。
4. 订阅者还可以取消订阅，那么平台需要知道，发起取消订阅的用户是哪个，还有取消的公众号的名称是什么。

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

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

SubPub.prototype = {
    
    // 订阅函数，需要提供我要订阅的公众号名称，以及自己的姓名
    subscribe: function(type, callback) {
    
        const self = this;
        if(Type(callback) !== '