vue源码分析（八）：双向数据绑定v-model

有了前面的基础，v-model其实很容易实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>{{name}}</p>
    <input type="text" v-model="name" />
</div>
</body>
</html>
<script src="./myvue.js"></script>

<script>
    const vm = new Vue({
        el:'#app',
        data:{
            name:'jack',
        }
    })

</script>

实现思路：
1、解析element的属性节点（v-model="name"）

if(dir.indexOf('model') === 0){
    ...
}

2、将input的value设置为vm.data里面的name值

if(dir.indexOf('model') === 0){

    node.value = this.getVMVal(exp) //exp就是name
}

3、增加input事件监听，当获取了e.target.value新值时，修改vm.data.name。

if(dir.indexOf('model') === 0){
                    //双向数据绑定
                    //1.将input的value设置为当前data的name值
                    node.value = this.getVMVal(exp)
                    //2.绑定input事件
                    node.addEventListener('input',(e)=>{
                        var newval = e.target.value;
                        //修改data的name值
                        this.$vm._data[exp] = newval
                    },false)
                }

4、增加watcher监听。
这个是容易被忽视的地方。
因为双向数据绑定是model和view双向的，通过第三步addEventListener可实现view->model；而model->view的过程，我们还需要增加数据监听watcher，只是初始化时设置input输入框的value是不够的。

new Watcher(this.$vm,exp,(newVal,oldVal)=>{
        console.log('执行回调函数',newVal,oldVal)
        node.value = newVal

})

5、完整代码。

function Vue(options){
    this.$options = options
    var data = this._data = this.$options.data
    //数据代理
    Object.keys(data).forEach(key=>{
        this._proxy(key)
    })

    //数据劫持
    observe(data)

    //模板解析
    this.$compile = new Compile(options.el,this) //模板解析
}
Vue.prototype = {
    _proxy(key){
        Object.defineProperty(this,key,{
            configurable:false,
            enumerable:true,
            get(){
                return this._data[key]
            },
            set(newVal){
                this._data[key] = newVal
            }
        })
    }
}

function Compile(el,vm){
    this.$vm = vm
    this.$el = document.querySelector(el)

    if(this.$el){
        this.$fragment = this.node2Fragment(this.$el) //将节点转到fragment处理

        this.init() //开始处理

        this.$el.appendChild(this.$fragment) //塞回原位
    }
}
Compile.prototype = {
    //将#app里面的节点都转到文档碎片中
    node2Fragment(el){
        var fragment = document.createDocumentFragment()
        var child = null
        while(child = el.firstChild) {
            fragment.appendChild(child)
        }
        return fragment
    },
    //处理碎片中的信息
    init(){
        this.compileElement(this.$fragment)
    },
    //正则匹配
    compileElement(el){
        var childNodes = el.childNodes;
        [].slice.call(childNodes).forEach(node=>{
            var text = node.textContent // 获取文本信息
            var reg = /\{\{(.*)\}\}/
            //这里增加指令的处理
            if(node.nodeType === 1){
                //如果是元素节点
                this.compile(node)
            } else if(node.nodeType === 3 && reg.test(text)) {

                this.compileText(node,RegExp.$1) //更新视图动作


                //订阅更新视图函数
                /*
                dep.register(RegExp.$1,()=>{ //注册的是key是a.b
                    //如果data发生了变化，需要再次调用this.compileText这个函数来更新视图
                    this.compileText(node,RegExp.$1)
                })
                */

                //引入watcher对象
                new Watcher(this.$vm,RegExp.$1,(newVal,oldVal)=>{ //this.cb.call(this.vm,newVal,oldVal)//更新视图操作
                    if(newVal !== oldVal) {

                        node.textContent = newVal //更新为最新值
                    }
                })



            }
            if(node.childNodes && node.childNodes.length) {
                //递归
                this.compileElement(node)
            }
        })
    },
    //处理元素节点
    compile(node){
        var nodeAttrs = node.attributes; // 获取元素节点的所有属性，伪数组
        [].slice.call(nodeAttrs).forEach(attr=>{
            var attrName = attr.name;//获取属性名
            if(attrName.indexOf('v-') === 0){//判断是否是指令
                var exp = attr.value; //获取属性值，也就是触发的方法名
                var dir = attrName.substring(2) // 截取字符串,得到on:click
                if(dir.indexOf('on') === 0){ //判断事件指令
                    var eventType = dir.split(':')[1]; //获取事件类型
                    var fn = this.$vm.$options.methods && this.$vm.$options.methods[exp];// 获取函数
                    if(eventType && fn) {
                        node.addEventListener(eventType,fn.bind(this.$vm),false) // 注意fn里面的this指向
                    }



                } else if(dir.indexOf('bind') === 0) { // 一般指令
                    var dirType = dir.split(':')[1] // 获取指令类型class
                    if(dirType === 'class') {
                        var oldClassName = node.className; //原来的class类
                        var newClassName = '' //动态class类
                        var classObj = eval('(' + exp + ')'); //解析为object对象

                        for(var key in classObj) { //遍历对象，如果value为true追加class名，false不追加
                            if(classObj[key]) {
                                newClassName += ' ' + key
                            }
                        }
                        node.className = oldClassName + newClassName // 设置className
                    }

                } else if(dir.indexOf('model') === 0){ //1.捕获v-model的值
                    //双向数据绑定
                    //2.将input的value设置为当前data的name值
                    node.value = this.getVMVal(exp)

                    //3.绑定input事件
                    node.addEventListener('input',(e)=>{
                        var newval = e.target.value;
                        //修改data的name值
                        this.$vm._data[exp] = newval
                    },false)
                     //4.增加监听
                    new Watcher(this.$vm,exp,(newVal,oldVal)=>{
                        console.log('执行回调函数',newVal,oldVal)
                        node.value = newVal

                    })
                }
                node.removeAttribute(attrName) // 从chrome控制台的Elements看文档结构，发现没有v-这样的属性（指令），所以需要处理完去掉
            }
        })

    },
//用vm.data信息，替换大括号的name
    compileText(node,exp){
        node.textContent = this.getVMVal(exp)
    },
//处理层级问题
    getVMVal(exp){ // a.b.c
        var val = this.$vm._data
        if(exp.indexOf('.') !== -1) {
            var arr = exp.split('.') //["a", "b", "c"]
            arr.forEach(k=>{
                //debugger
                val = val[k] // 层级递进
            })
            return val
        } else {
            return val[exp]
        }

    }
}

//新增部分
function observe(data){
    //对data进行defineProperty处理，嵌套的数据要用递归
    if(!data || typeof data!=='object'){//递归的退出条件
        return;
    }

    Object.keys(data).forEach(key=>{
        defineReactive(data,key,data[key])//对data里面的每一个key进行定义
    })

}

function defineReactive(data,key,val){
    var dep = new Dep()
    observe(val)//先执行递归，确保嵌套对象的key都可以被定义
    Object.defineProperty(data,key,{
        enumerable:true,
        configurable:false,
        get(){
            console.log('get操作：',key,'===>',val)
            /*
            dep.register(key,()=>{
                console.log('更新操作')
            })
             */
            if(Dep.target) { //如果Dep.target有了Watcher，就存入到dep的容器里面
                dep.register(Dep.target)
            }
            return val
        },
        set(newVal){
            console.log('set操作：',key,'===>',newVal)
            val = newVal //修改为最新值
            //触发更新视图函数
            dep.emit(key) // 这里的key是b，而不是a.b
        }
    })
}
//引入Watcher
function Watcher(vm,exp,cb){
    this.vm = vm; //vue对象
    this.exp = exp; //正则匹配的大括号表达式
    this.cb = cb; // 回调函数，也就是待执行的更新视图操作
    this.value = this.getValue() //在初始化的时候调用，触发defineProperty里面的get
}
Watcher.prototype.getValue = function(){
    Dep.target = this //Dep.target是一个临时变量
    var newVal = this.getVMVal()
    Dep.target = null
    return newVal
}

Watcher.prototype.getVMVal = function(){
    var val = this.vm._data
    if(this.exp.indexOf('.') !== -1) {
        var arr = this.exp.split('.') //["a", "b", "c"]
        arr.forEach(k=>{
            //debugger
            val = val[k] // 层级递进
        })
        return val
    } else {
        return val[this.exp]
    }

}

Watcher.prototype.update = function(){
    //获取新值
    let newVal = this.getValue()//这里会触发defineProperty的get
    let oldVal = this.value
    if(newVal !== oldVal){
        this.value = newVal
        this.cb.call(this.vm,newVal,oldVal)//更新视图操作
    }

}

//引入观察订阅模式
function Dep(){
    this.subs = [] //容器，
}
Dep.prototype.register = function (obj) {

    if(Dep.target){
        this.subs.push(obj) //丢入容器的是Watcher对象，在Watcher实例化的时候丢入
    }
}

Dep.prototype.emit = function () {

    this.subs.forEach(obj=>{ //将容器中的Watcher对象遍历，顺序执行
        obj.update()
    })

}

最后做一下测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>{{name}}</p>
    <input type="text" v-model="name" />
    <button v-on:click="changeName">修改</button>
</div>
</body>
</html>
<script src="./myvue.js"></script>

<script>
    const vm = new Vue({
        el:'#app',
        data:{
            name:'jack',
        },
        methods:{
            changeName(){
                this.name = 'tom'
            }
        }
    })

</script>

大家可以屏蔽一下第四步试试，当点击按钮修改了name，input输入框的value是无法更新的。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 214,658评论 6赞 496
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,482评论 3赞 389
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,213评论 0赞 350
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,395评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,487评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,523评论 1赞 293
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,525评论 3赞 414
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,300评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,753评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,048评论 2赞 330
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,223评论 1赞 343
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,905评论 5赞 338
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,541评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,168评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,417评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,094评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,088评论 2赞 352