IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> Vue 2.x 响应式原理与双向绑定 -> 正文阅读

[JavaScript知识库]Vue 2.x 响应式原理与双向绑定

Vue实例

Vue会把data中的数据成员注入到Vue的实例中去,并转成getter/setter访问器属性。
这样的目的是:
1.我们能够通过 this.xxx(this.属性名)的方式进行调用。
2.通过getter/setter进行数据劫持,实现数据监听。

data中的成员都被存放到了$data中,并且全部转换成访问器属性,即getter/setter,$data中的setter是真正监视数据变化的地方。

Vue的实例中还有一个_data,它与$data指向的是同一个对象(地址相同),只不过_data表示私有成员,而$data是公有成员。

Vue实例中的$options用来存放创建Vue实例时传递进来的参数(选项)。

Vue响应式原理

这里说一说最小模式的响应式原理。

  • Vue类,负责接收初始化的参数(选项)。
  • 然后会把data中的数据成员注入Vue的实例,并转成getter/setter。
  • Vue类的内部会调用Observer、Compiler
    • Observer对数据进行劫持,能够对data中的属性进行监听,如果数据发生变化,会获取到最新的值,并通知Dep。
    • Compiler会对每个元素进行解析,即解析每个元素中的指令(v-xxx)以及差值表达式({ xxx }),并替换成响应的数据。
    • Watcher就是观察者模式中的观察者又叫订阅者。它的内部有一个update方法,负责更新视图。
    • Dep就是观察者模式中的目标又叫发布者。负责添加观察者,当数据发生变化,通知所有的观察者调用update方法更新视图。
      在这里插入图片描述

_proxyData

在Vue类的内部,有个一个_proxyData的私有方法,负责把data中的数据成员,转成getter/setter并注入到Vue的实例中去,实现数据监听也方便后续使用(可以通过this.属性名的方式调用data中的数据)。

戳 → _proxyData

Observer

Observer类中有两个核心方法walk、definReactive。
walk 遍历data中的属性,并调用definReactive把数据转为getter/setter – 响应式。

当访问data中的数据时,即通过this.属性名获取/使用数据时,首先访问Vue实例(后统一叫做vm)中的get,因为Vue首先将data中的数据都转成了getter/setter并注入vm中。vm的get中通过data[属性名]来返回数据,而在Observer中将data中的数据转成了getter/setter存放到vm的$data中,所以会调用$data中的get。

即,
vm.属性名 → vm中的get → $data中的get
vm.属性名 = xxx → vm中的set → $data中的set → Observer中,在set发送数据变化通知

戳 → Observer

Compiler

Compiler类的作用用一句话总结就是在操作DOM。

核心功能:

  • 编译模板,处理差值表达式、指令。递归遍历vm.el中的所有子节点,判断:
    • 如果是文本节点,则处理差值表达式。
    • 如果是元素节点,则处理指令。

戳 → Compiler

Dep

Dep主要负责监听数据变化。Dep会在Observer的$data的get方法中收集依赖在set方法中触发依赖(发送通知)

Vue会为每一个响应式数据($data中的每个属性)创建一个Dep对象,在使用数据时收集依赖(即创建观察者对象 Watcher),在更新数据时通知所有(依赖数据的)观察者更新视图。

戳 → Dep

Watcher

Watcher主要负责更新视图,其次在自身实例化的时候会把自身实例添加到Dep类的target静态属性中。

Watcher中可以拿到oldVaule、newValue,以及callback。更新过程中去比较新、旧的值是否发生变化,如果发生变化,则调用callback并将newValue作为参数传递过去。这里的callback(回调)才是真正执行更新视图的方法。

所以,需要在所有依赖数据的地方创建Watcher对象,并传递一个更新视图数据的回调函数。当数据发生改变的时候,Dep会调用notify方法通知所有Watcher对象更新视图,其实就是通知Watcher执行回调。

戳 → Watcher

双向绑定

前面一系列操作~~都是数据驱动视图更新,那么,对于表单元素,当视图发生变化也应该更新数据。

input输入框举例。

当输入框中的值被修改,此时可以拿到被修改后的值,也就是inputvalue。然后再将value重新赋值给vm中的数据,即vm.xxx = input.value

戳 → 双向绑定

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-04-27 11:15:01  更:2022-04-27 11:16:04 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 0:57:47-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码