脚本宝典收集整理的这篇文章主要介绍了带你深入了解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数据同时也会使相应的视图进行更新渲染。

  <div class="about">
    <p>{{model}}</p>
    <!-- v-model -->
    <input tyPE="text" v-model=";model"> 
  </div>
</template>
<script>
export default {
  data() {
    return {
      model:&#39;',
    }
  },
}
</script>

双向绑定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！的详细内容，更多请关注脚本宝典其它相关文章！

脚本宝典总结

以上是脚本宝典为你收集整理的带你深入了解vue中的v-model！全部内容，希望文章能够帮你解决带你深入了解vue中的v-model！所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。