Vue.observable你有了解过吗?

一、Observable 是什么

Observable 翻译过来我们可以理解成可观察的

我们先来看一下其在Vue中的定义

Vue.observable,让一个对象变成响应式数据。Vue 内部会用它来处理 data 函数返回的对象

返回的对象可以直接用于渲染函数和计算属性内,并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器

Vue.observable({ count : 1})

其作用等同于

new vue({ count : 1})

在 Vue 2.x 中,被传入的对象会直接被 Vue.observable 变更,它和被返回的对象是同一个对象

在 Vue 3.x 中,则会返回一个可响应的代理,而对源对象直接进行变更仍然是不可响应的

二、使用场景

在非父子组件通信时,可以使用通常的bus或者使用vuex,但是实现的功能不是太复杂,而使用上面两个又有点繁琐。这时,observable就是一个很好的选择

创建一个js文件

// 引入vue
import Vue from 'vue
// 创建state对象,使用observable让state对象可响应
export let state = Vue.observable({name: '张三','age': 38
})
// 创建对应的方法
export let mutations = {changeName(name) {state.name = name},setAge(age) {state.age = age}
}

.vue文件中直接使用即可

<template><div>姓名:{{ name }}年龄:{{ age }}<button @click="changeName('李四')">改变姓名</button><button @click="setAge(18)">改变年龄</button></div>
</template>
import { state, mutations } from '@/store
export default {// 在计算属性中拿到值computed: {name() {return state.name},age() {return state.age}},// 调用mutations里面的方法,更新数据methods: {changeName: mutations.changeName,setAge: mutations.setAge}
}

三、原理分析

源码位置:src\core\observer\index.js

export function observe (value: any, asRootData: ?boolean): Observer | void {if (!isObject(value) || value instanceof VNode) {return}let ob: Observer | void// 判断是否存在__ob__响应式属性if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {ob = value.__ob__} else if (shouldObserve &&!isServerRendering() &&(Array.isArray(value) || isPlainObject(value)) &&Object.isExtensible(value) &&!value._isVue) {// 实例化Observer响应式对象ob = new Observer(value)}if (asRootData && ob) {ob.vmCount++}return ob
}

Observer

export class Observer {value: any;dep: Dep;vmCount: number; // number of vms that have this object as root $dataconstructor (value: any) {this.value = valuethis.dep = new Dep()this.vmCount = 0def(value, '__ob__', this)if (Array.isArray(value)) {if (hasProto) {protoAugment(value, arrayMethods)} else {copyAugment(value, arrayMethods, arrayKeys)}this.observeArray(value)} else {// 实例化对象是一个对象,进入walk方法this.walk(value)}
}

walk函数

walk (obj: Object) {const keys = Object.keys(obj)// 遍历key,通过defineReactive创建响应式对象for (let i = 0; i < keys.length; i++) {defineReactive(obj, keys[i])}
}

defineReactive方法

export function defineReactive (obj: Object,key: string,val: any,customSetter?: ?Function,shallow?: boolean
) {const dep = new Dep()const property = Object.getOwnPropertyDescriptor(obj, key)if (property && property.configurable === false) {return}// cater for pre-defined getter/settersconst getter = property && property.getconst setter = property && property.setif ((!getter || setter) && arguments.length === 2) {val = obj[key]}let childOb = !shallow && observe(val)// 接下来调用Object.defineProperty()给对象定义响应式属性Object.defineProperty(obj, key, {enumerable: true,configurable: true,get: function reactiveGetter () {const value = getter ? getter.call(obj) : valif (Dep.target) {dep.depend()if (childOb) {childOb.dep.depend()if (Array.isArray(value)) {dependArray(value)}}}return value},set: function reactiveSetter (newVal) {const value = getter ? getter.call(obj) : val/* eslint-disable no-self-compare */if (newVal === value || (newVal !== newVal && value !== value)) {return}/* eslint-enable no-self-compare */if (process.env.NODE_ENV !== 'production' && customSetter) {customSetter()}// #7981: for accessor properties without setterif (getter && !setter) returnif (setter) {setter.call(obj, newVal)} else {val = newVal}childOb = !shallow && observe(newVal)// 对观察者watchers进行通知,state就成了全局响应式对象dep.notify()}})
}

参考文献

  • https://blog.csdn.net/qq_32682301/article/details/105419673
  • https://wbbyouzi.com/archives/343

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/592874.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【华为机试】2023年真题B卷(python)-考古问题

一、题目 题目描述&#xff1a; 考古问题&#xff0c;假设以前的石碑被打碎成了很多块&#xff0c;每块上面都有一个或若干个字符&#xff0c;请你写个程序来把之前石碑上文字可能的组合全部写出来&#xff0c;按升序进行排列。 二、输入输出 三、示例 示例1: 输入输出示例仅供…

了解Apache 配置与应用

本章内容 理解 Apache 连接保持 掌握 Apache 的访问控制 掌握 Apache 日志管理的方法 Apache HTTP Server 之所以受到众多企业的青睐&#xff0c;得益于其代码开源、跨平台、功能 模块化、可灵活定制等诸多优点&#xff0c;不仅性能稳定&#xff0c;在安全性方面的表现也十分…

【设计模式-2】原型模式的原理、代码实现及类图展示

我们一定对类的实例化比较熟悉&#xff0c;前面我们说的单例、还有3种工厂模式都是通过new关键字来创建对象&#xff0c;下面我们来了解一种新的对象创建的方式。 1. 定义 原型模式也是一种创建型的设计模式&#xff0c;实现和原理总体比较简单&#xff0c;一句话总结呢&#…

Weblogic安全漫谈(二)

前言 继本系列上篇从CVE-2015-4852入手了解T3协议的构造后&#xff0c;本篇继续分析开启T3反序列化魔盒后的修复与绕过。 Weblogic对于10.3.6推出了p20780171和p22248372用于修复CVE-2015-4852&#xff0c;在补丁详情中又提示了p21984589是它的超集&#xff0c;所以可以直接装…

kubeadm

kubeadm快速搭建一个k8s小集群 二进制搭建适合搭建大集群&#xff08;50台以上主机&#xff09; kubeadm更适合中小企业的业务集群 master 120.168.233.70 dockerkubelet kubeadm kubectl flannel node01 120.168.233.80 dockerkubelet kubeadm kubectl flannel node02 …

通过软盘拷贝文件 - 华为OD统一考试

OD统一考试(B卷) 分值&#xff1a; 200分 题解&#xff1a; Java / Python / C 题目描述 有一名科学家想要从一台古董电脑中拷贝文件到自己的电脑中加以研究但此电脑除了有一个3.5寸软盘驱动器以外&#xff0c;没有任何手段可以将文件持贝出来&#xff0c;而且只有一张软盘可以…

MySQL将多条数据合并成一条的完整示例

数据库中存的是多条数据&#xff0c;展示的时候需要合并成一条 数据表存储形式如下图 以type分组&#xff0c;type相同的算一条&#xff0c;且保留image和link的所有数据&#xff0c;用groupBy只保留一条数据 解决方案&#xff1a;用GROUP_CONCAT 完整语法如下 group_concat…

Python是怎么调用接口的

在Python中调用接口可以使用多种方式&#xff0c;以下是其中几种常用的方法&#xff1a; 使用标准库中的urllib模块或第三方库requests发送HTTP请求。首先需要导入对应的库&#xff0c;然后使用相应的函数发送请求&#xff0c;并获得返回的结果。 例如&#xff0c;在使用requ…

从有向带权图判断最短路径里各目标顶点顺序

对如下有向带权图&#xff0c;若采用迪杰斯特拉(Dijkstra)算法求从源点a到其他各顶点的最短路径&#xff0c;则得到的第一路径的目标顶点是b&#xff0c;第二条最短路径的目标顶点是c&#xff0c;后续得到的其余各最短路径的目标顶点依次是() A.d,e,f B.e,d,f C.f,d,e D.f,…

linux-6.0 内核存储栈全景图

linux 存储栈原图地址&#xff1a;https://www.thomas-krenn.com/en/wiki/Linux_Storage_Stack_Diagram

自动驾驶TPM技术杂谈 ———— ODDODC

文章目录 介绍研究现状主流相关定义国标定义SAE定义WP29定义 ODD主流构建框架NHTSA ODD构建框架SAE AVSC ODD构建框架PEGASUS 6层模型BSI ODD构建框架 设计运行条件的原则ODC 的设计原则ODC 元素的制定原则ODC 的使用原则 设计运行条件元素ODD 元素驾乘人员状态4车辆状态 ODC 描…

3分钟Alibaba Cloud Linux镜像操作系统详解

Alibaba Cloud Linux是基于龙蜥社区OpenAnolis龙蜥操作系统Anolis OS的阿里云发行版&#xff0c;针对阿里云服务器ECS做了大量深度优化&#xff0c;Alibaba Cloud Linux由阿里云官方免费提供长期支持和维护LTS&#xff0c;Alibaba Cloud Linux完全兼容CentOS/RHEL生态和操作方式…

大学生如何当一个程序员——第二篇:就业实战2

第二篇&#xff1a;就业实战2 第二篇&#xff1a;就业实战21.职场的十大基本素质2.公司调研3.项目调研4.基础技术准备5.热门技术准备6.更高端技术准备7.本专业之外的技术准备8.共同话题准备 文章出自https://www.bjsxt.com/xiulian.html#1F 各位小伙伴想要博客相关资料的话关注…

深入了解隧道代理HTTP的协议与技术细节

隧道代理HTTP&#xff0c;作为一种网络通信的桥梁技术&#xff0c;其背后的协议与技术细节承载着网络世界的无尽奥秘。对于技术人员而言&#xff0c;深入了解这些细节&#xff0c;不仅有助于优化网络性能&#xff0c;还能为网络安全提供坚实的保障。 一、隧道代理HTTP的协议基…

2024阿里云服务器租赁优惠价格表_ECS和轻量应用服务器配置报价

阿里云服务器租用价格表大全&#xff0c;云服务器一年费用、一个月价格以及1小时收费明细&#xff0c;阿里云2核2G3M带宽轻量服务器一年61元、2核4G4M带宽轻量服务器一年165元12个月&#xff0c;ECS云服务器e系列2核2G配置99元一年、2核4G服务器30元3个月、2核4G配置365元一年、…

二维码、条形码识别

一. 场景介绍 二维码和条形码包含很多信息&#xff0c;对二维码和条形码识别对信息抽取具有重要意义。下面介绍两种二维码识别的方法&#xff0c;并用python实现。 二. 代码实现 import os import cv2 from cv2.wechat_qrcode import WeChatQRCode from pyzbar import pyzba…

v-if导致el-button的disabled属性动态修改失败,加key解决(虚拟列表+el-checkbox出现勾选/未勾选的闪现问题同理解决)

<template v-if"isPrev"><el-button type"primary"size"small" click"nextHandle">下一步&#xff1a;添加设备</el-button> </template> <template v-else><el-button type"primary" siz…

WPF中的KeyGesture类

用于表示键盘快捷键的组合。 KeyGesture类位于System.Windows.Input命名空间中&#xff0c;它提供了一种方便的方式来定义和处理用户通过键盘操作执行的命令或操作 。 KeyGesture类具有一下重要属性&#xff1a; key&#xff1a;表示快捷键的主键(Key)。Modifiers&#xff1…

深度生成模型之GAN基础 ->(个人学习记录笔记)

文章目录 深度生成模型之GAN基础生成对抗网络1. 生成对抗网络如何生成数据2. 生成对抗原理3. GAN的核心优化目标4. D的优化5. GAN的理想状态6. GAN的训练7. 梯度不稳定与模式崩塌(collapse mode)问题8. 梯度消失问题 深度生成模型之GAN基础 生成对抗网络 1. 生成对抗网络如何…

三、HTML元素

一、HTML元素 HTML 文档由 HTML 元素定义。 *开始标签常被称为起始标签&#xff08;opening tag&#xff09;&#xff0c;结束标签常称为闭合标签&#xff08;closing tag&#xff09;。 二、HTML 元素语法 HTML 元素以开始标签起始。HTML 元素以结束标签终止。元素的内容是…