首页 > 其他分享 >vue3 - 警告 `shallowRef` instead of `ref` - 解决

vue3 - 警告 `shallowRef` instead of `ref` - 解决

时间:2023-08-16 11:26:03浏览次数:42  
标签:Vue vue3 shallowRef instead 警告 ref

完整警告

[Vue warn]: Vue received a Component which was made a reactive object. This can lead to unnecessary
performance overhead, and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`.

这是因为参数内容有组件,

如 

 元素是图标组件

 

因此需要使用 

shallowRef 即可

 

标签:Vue,vue3,shallowRef,instead,警告,ref
From: https://www.cnblogs.com/c2g5201314/p/17633529.html

相关文章

  • vue3+vite+ts项目初始化
    创建项目#npm6.xnpmcreatevite@latestmy-vue-app--templatevue#npm7+,extradouble-dashisneeded:npmcreatevite@latestmy-vue-app----templatevue安装依赖npminstall创建文件夹......
  • 记录--vue3问题:如何实现微信扫码授权登录?
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助一、需求微信扫码授权,如果允许授权,则登录成功,跳转到首页。二、问题1、微信扫码授权有几种实现方式?2、说一下这几种实现方式的原理是什么?3、vue中的微信扫码授权登录,与uniapp和原生小程序的微信授权登录,它们......
  • vue3 中 props 传递响应式值不会变
    vue3中通过props传递响应式值不会跟着响应式,原因为获取props的时候直接通过props.xxx来获取了,如果要保持响应式,需要手动转为响应式const{status}=toRefs(props)//orconststatus=toRef(props,'status')当组件层级比较深的时候,为避免props多级传递,可......
  • Vue3 setup的业务逻辑分离功能拆分
    在Vue3开发中,我们可能遇到一个页面或者组件业务逻辑很复杂,代码量达到千行,不利于阅读和维护,因此需要将业务逻辑进行分离首页主界面index.vue//index.vue<script>import{reactive,toRefs}from'vue'importuseOperatefrom'./useOperate.js'importuseConfi......
  • vue3 使用 vue-i18n 配置多语言环境
    1.插件地址:VueI18n官方文档GitHub地址2.安装:在Vue之后引入vue-i18n,它会自动安装:<scriptsrc="https://unpkg.com/vue/dist/vue.js"></script><scriptsrc="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>NPM:npminstallv......
  • Vue3 中的v-model实现父子组件数据同步通信
    v-model在vue2中也就是双向绑定作用,但是在vue3中除了实现双向绑定外,还可以进行组件的通信父子组件的数据同步,接下来看看例子:<template><h1>{{num}}</h1><child-eventv-model="num"></child-event></template><scriptlang="ts"setup......
  • [完结8章]程序员的 AI 启蒙课,ChatGPT 辅助开发 Vue3 项目
    点击下载:程序员的AI启蒙课:ChatGPT让你1人顶3人提取码:8zwd Vue是一款用于构建用户界面的JavaScript框,它基于标准的HTML、CSS和JavaScript构建,并提供了一套声明式的、组件化的编程模型,用以帮助开发者高效地开发用户界面。目前,Vue3.0正式版也发布了两年的时间,越......
  • vue3+typescript中的props
     以上是子组件 以上是父组件<scriptsetuplangs="ts">letprops=defineProps(['info','money'])//父子组件的通信需要用到defineProps方法去接受父组件想要传递的数据console.info(props)</script>需要注意的就是:props可以实现父子组件的通信,但是props的......
  • vue2和vue3中插槽写法区别
    一、slot是什么在HTML中slot元素,作为WebComponents技术套件的一部分,是Web组件内的一个占位符。该占位符可以在后期使用自己的标记语言填充。(我们可以理解为solt在组件模板中占好了位置,当使用该组件标签时候,组件标签里面的内容就会自动填坑(替换组件模板中slot位置),作为承......
  • Spring Boot + Vue3前后端分离实战wiki知识库系统<十二>--用户管理&单点登录开发一
    目标:在上一次https://www.cnblogs.com/webor2006/p/17533745.html我们已经完成了文档管理的功能模块开发,接下来则开启新模块的学习---用户登录,这块还是有不少知识点值得学习的,先来看一下整体的效果,关于效果官网有一个体验地址:wiki.courseimooc.com,如下:其效果也是人人熟知的,下面......