vue3响应式api

响应式api——compositon api

setup:

  1. 不要再想this问题
  2. 执行是在beforeCreated之前

beforeCreated:也就是创建了一个实例

created:挂载了数据

  1. 通过形参props接收,只读

以后所有代码都写到setup中

判断是否只读:isReadonly

挂载到template中:

  1. 挂载到this上的
  2. 或者windows上的一些全局对象

setup return的数据能在template中使用

局部组件:导入-注册-调用

全局组件:Vue.component Vue.use

状态ref

计算属性computed

计算缓存

方法method

直接定义一个方法,然后return出去

setup会产生一个闭包:状态、计算属性都给存起来,通过作用域链拿过来使用。setup只会执行一次,只会在初次渲染时执行;改值->视图更新,但视图更新时setup不会再执行。跟react的区别:每次组件更新都会产生新的私有上下文,产生好几个闭包每个从头走一遍。

data computed methods 一项项选项

解构出对应函数

状态reactive

reactive:对整个对象做代理和劫持

get/set/deleteProperty/has/ownKeys

toRefs&toRef

监听器watch

过滤器:各种限制:语法、传参,性能也没有比方法好多少

watchEffect:

初渲染会执行一次

watch中要避免死循环

总结:

如何创建状态,属性+监听器+普通方法,核心响应式系统

toRef/toRefs 

从setup  到属性 到状态 计算属性 监听器

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

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

相关文章

【04】Istio的pilot流量分发机制

4.1 Pilot配置分发机制 Pilot负责网格数据平面相关配置信息的获取,生成,和分发,它通过Service Registry获取网格配置信息并将其转换为XDS接口的标准数据格式,而后经gRPC分发至相关的Envoy; Service Registry:服务注册表…

EXIT(1)

EXTI介绍 EXTI是片上外设 NVIC是cpu内的外设 回忆起之前的GPIO和AFIO 我们是如何检测按键按下的 我们是一直用while循环读取IDR寄存器的对应位置的值 一直检测判断按键是否被按下 那么是否有第二种方式检测按键是否被按下了呢? 通过EXTI 当EXTI检测到按键的电平发生…

【C++】【Opencv】minMaxLoc()函数详解和示例

minMaxLoc()函数 是 OpenCV 库中的一个函数,用于找到一个多维数组中的最小值和最大值,以及它们的位置。这个函数对于处理图像和数组非常有用。本文通过参数和示例详解,帮助大家理解和使用该函数。 参数详解 函数原型…

将 ONLYOFFICE 文档编辑器与 С# 群件平台集成

在本文中,我们会向您展示 ONLYOFFICE 文档编辑器与其自有的协作平台集成。 ONLYOFFICE 是一款开源办公套件,包括文本文档、电子表格和演示文稿编辑器。这款套件支持用户通过文档编辑组件扩展第三方 web 应用的功能,可直接在应用的界面中使用。…

搭建 Makefile+OpenOCD+CMSIS-DAP+Vscode arm-none-eabi-gcc 工程模板

Embedded-GCC-Template 第三方资源集合 STM32F407-GCC-Template Arm-none-eabi-gcc MakefileOpenOCDCMSIS-DAPVscode工程模板 一、本次环境搭建所用的软硬件 1)Windows or Linux (本文以Windows为主) 2)JLink、Daplink、Wch-Link烧录器 3&#xff…

MySQL join原理及优化

MySQL的JOIN原理是基于索引和算法的。在执行JOIN查询时,MySQL会根据连接字段上的索引来查找匹配的记录。 这种算法在链接查询的时候,驱动表会根据关联字段的索引进行查找,当在索引上找到了符合的值,再回表进行查询,也就…

C#中的扩展方法---Extension

C#中扩展方法是C# 3.0/.NET 3.x 新增特性,能够实现向现有类型中“添加”方法,以下主要介绍C#中扩展方法的声明及使用。 1、扩展方法的声明 扩展方法使能够向现有类型“添加”方法,而无需创建新的派生类型、重新编译或以其他方式修改原始类型…

Flink在汽车行业的应用【面试加分系列】

很多同学问我为什么要发这些大数据前沿汇报? 一方面是自己学习完后觉得非常好,然后总结发出来方便大家阅读;另外一方面,看这些汇报对你的面试帮助会很大,特别是面试前可以看看即将面试公司在大数据前沿的发展动向&…

OmniFocus Pro for Mac(GTD时间管理软件) OmniFocus Mac版

OmniFocus Pro 3 for Mac 中文激活版是一款功能强大且灵活的 GTD 时间管理工具,可为您提供无干扰的环境,帮助您可以轻松地从邮件,消息,Safari 和任何其他第三方应用程序中安排任务,编写备注和剪辑信息。您可以快速轻松…

计算机网络:概述

0 学时安排及讨论题目 0.1讨论题目: CSMA/CD协议交换机基本原理ARP协议及其安全子网划分IP分片路由选择算法网络地址转换NATTCP连接建立和释放再论网络体系结构 0.2 本节主要内容 计算机网络在信息时代中的作用 互联网概述 互联网的组成 计算机网络在我国的发展 …

键盘打字盲打练习系列之认识键盘——0

一.欢迎来到我的酒馆 盲打,yyds! 目录 一.欢迎来到我的酒馆二.键盘规格三.键盘分区 二.键盘规格 经常看视频,看到别人在键盘上一通干净利索的操作,就打出想要的文字。心里突然来一句:卧槽,打字贼快啊&#…

JavaScript_动态表格_添加功能

1、动态表格_添加功能.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>动态表格_添加功能</title><style>table{border: 1px solid;margin: auto;width: 100%;}td,th{text-align: ce…

期中成绩这样发

数字化时代&#xff0c;成绩查询系统已经成为学校里不可或缺的一部分。老师们需要一种方便、快捷、准确的方式来发布和查询成绩&#xff0c;而学生们则需要一种安全、可靠的方式来获取自己的成绩。那么&#xff0c;如何实现这一目标呢&#xff1f;我来给大家介绍几种简单实用的…

uniapp发行web页面在老版本浏览器打开一片空白

uniapp发行的web页面&#xff08;菜单->发行->网站-PC Web或手机H5&#xff09;&#xff0c;对于一些老的浏览器&#xff08;或内核&#xff09;&#xff0c;打开一片空白&#xff1b; 而在新版本的浏览器中打开却正常。这是因为那些版本较低的浏览器不支持ES6的语法和新…

SpringBoot系列-2 自动装配

背景&#xff1a; Spring提供了IOC机制&#xff0c;基于此我们可以通过XML或者注解配置&#xff0c;将三方件注册到IOC中。问题是每个三方件都需要经过手动导入依赖、配置属性、注册IOC&#xff0c;比较繁琐。 基于"约定优于配置"原则的自动装配机制为该问题提供了一…

用excel计算矩阵的乘积

例如&#xff0c;我们要计算两个矩阵的乘积&#xff0c; 第一个矩阵是2*2的&#xff1a; 1234 第2个矩阵是2*3的&#xff1a; 5697810 在excel中鼠标点到其它空白的地方&#xff0c;用来存放矩阵相乘的结果&#xff1a; 选择插入-》函数&#xff1a; 选中MMULT&#xff0c;…

淘宝天猫京东苏宁1688等平台关键词监控价格API接口(店铺商品价格监控API接口调用展示)

淘宝天猫京东苏宁1688等平台关键词监控价格API接口&#xff08;店铺商品价格监控API接口调用展示&#xff09;代码对接如下&#xff1a; item_get-获得淘宝商品详情 公共参数 请求地址: https://o0b.cn/anzexi 名称类型必须描述keyString是调用key&#xff08;必须以GET方式…

如何准确分析需求

业务驱动的需求思想 要做好软件需求工作&#xff0c;业务驱动需求思想是核心。传统的需求分析是站在技术视角展开的&#xff0c;关注的是“方案级需求”&#xff1b;而业务驱动的需求思想则是站在用户视角展开的&#xff0c;关注的是“问题级需求”。 变更/优化型需求分析任务…

头歌答案--爬虫实战

目录 urllib 爬虫 第1关&#xff1a;urllib基础 任务描述 第2关&#xff1a;urllib进阶 任务描述 requests 爬虫 第1关&#xff1a;requests 基础 任务描述 第2关&#xff1a;requests 进阶 任务描述 网页数据解析 第1关&#xff1a;XPath解析网页 任务描述 第…

通过 Elasticsearch 和 Go 使用混合搜索进行地鼠狩猎

作者&#xff1a;CARLY RICHMOND&#xff0c;LAURENT SAINT-FLIX 就像动物和编程语言一样&#xff0c;搜索也经历了不同实践的演变&#xff0c;很难在其中做出选择。 在本系列的最后一篇博客中&#xff0c;Carly Richmond 和 Laurent Saint-Flix 将关键字搜索和向量搜索结合起…