带你深入了解vue中的v-model！-Vue.js-PHP中文网

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

青灯夜游

发布： 2022-01-12 18:38:17

转载

2912人浏览过

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

带你深入了解vue中的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:'',
    }
  },
}
</script>

登录后复制

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

MVVM流程图

知了zKnown

知了zKnown：致力于信息降噪 / 阅读提效的个人知识助手。

查看详情

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

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
    }
}

登录后复制