带你深入了解vue中的v-model！

你了解v-model吗？下面本篇文章给大家介绍一下vue中的v-model，带你深入了解v-model，希望对大家有所帮助。

首先，要明白我们学习v-model的作用是什么

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突  ---这是在vue官网找到的解答。

其次，是我们要知道v-model的本质以及他的实现原理是什么

在我看来v-model本身就是一个语法糖，实际上就是给我们提供了一个vue的内置指令，通过这样的方式既简化了我们的代码也能让我们明白这个命令应该怎么去使用

使用v-model指令能够让我们直接获取到我们在input框里面输入的内容，将输入的内容保存到我们的data数据里面，当input的value值发生改变的时候就会自动更新data数据同时也会使相应的视图进行更新渲染。

  4ae1b9b73bb9fd069ae677814d0f3379
    e388a4556c0f65e1904146cc1a846bee{{model}}94b3e26ee717c64999d7867364b1b4a3
    faab7cf4732679d82225f6370c8a89c7
    919ba4bf0b75b61e7d08fad28b8ffb10 
  16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
  data() {
    return {
      model:'',
    }
  },
}
2cacc6d41bbb37262a98f745aa00fbf0

双向绑定MVVM他的原理其实就是监听数据当数据发生改变的时候继而更新页面视图。

MVVM流程图

下图就是双向绑定的原理，通过数据劫持以及模板解析通过一步步流程来监听我们的数据更新视图

Observer数据劫持相关代码

Observer其实就是个观察者 他通过循环遍历来监听我们data数据中的每一项，当data数据发生改变的时候，就会通过notify方法派发更新给订阅者，同时进行Compile进行我们的文本编译从而实现部分视图进行更新。

class Observe {
    constructor(vm) {
        this.walk(vm.data)
    }
    // 循环遍历 让 data 里每一个key 都监听 
    walk(data) {
        Object.keys(data).forEach( key => {
            this.defineReactive(data, key, data[key])
        })
    }

    // 定义响应式  这个函数也是响应式的核心函数
    defineReactive(data, key, value) {
        let dep = new Dep()
        Object.defineProperty(data, key, {
            get() {
                console.log('触发 get 收集依赖');
                // 收集依赖
                if( Dep.target ) {
                    // 添加订阅者
                    dep.addSub(Dep.target)
                }
                return value
            },
            set(newValue) {
                console.log(value, '触发 set 派发更新');
                // 新值覆盖旧值
                value = newValue
                // 派发更新
                dep.notify()
            },
        })
    }
}

Watcher视图更新

Watcher就是我们的订阅者，通过update方法进行视图的更新

    constructor(vm, exp, cb ) {
        this.vm = vm;
        this.exp = exp;
        this.cb = cb;
        this.value = this.get()
    }
    // 更新
    update() {
        this.run()
    }
    // 更新 DOM
    run() {
        const value = this.get()
        // 新旧值进行比对
        if( value !== this.value ) {
            // 调用回调函数 
            this.cb.call(this.vm, value)
        }
    }

    // 收集依赖
    get() {
        Dep.target = this
        let value = this.vm.data[this.exp]
        Dep.target = null;
        return value
    }
}

这就是我对双向绑定的一些理解，写的不够全面，望大家能够批评指正，谢谢。

【相关推荐：vue.js教程】

以上是带你深入了解vue中的v-model！的详细内容。更多信息请关注PHP中文网其他相关文章！