vue vue3中使用nextTick和forceUpdate及注意事项

这篇具有很好参考价值的文章主要介绍了vue vue3中使用nextTick和forceUpdate及注意事项。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、 vue中使用forceUpdate

作用:在Vue官方文档中指出,$forceUpdate具有强制刷新的作用,迫使vue实例重新(rander)渲染虚拟dom,注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。

在vue2中使用

this.$forceUpdate()

vue3中使用

import { getCurrentInstance } from 'vue' // 先引入
setup(){
// 解构赋值 设置别名that,也可不写:that,直接ctx
  	let { ctx: that } = getCurrentInstance()
	that.$forceUpdate()
}

这样使用的时候会报错 Property ‘ctx’ does not exist on type ‘ComponentInternalInstance | null’.

万恶的类型检测

const { ctx: that } = getCurrentInstance() as any

二、vue中使用$nextTick

作用:vue中的nextTick()是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用$nextTick(),则可以在回调中获取更新后的 DOM。

在vue2中使用

this.visible = false
// 直接使用
this.$nextTick(() => {
   // 要执行的方法
	this.visible = true
})

在vue3中使用文章来源地址https://www.toymoban.com/news/detail-696048.html

import { nextTick } from 'vue' // 先引入
setup () {
	const visible = ref<boolean>(false)
	// 使用
	nextTick(()=>{
		visible.value = true
	})
	return {
		visible
	}
}

到了这里,关于vue vue3中使用nextTick和forceUpdate及注意事项的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app使用vue语法进行开发注意事项

    目录 uni-app 项目目录结构 生命周期 路由 路由跳转 页面栈 条件编译 文本渲染 样式渲染 条件渲染 遍历渲染 事件处理 事件修饰符 组件/标签 使用(类似)小程序 语法/结构 使用vue 具体项目目录如下: uni-app 支持如下应用生命周期函数: 函数名 说明 onLaunch 当 uni-app  初始化

    2024年02月13日
    浏览(34)
  • 初识Vue 输出Hello World 及注意事项

    在我们还没接触Vue之前,我同学常说我可以直接在元素里输出JS的表达式吗?肯定是不太行。当我们接触vue.js后,这个想法成了现实。 每当我们学习一门新的语言或者框架时,我们都习惯打印一个“hello world”,在我们vue当中,我们如何打印,或使用呢?接下来让我为大家介

    2024年02月06日
    浏览(29)
  • 学习Linux的注意事项(使用经验;目录作用;服务器注意事项)

    本篇分享学习Linux过程中的一些经验 Linux严格区分大小写 Linux中所有内容以文件形式保存 ,包括硬件,Linux是以管理文件的方式操作硬件 硬盘文件是 /dev/sd[a-p] 光盘文件是 /dev/sr0 等 对于设置需要写入文件,命令行的设置在重启之后就会失效,只有下入文件才可以保存下来 文

    2024年02月11日
    浏览(56)
  • vue axios实现下载文件及responseType:blob注意事项

    需要使用axios和js-file-download组件 注意事项: responseType:blob表示服务器返回的响应类型是二进制流,一般用于文件、视频下载等场景。正常情况下后端返回二进制数据,当后端服务器出错时,往往会以json形式返回错误信息,例如{\\\"code\\\":500,\\\"msg\\\":\\\"未知异常\\\"}。因为设置了blob类型,

    2024年02月11日
    浏览(29)
  • h5跳转微信小程序方案及注意事项(vue方向)

    在正式开发工作之前,请优先熟读并查看微信开发文档。 需提前登录微信公众平台进入“公众号设置”的“功能设置”的“JS接口安全域名”、“业务域名”、“网页授权域名”内依次配置h5页面的相关域名地址(例如:www.baidu.com)这里不包含协议名称和端口,同时可在根目

    2024年02月09日
    浏览(52)
  • Vue2:用ref方式绑定自定义事件的注意事项

    我们知道绑定自定义事件可以用 ref 方式实现。 但是,这个方式,需要注意下,否则,实现不了我们的效果。 需求是这样的,我们通过 ref 绑定的事件,来给 App 的 data 块中的变量赋值。 基本写法: 父组件 App 中 methods 函数: 给 Student 组件绑定自定义事件 test 此处的 this 是谁

    2024年01月19日
    浏览(50)
  • vue修改node_modules打补丁步骤和注意事项

    当我们使用 npm 上的第三方依赖包,如果发现 bug 时,怎么办呢? 想想我们在使用第三方依赖包时如果遇到了bug,通常解决的方式都是绕过这个问题,使用其他方式解决,较为麻烦。或者给作者提个issue,然后等待作者的修复,等待的时间不可控。那么这时候是不是就可以借助

    2024年02月04日
    浏览(42)
  • Golang 包使用注意事项

    1)在给一个文件打包时,该包对应一个文件夹,比如这里的utils文件夹对应的包名就是utils, 文件的包名通常和文件所在的文件夹名一致,一般为小写字母。 2)当一个文件要使用其它包函数或变量时,需要先引入对应的包 引入方式1:import \\\"包名\\\" 引入方式2: 3)package指令在

    2024年02月03日
    浏览(45)
  • grpc流式使用和注意事项

    流式grpc Server-side streaming RPC:服务器端流式 RPC Client-side streaming RPC:客户端流式 RPC Bidirectional streaming RPC:双向流式 RPC 客户端代码 服务端代码 验证 分析 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eRmLdnpt-1622633151060)(readme.assets/image-202105271114

    2023年04月10日
    浏览(29)
  • Unity之Addressable使用注意事项

    Profile文件中配置资源构建路径和资源首次加载路径,资源如何设置了缓存,在首次加载之后会将再用缓存在缓存目录,后面将直接从缓存目录中读取,方便项目发包时候进行使用 AddressableAssetSettings文件 DisableCatalogUpdateOnStartup 勾选改选项,禁止自动更新,项目资源下载一般需

    2024年02月08日
    浏览(31)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包