这篇文章给大家介绍怎么深入了解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流程图
下图就是双向绑定的原理，通过数据劫持以及模板解析通过一步步流程来监听我们的数据更新视图
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中的v-model就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
