最简vue.js原理教程，适合初学者

标签：function 最简 vue js Vue let key Model data

1.我们要做什么？

早就想写这个了，和csdn高校俱乐部约好了有个直播，想着反正要备课，我不如直接把要讲的东西写成博客算了。

说到vue，我们自然就想到数据绑定。

说到数据绑定，自然就想到MVVM。

最简vue.js原理教程，适合初学者_vue.js

什么是MVVM呢，大家可以看下上面这张图。

MVVM采用了双向数据绑定的思想，基本可以分为三层：

M(Model,模型层)，负责业务数据相关，比如vue里面的data就是典型的Model。
V(View,视图层)，视图相关，展示给用户的交互界面，同时捕获用户的操作，我们可以理解为页面的DOM元素。
VM(ViewModel, V与M连接的桥梁，也可以看做控制器)。在Vue中，Vue从一开始就利用ViewModel与view，model进行交互。

最简vue.js原理教程，适合初学者_javascript_02

Vue在实例化的时候，我们一般会写这样的代码：

var vm = new Vue({
    
    /** 需要被vue控制的根元素ID * */
    el: 'app' ,     

    /** Model模型层 * */
    data: {
        username: 'jack',
        password: '123456'
    }
});

这段代码展示了Vue实例化的过程，当你写完这段代码，其实Vue内部已经完成了ViewModel的创建，ViewModel的作用就是连接Model（模型层）和View（视图层），它是一个桥梁。

让我们引用《三分钟手写一个迷你jQuery，附源码》的页面代码：

<input id="username" placeholder="请输入用户名" autocomplete="off"> <span id="username2"></span> 
<br>
<input id="password" placeholder="请输入密码" autocomplete="off"> <span id="password2"></span>

页面效果：

最简vue.js原理教程，适合初学者_数据_03

在上一节中，我们用迷你jQuery完成的功能，这一节需要用MVVM的思想来重做一遍，即在输入框右边同步显示左边输入框的值。

最简vue.js原理教程，适合初学者_数据_04

MVVM用的是 数据驱动页面 的思想，当前端页面足够复杂，其效率和可维护性都是远远大于jQuery的，这也是jQuery没落的原因。哦不，我们应该说jQuery光荣地完成了自己的历史使命！

怎么叫数据驱动页面呢？比如这个例子，当我们修改data中的值，页面上span的innerHTML就会同步变化。即数据变了，DOM也跟着变了。

最简vue.js原理教程，适合初学者_前端_05

对应图中的这个过程：

最简vue.js原理教程，适合初学者_vue.js_06

看到这里，有人看你会疑惑，这不是单向绑定么，vue.js不是号称双向数据绑定吗？哈哈，不要着急吗，vue自然是双向数据绑定的。还是这个例子，当我们修改input框的value，就会触发监听（input事件），从而导致Model层的对应数据发生变化。

对应图中的这个过程：

最简vue.js原理教程，适合初学者_javascript_07

好了，接下来我们再明确一下，我们需要做什么？那就是，完成VM的逻辑。vue.js其实最主要的，就是完成ViewModel。

2.Vue是一个函数

为了尽快实现VM的逻辑，我故意省去了vue中一些复杂的部分，看到这里，你只需要记住，Vue是一个函数。

ViewModel在Vue中，我们可以这样理解，它就是Vue里面的两个阶段而已，分别为初始化阶段和编译阶段。

所以，我们在编写Vue这个函数的时候，就要完成这两个阶段。

function Vue(){
    this.init();        //初始化
    this.compile();     //编译
}

在函数里面，我们竟然看到了this，这个在《JavaScript百炼成仙》的函数七重关有讲过，这说明我们如果要使用这个函数，就得把它new出来。

init方法和compile方法是这个函数的两个实例方法。

关于创建函数的实例方法，这边我们介绍一个新的方式，那就是用prototype。

prototype很迷惑，你可以这样理解它：prototype是函数的一个公共未来对象！

只要这个函数将来在什么地方被new了，prototype有的，那个实例一定有！

所以，我们这样写

Vue.prototype.init = function(){
    console.log('所有的Model数据，都被我劫持了！');
}

Vue.prototype.compile = function(){
    console.log('页面所有的DOM，都被我窃听了！');
}

怎么用？

这么用：

var vm = new Vue({
    
    /** 需要被vue控制的根元素ID * */
    el: 'app' ,     

    /** Model数据层 * */
    data: {
        username: 'jack',
        password: '123456'
    }
});

效果：

最简vue.js原理教程，适合初学者_vue.js_08

我在init方法和compile方法中都打印了可爱的语句，现在你不妨猜一猜这两个阶段分别干了什么，对应下面这张图的哪两个部分？

最简vue.js原理教程，适合初学者_jquery_09

大家开动脑筋，猜一猜呢。

3.初始化阶段

init：所有的Model数据，都被我劫持了！

init函数劫持了Model中所有的数据，当Model中数据发生了set操作，就自动去更新页面。所有，init起到的作用就是 M -> VM -> V

好了，我要劫持数据，那么请问，数据从哪来？

答：Vue函数的参数传进来，哈哈。

function Vue(options){

    /** Model层 * */
    this.$data = options.data;
    
    this.init(); 
    this.compile(); 
}

$data是啥，不就是这个：

/** Model数据层 * */
data: {
    username: 'jack',
    password: '123456'
}

ok，怎么遍历呢？

答：还记得《JavaScript百炼成仙》中叶老教授叶小凡如何遍历对象的法术么？

看代码：

for(let key in this.$data){
    
}

这段代码是写在init函数里面的，因为是实例方法，它可以直接调用Vue中的实例对象$data。

怎么劫持？

答：用Object.defineProperty，这个方法的意思就是对某个对象的某个key进行劫持。

for(let key in this.$data){
    Object.defineProperty(this.$data,key,{
        get:function(){
            return this.$data[key];
        },
        set:function(newVal){
            this.$data[key] = newVal;
        }
    })
}

嗯，代码还未写完，毕竟如果就这么点东西，那还劫持个锤子！

我们希望看到的是，当data的某个key发生变化，就去更新DOM。怎么更新呢？再来看下这个图：

最简vue.js原理教程，适合初学者_javascript_10

从图中可以看到，假如username改变了，页面上有两个地方要变。那我凭什么知道是这两个要变呢？

答：因为vue指令（其实就是元素的属性）

代码如下，我们去掉了id，毕竟不用jQuery那一套了，改成v-model和v-bind：

<div id="app">
    <input v-model="username" placeholder="请输入用户名" autocomplete="off"> 
    <span  v-bind="username"></span>     <br>
    <input v-model="password" placeholder="请输入密码" autocomplete="off"> 
    <span  v-bind="password"></span>
</div>

到这一步，我们发现一个username可能有2个指令（甚至更多），所以需要给每一个key配置一个指令集，用数组比较合适。

function Vue(options){

    ...

    /** 用来给每一个Model属性配置指令集 * */
    this.$bindings = {}

    ...
}

遍历Model属性的时候，初始化指令集

let _this = this;
for(let key in _this.$data){

    _this.$bindings[key] = {
        directions: []
    }
    
}

最后，在set的时候，去遍历所有指令，更新DOM

let value = _this.$data[key]; 
Object.defineProperty(_this.$data,key,{
    get:function(){
        return value;
    },
    set:function(newVal){
        value = newVal;
        /** 更新DOM * */
        _this.$bindings[key].directions.forEach(watcher => {
            watcher.update();
        });
    }
})

这边我们用了forEach，watcher是数组中的某一个对象，它有一个update方法，目的在于更新DOM元素。上面的代码还有一个小技巧，就是要把_this.$data[key]单独放到上面用value存起来，不然会有循环调用的问题。

演示循环调用：

Object.defineProperty(_this.$data,key,{
    get:function(){
        return _this.$data[key];
    },
    ...
})

因为_this.$data[key]会触发get函数，所以产生了循环调用，直接给你报错：

最简vue.js原理教程，适合初学者_数据_11

可是我们只要在外面用value锁住 _this.$data[key]就不会有这个问题了。（emmm......很眼熟是不是，这也算是闭包的一种，即用函数锁住变量）

然后是watcher，_this.$bindings[key].directions中我们会放置很多Watcher对象，这是一个专门用来更新DOM的对象。

Watcher代码如下：

/** 口诀：什么DOM的什么 = 某个Model属性的值* */
function Watcher(dom,expression,vm,dataKey){
    this.dom = dom;
    this.expression = expression;
    this.vm = vm;
    this.dataKey = dataKey;
    this.update();
}

Watcher.prototype.update = function(){
    this.dom[this.expression] =  this.vm.$data[this.dataKey];
}

至此，init函数开发完毕，可能有的同学会问，这弄了半天，DOM的指令怎么和Model绑定呢？别急，这就是下一步【编译阶段】该做的事情。

4. 编译阶段

编译阶段要做的事情很简单，就是根据el（你传进来的根节点元素），遍历所有的子节点（为了简单我们不做递归），挨个检查vue支持的指令，如果找到了，就将这个元素与Model进行绑定。

function Vue(options){

    /** 根节点 * */
    this.$el = document.getElementById(options.el);

    ...
}

上面的代码是获取根节点的DOM对象，然后是具体的编译函数：

Vue.prototype.compile = function(){
    let _this = this;
    let nodes = this.$el.children;
    for (let i = 0; i < nodes.length; i++) {
        let node = nodes[i];

        if(node.hasAttribute('v-model')){
            let dataKey = node.getAttribute('v-model');
            /** 如果是v-model指令，就监听DOM的input事件 * */
            node.addEventListener('input',function(){
                /** 更新Model * */
                _this.$data[dataKey] = node.value; 
            });
                /** 添加watcher * */
                _this.$bindings[dataKey].directions.push(new Watcher(
                    node,
                    'value',
                    _this,
                    dataKey
                ));
        }else if(node.hasAttribute('v-bind')){
            /** 如果是v-bind指令，只需要添加watcher即可 * */
            let dataKey = node.getAttribute('v-bind');
            _this.$bindings[dataKey].directions.push(new Watcher(
                    node,
                    'innerHTML',
                    _this,
                    dataKey
                ));
        }
    }
}

5.成果展示

刷新页面，会看到这个效果：

最简vue.js原理教程，适合初学者_vue.js_12

当我们随便修改input框的值，右边会产生联动效果，很有趣，建议自己把代码撸一遍尝试一下。

6. 一定要用let，不要用var

用var最大的问题就是变量提升，比如init方法中，假如我们把这个地方改成var

最简vue.js原理教程，适合初学者_jquery_13

你猜会发生什么？这个我在书里写过，可以根据抽象语法树去判断，当你运行这个函数时，var定义的变量会自动提升到顶端，其实是这样的。

最简vue.js原理教程，适合初学者_前端_14

这就会导致我们去使用的时候，value已经变成循环的最后一个了，效果如图：

最简vue.js原理教程，适合初学者_前端_15

当data的循环结束，value因为变量提升就自动变成了123456，导致data中所有属性get方法都受到了影响！

get:function(){
    return value;
},

value就变成123456了，不管是哪个key。

这与我们预期的效果相悖，虽然可以用闭包来解决这个问题，但是代码会变得很复杂。所以，我们尽量要使用let，不要用var了。

7. 完整代码，可直接运行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
        <input v-model="username" placeholder="请输入用户名" autocomplete="off"> 
        <span  v-bind="username"></span>     <br>
        <input v-model="password" placeholder="请输入密码" autocomplete="off"> 
        <span  v-bind="password"></span>
    </div>   

    <script>

        function Vue(options){

            /** 根节点 * */
            this.$el = document.getElementById(options.el);

            /** Model层 * */
            this.$data = options.data;

            /** 用来给每一个Model属性配置指令集 * */
            this.$bindings = {}

            this.init(); 
            this.compile(); 
        }

        Vue.prototype.compile = function(){
            let _this = this;
            let nodes = this.$el.children;
            for (let i = 0; i < nodes.length; i++) {
                let node = nodes[i];

                if(node.hasAttribute('v-model')){
                    let dataKey = node.getAttribute('v-model');
                    /** 如果是v-model指令，就监听DOM的input事件 * */
                    node.addEventListener('input',function(){
                        /** 更新Model * */
                        _this.$data[dataKey] = node.value; 
                    });
                        /** 添加watcher * */
                        _this.$bindings[dataKey].directions.push(new Watcher(
                            node,
                            'value',
                            _this,
                            dataKey
                        ));
                }else if(node.hasAttribute('v-bind')){
                    /** 如果是v-bind指令，只需要添加watcher即可 * */
                    let dataKey = node.getAttribute('v-bind');
                    _this.$bindings[dataKey].directions.push(new Watcher(
                            node,
                            'innerHTML',
                            _this,
                            dataKey
                        ));
                }
            }
        }

        Vue.prototype.init = function(){

            let _this = this;
            for(let key in _this.$data){

                _this.$bindings[key] = {
                    directions: []
                }
                let value = _this.$data[key]; 
                Object.defineProperty(_this.$data,key,{
                    get:function(){
                        return value;
                    },
                    set:function(newVal){
                        value = newVal;
                        /** 更新DOM * */
                        _this.$bindings[key].directions.forEach(watcher => {
                            watcher.update();
                        });
                    }
                })
            }
            //console.log('所有的Model数据，都被我劫持了！');
        }



        /** 口诀：什么DOM的什么 = 某个Model属性的值* */
        function Watcher(dom,expression,vm,dataKey){
            this.dom = dom;
            this.expression = expression;
            this.vm = vm;
            this.dataKey = dataKey;
            this.update();
        }

        Watcher.prototype.update = function(){
            this.dom[this.expression] =  this.vm.$data[this.dataKey];
        }

        let vm = new Vue({
            
            /** 需要被vue控制的根元素ID * */
            el: 'app' ,     

            /** Model数据层 * */
            data: {
                username: 'jack',
                password: '123456'
            }
        });


    </script>
    
</body>
</html>

这可能是全网最易懂的Vue原理教程了吧，喜欢的话给兔子来个一键三连哦，哈哈。

标签：function,最简,vue,js,Vue,let,key,Model,data
From： https://blog.51cto.com/u_10957019/5809012