• 技术文章 >web前端 >Vue.js

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

    青灯夜游青灯夜游2022-01-12 18:38:17转载106
    你了解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:'',
        }
      },
    }
    </script>

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

    MVVM流程图

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

    1.png

    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中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    专题推荐:vue v-model
    上一篇:Vue3.2已发布,带来了这些新特性! 下一篇:如何从0撸出一个Vue组件库并发布到npm

    相关文章推荐

    • 推荐 20 个近期比较“火热”的Vue项目(值得收藏)• 简单聊聊Vue3中的Hook特性(总结分享)• vue怎样解决axios请求出现前端跨域问题(实例详解)• Vue实例要怎么挂载?聊聊实例挂载的过程• 解析源码,看看 vue 编译器是怎么生成渲染函数的!• 深入聊聊Vue中的一些常用指令• Vue3.2已发布,带来了这些新特性!

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网