阅读 238

vue双向绑定

什么是双向绑定

我们先从单向绑定切入单向绑定非常简单,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新双向绑定就很容易联想到了,在单向绑定的基础上,用户更新了ViewModel的数据也自动被更新了,这种情况就是双向绑定举个栗子:

data () {
    return {
        form:{
            name: '',
            email: ''
        }
    }
}

<input type='text' name="name"/>
<input type='text' name="email"/>
复制代码

可以理解为填写表单时页面上的输入框和data里的的数据关联,用js操作data时也会改变页面输入框的值

双向绑定的原理

我们知道vue是一个mvvm框架,mvvm由三部分组成

  • 数据层(Model):应用的数据及业务逻辑
  • 视图层(View):应用的展示效果,各类UI组件
  • 业务逻辑层(ViewModel):框架封装的核心,它负责将数据与视图关联起来

那这又是如何实现的呢,接着往下看。

image.png

  1. 初始化vue实例,劫持data,实现响应式

image.png

image.png 通过object.defineProperty劫持data,绑定getter和setter方法,在get时添加到watcher,同时把watcher自身缓存到Deptarget。当响应式数据发生变化时触发setter,调用订阅器notify()方法通知订阅器发生变化

  1. 订阅器触发notify()方法后通知观察者watcher发生改变,触发update()方法

image.png

image.png

  1. 订阅数据更新,触发相应的更新函数,更新视图。complie解析指令,替换模板数据

结语

写的不好,各位大佬多多指教,感恩家人🙏

文章分类
前端
文章标签