首页 > 其他分享 >在开发中,我发现的reactive和ref

在开发中,我发现的reactive和ref

时间:2023-05-04 16:11:47浏览次数:27  
标签:data 更新 reactive 开发 视图 func ref

在开发中,我发现了一个问题,就是在element-plus -table 组件中使用ref(), 定义的数据,在vue文件内部去修改这个响应式数据,任何时候,响应式数据改变,基本上视图也会跟着变化。

 

但是当我觉得vue文件中script中的代码太长了,将一些功能抽出来,通过引入外部函数的方式去更新响应式数据时,就算我把响应式数据当做参数,或者通过provide的方式去传递时,更新都不会出发视图更新,使用$forceUpdate() 也不生效。

 

但是当通过reactive定义的方式时, 就可以更新:

 

ex:

import {func} from 'tool/func.ts'

let data = reactive({data:[] })

func(data )

然后引入的外部函数中,func(data){

data.data = [1,2,3]

}

这样子去更新的话,视图就会更新,而且都不需要执行$forceUpdate()

标签:data,更新,reactive,开发,视图,func,ref
From: https://www.cnblogs.com/Hijacku/p/17371550.html

相关文章

  • 直播电商平台开发,环形进度条组件
    直播电商平台开发,环形进度条组件 <template> <divclass="content"ref="box">  <svg   :id="idStr"   style="transform:rotate(-90deg)"   :width="width"   :height="width"   xmlns=&......
  • 用手机号码归属地 API 开发的应用推荐
    引言手机号码归属地API是一种提供手机号码归属地信息的接口,通过该接口,可以获取手机号码所属的省份、城市、运营商等信息。它可以帮助企业更好地了解客户,为个性化推荐和精准广告投放提供数据支持。作为一种数据服务,手机号码归属地API在电商、金融、社交、广告等领域得到广泛应用......
  • 直播app开发搭建,图形和短信验证码的自动识别获取
    直播app开发搭建,图形和短信验证码的自动识别获取selenuim操作 driver=webdriver.Chrome()driver.get("https://locvps.wenjingnetwork.com/page.aspx?c=reg")driver.implicitly_wait(10)#设置超时时间driver.find_element_by_name("uname").send_keys()driver.find_element_by......
  • simulink模块汇总梳理 , 智能座舱域在AUTOSAR 框架中应用层的开发依赖于simulink建模,
    simulink模块汇总梳理,智能座舱域在AUTOSAR框架中应用层的开发依赖于simulink建模,通过simulink模型设计加上C代码生成来完成繁杂的应用层开发。因此simulink计算组件的充分了解必不可少。本商品梳理了近乎全部的simulink模块,帮助您短时间对未知模块进行检索及了解,倘若您需要模......
  • REST风格开发
    REST(RepresentationalStateTransfer),表现形式状态转换,是一种资源描述形式根据REST风格对资源进行访问称为RESTful优点:隐藏资源的访问行为,无法通过地址得知对资源是何种操作书写简化示例@PostMappingpublicStringsave(@RequestBodyBookbook){Sys......
  • 嵌入式工业开发板基础测试手册——基于NXP iMX6ULL开发板(1)
    前言本文档适用开发环境:Windows开发环境:Windows764bit、Windows1064bit虚拟机:VMware15.1.0Linux开发环境:Ubuntu18.04.464bitU-Boot:U-Boot-2020.04Kernel:Linux-5.4.70LinuxSDK:5.4.70_2.3.0进行本文档操作前,请先按照调试工具安装、Linux开发环境搭建相关文档,安装Secu......
  • 基于TI Sitara系列AM5728工业开发板——FPGA视频开发案例分享
    前言31cameralink_display案例41.1案例功能41.2操作说明41.3关键代码(MicroBlaze)111.4Vivado工程说明161.5模块/IP核配置20前言本文主要介绍FPGA视频开发案例的使用说明,适用开发环境:Windows7/1064bit、XilinxVivado2017.4、XilinxSDK2017.4。评估......
  • 推荐一个基于.Net Framework开发的Windows右键菜单管理工具
    平常在我们电脑,我们都会安装非常多的软件,很多软件默认都会向系统注册右键菜单功能,这样方便我们快捷打开。比如图片文件,通过右键的方式,快捷选择PS软件打开。如果我们电脑安装非常多的软件,就会导致我们右键菜单的列表非常多,但是很多软件我们是用不到的。所以,今天给大家推荐一个Win......
  • 嵌入式测试手册——基于NXP iMX6ULL开发板(2)
    基于测试板卡:创龙科技TLIMX6U-EVM是一款基于NXPi.MX6ULL的ARMCortex-A7高性能低功耗处理器设计的评估板,由核心板和评估底板组成。核心板经过专业的PCBLayout和高低温测试验证,稳定可靠,可满足各种工业应用环境。评估板接口资源丰富,引出双路网口、双路RS485、双路CAN、三路USB、......
  • 嵌入式基础测试手册——基于NXP iMX6ULL开发板(4)
    前言本文档适用开发环境:Windows开发环境:Windows764bit、Windows1064bit虚拟机:VMware15.1.0Linux开发环境:Ubuntu18.04.464bitU-Boot:U-Boot-2020.04Kernel:Linux-5.4.70LinuxSDK:5.4.70_2.3.0基于测试板卡:创龙科技TLIMX6U-EVM是一款基于NXPi.MX6ULL的ARMCortex-A7高......