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.rhkb.cn/news/189006.html

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

相关文章

Zabbix SNMPv3

一、Snmpv3简述 SNMPv3是Simple Network Management Protocol version 3(简单网络管理协议第三版)的缩写。它是一种网络管理协议,用于监控和管理网络中的设备、系统和应用程序。 相对于之前的版本,SNMPv3具有更强的安全性和扩展…

spring-cloud-stream

系列文章目录 第一章 Java线程池技术应用 第二章 CountDownLatch和Semaphone的应用 第三章 Spring Cloud 简介 第四章 Spring Cloud Netflix 之 Eureka 第五章 Spring Cloud Netflix 之 Ribbon 第六章 Spring Cloud 之 OpenFeign 第七章 Spring Cloud 之 GateWay 第八章 Sprin…

IIS前端服务和代理

前端服务可以用nginx和IIS开启,windows自带IIS方便管理一点。其实用docker的nginx更方便管理。 记录一下IIS的安装和开启服务过程 1、打开控制面板点击程序,再点击启用或关闭windows功能。 2、 点击左侧启用或关闭Windows功能。 3、把框框中全选上之后点…

便捷Benchmark.sh 自动匹配workload(自用)

​ 因为db_bench选项太多,而测试纬度很难做到统一(可能一个memtable大小的配置都会导致测试出来的写性能相关的的数据差异很大),所以官方给出了一个benchmark.sh脚本用来对各个workload进行测试。 该脚本能够将db_bench测试结果中…

CMOS介绍

1 二极管 2 CMOS 2.1 栅极、源极、漏极 2.2 内部结构 2.2 导电原理 - 原理:1.通过门级和衬底加一个垂直电场Ev,从而在两口井之间形成反形层2.如果加的电场足够强,反形层就可以把source(源极)和drain(漏极…

Doris学习--1、Doris简介、操作Doris、Doris架构(数据模型)

星光下的赶路人star的个人主页 心之所向,剑之所往 文章目录 1、Doris简介1.1 快速开始1.2 安装配置1.2.1 应知前提1.2.2 配置Doris1.2.2.0 配置前提1.2.2.1 配置FE(Frontend)1.2.2.2 启动FE1.2.2.3 连接FE1.2.2.4 停止FE1.2.2.5 配置BE&#…

物联网水表电子阀工作原理是怎样的?

随着科技的不断发展,物联网技术逐渐深入到我们的生活之中。作为智能家居的重要组成部分,物联网水表电子阀凭借其智能化、节能环保等优势,受到了越来越多用户的青睐。接下来,合众小编将来为大家介绍下物联网水表电子阀工作原理。 一…

Git 进阶使用

一. Git图形化操作 1.1.什么是图形化管理工具 图形化管理工具是一种通过可视化界面来操作计算机系统或应用程序的软件工具。在软件开发中,它通常用于管理和操作版本控制系统(如Git、SVN等)以及代码开发环境(如IDE)。与…

SSM图书管理系统开发mysql数据库web结构java编程计算机网页源码eclipse项目

一、源码特点 SSM 图书管理系统是一套完善的信息系统,结合springboot框架和bootstrap完成本系统,对理解JSP java编程开发语言有帮助系统采用SSM框架(MVC模式开发),系统具有完整的源代码和 数据库,系统主要…

(二)正点原子I.MX6ULL u-boot移植

一、概述 这里使用的是NXP官方2022.04发布的uboot,移植到正点原子阿尔法开发板(v2.1) u-boot下载:gitgithub.com:nxp-imx/uboot-imx.git 移植是基于NXP的mx6ull_14x14_evk 二、编译NXP官方uboot 进入NXP的u-boot目录 先在Makefile…

Word 插入的 Visio 图片显示为{EMBED Visio.Drawing.11} 解决方案

World中,如果我们插入了Visio图还用了Endnote, 就可能出现:{EMBED Visio.Drawing.11}问题 解决方案: 1.在相应的文字上右击,在出现的快捷菜单中单击“切换域代码”,一个一个的修复。 2.在菜单工具–>…

亚马逊云AI应用科技创新下的Amazon SageMaker使用教程

目录 Amazon SageMaker简介 Amazon SageMaker在控制台的使用 模型的各项参数 pytorch训练绘图部分代码 Amazon SageMaker简介 亚马逊SageMaker是一种完全托管的机器学习服务。借助 SageMaker,数据科学家和开发人员可以快速、轻松地构建和训练机器学习模型&#…

Apache APISIX Dashboard 未经认证访问导致 RCE(CVE-2021-45232)漏洞复现

漏洞描述 Apache APISIX 是一个动态、实时、高性能的 API 网关,而 Apache APISIX Dashboard 是一个简单易用的前端界面,用于管理 Apache APISIX。 在 2.10.1 之前的 Apache APISIX Dashboard 中,Manager API 使用了两个框架,并在…

《视觉SLAM十四讲》-- 相机与图像

04 相机与图像 4.1 相机模型 4.1.1 针孔相机模型 针孔模型描述了一束光线通过针孔后,在针孔背面投影成像的关系(类似小孔成像原理)。 根据相似三角关系 Z f − X X ′ − Y Y ′ (3-1) \frac{Z}{f}-\frac{X}{X^{\prime}}-\frac{Y}{Y^{\p…

自然语言处理(一):RNN

「循环神经网络」(Recurrent Neural Network,RNN)是一个非常经典的面向序列的模型,可以对自然语言句子或是其他时序信号进行建模。进一步讲,它只有一个物理RNN单元,但是这个RNN单元可以按照时间步骤进行展开…

HarmonyOS开发:回调实现网络的拦截

前言 上一篇文章,分享了一个基于http封装的一个网络库,里面有一个知识点,在初始化的时候,可以设置请求头拦截和请求错误后的信息的拦截,具体案例如下: Net.getInstance().init({netErrorInterceptor: new M…

C++套接字库sockpp介绍

sockpp是一个开源、简单、现代的C套接字库,地址为:https://github.com/fpagliughi/sockpp,最新发布版本为0.8.1,license为BSD-3-Clause。目前支持Linux、Windows、Mac上的IPv4、IPv6和Unix域套接字。其它*nix和POSIX系统只需很少的…

获取请求IP以及IP解析成省份

某些业务需要获取请求IP以及将IP解析成省份之类的,于是我写了一个工具类,可以直接COPY /*** IP工具类* author xxl* since 2023/11/9*/ Slf4j public class IPUtils {/*** 过滤本地地址*/public static final String LOCAL_ADDRESS "127.0.0.1&quo…

【数据结构初阶】算法的时间复杂度和空间复杂度

各位读者老爷好!现在鼠鼠我呀来浅谈一下数据结构初阶中的一个知识点:算法的时间复杂度和空间复杂度,希望对你有所帮助。 在浅谈时间复杂度和空间复杂度之前,咱们可以来了解一下一下几个概念: 1.什么是数据结构 数据结…

Http状态码502常见原因及排错思路(实战)

Http状态码502常见原因及排错思路 502表示Bad Gateway。当Nginx返回502错误时,通常表示Nginx作为代理服务器无法从上游服务器(如:我们的后端服务器地址)获取有效的响应。导致这种情况的原因有很多: 后端服务器故障ngin…