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

2022/5/10 5:20:04 浏览量：123

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

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

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

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

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

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

MVVM流程图

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

Observer数据劫持相关代码

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

Watcher视图更新

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

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

以上就是带你深入了解vue中的v-model！的详细内容，更多请关注php中文网其它相关文章！

计算机题库分享