Vue3报错:Property “xxx“ was accessed during render but is not defined on instance.

news2025/2/28 6:34:01

Vue3报错:Property “xxx” was accessed during render but is not defined on instance.

翻译:属性“xxx”在呈现期间被访问,但没有在实例上定义。

其实就是在模板上有,但是在script上没有定义

很多同学跟说这不是报错,是警告,其实只要是在渲染页面时出现的问题,我们都可以说成是报错

因为如果有警告,到项目发布的时候是会出现问题的

所以不管是报错还是警告,出现了就必须先解决掉

跟着这个报错的还有下面两个报错:
Unhandled error during execution of render function

意思是在执行渲染函数时未处理的错误
报错1
Unhandled error during execution of scheduler flush. This is likely a Vue internals bug.
这个就牛逼了,警告说可能是vue内部的bug,执行调度器刷新期间未处理的错误。
报错2
这三个报错都是一起出现的,所以找问题还是挺好找的,解决bug的提供一下思路

出现bug的背景是我在某一个文件中写了太多的代码,所以想把其中一部分封装成组件再引用进来,然后就新建了一个带有初始模板的页面,再把原页面中的部分代码函数样式复制过去

初始模板如下:

<template>
</template>

<script>
</script>

<style>
</style>

通过第一个报错,模板上有,但是没有定义,我们可以去script找,发现script里写了没有问题,然后第二三个报错并不能给我什么有利的信息,然后我就发现script中没有加上组合式 API即setup,加上了就没报错了

所以问题的出现原因是在新创建的vue模板文件中没有加上语法糖

解决问题就是<script setup>

通过此次报错,需要记一下在新建vue文件封装组件的时候检查标签有没有少写

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

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

相关文章

Vue2-基础知识

目录 一.vue简介 1.概念 2.特性 (1)数据驱动视图 (2)双向数据绑定 3.MVVM 4.基本使用步骤 5.调试工具 二.vue基础 1.指令 (1)内容渲染指令 (2)属性绑定指令 (3)事件绑定指令 (4)双向绑定指令 ​编辑(5)条件渲染指令 (6)列表渲染指令 2.过滤器 (1)概念 (2)分…

HTML5设计注册/登录界面

学习目标&#xff1a; 掌握 HTML5入门知识掌握 CSS入门知识学习内容&#xff1a; 掌握 HTML5基本语法掌握CSS基本语法HTML5网页设计掌握块级标签掌握行内标签表单的使用方法iput常用属性学习时间&#xff1a; 周一至周五早上 7 点—晚上9点周六上午 9 点-晚上9点周日下午 3 …

Redux的基本使用过程详解

文章目录Redux的使用过程Redux测试项目的搭建Redux的基本使用步骤Redux目录的结构划分React的三大原则Redux的使用过程 Redux测试项目的搭建 1.创建一个新的项目文件夹:learn-redux # 执行初始化操作 npm init -y或yarn init -y # 安装redux:npm install redux --save或yarn …

Tomcat使用教程(超详细)

文章目录Tomcat学习笔记1、Tomcat概述2、Tomcat的基本使用2.1 基本操作2.1.1 安装2.1.2 卸载2.1.3 配置2.1.4 启动2.1.5 部署2.1.6 关闭3、IDEA中使用Maven创建Web项目3.0 Web项目目录结构介绍3.1 使用骨架创建Web项目3.2 直接创建web项目4、Web项目部署4.1 集成本地的Tomcat4.…

别找了诸位 【十二款超级好用的谷歌插件都在这】(确定不来看看?)

目录 &#x1f30c;前言&#xff1a; &#x1f307;第一款、油猴插件 &#x1f307;第二款、Adblock Plus - 免费的广告拦截器 &#x1f307;第三款、谷歌清理大师&#xff08;CleanMaster&#xff09; &#x1f307;第四款、google翻译 &#x1f307;第五款、OneTab &a…

vue的双击事件(dbclick的使用)

双击事件(dblclick) vue事件中基于点击事件&#xff0c;有一个双击事件&#xff0c;通过dblclick事件触发。 语言&#xff1a;vue3/Ts 函数库&#xff1a;vueuse 1、需求分析 双击事件触发&#xff1b; 在双击时隐藏对应文字元素&#xff1b; 展示输入框&#xff1b; 输入…

Vue系列之插槽(slot)详解

文章の目录1、什么是插槽了2、插槽的分类3、默认插槽的使用3.1、语法3.2、示例4、具名插槽的使用4.1、什么是具名插槽4.2、语法4.3、示例4.4、缩写5、作用域插槽的使用5.1、什么是作用域插槽了5.2、语法5.3、示例6、动态插槽名6.1、什么是动态插槽名6.2、示例写在最后Vue 版本&…

Node.js | 从前端到全栈的必经之路

&#x1f9d1;‍&#x1f4bc; 个人简介&#xff1a;即将大三的学生&#xff0c;一个不甘平庸的平凡人&#x1f36c; &#x1f5a5;️ NodeJS专栏&#xff1a;Node.js从入门到精通 &#x1f5a5;️ 博主的前端之路&#xff1a;前端之行&#xff0c;任重道远&#xff08;来自大三…

在uni-app中使用手机号一键登录

1、首先需要在dcloud开发者控制台开通一键登录 https://dev.dcloud.net.cn/uniLogin 开通一键登录服务, 获取关键最关键的两个参数 ApiKey 和 ApiSecret 真机调试无需添加应用&#xff0c;如需打包使用请添加。一键登录应用ID为离线打包时配置的appid 2、登录云服务空间&#x…

HTML零基础入门教程(详细)

首先我们先介绍一下网页&#xff1a; 网页时构成网站的基本元素&#xff0c;它通常由图片&#xff0c;链接&#xff0c;文字&#xff0c;声音&#xff0c;视频等元素组成。通常我们看到的网页&#xff0c;常见以.htm或.html后缀结尾的文件&#xff0c;因此我们把它俗称为HTML文…

webpack看这一篇就够了

文章目录今日学习目标1. webpack基本概念webpack能做什么2. webpack的基本使用2.0 创建项目2.1 解决多次引入资源文件2.2 webpack使用2.3_webpack 更新打包3. webpack的配置3.0_webpack-入口和出口3.1_打包流程图3.2_插件-自动生成html文件3.3_mode模式3.3_webpack开发服务器-为…

微信小程序转uniapp的迁移步骤及遇到的问题

目录 前言 一、迁移步骤 第一步:安装miniprogram-to-uniapp 插件 第二步:查看是否安装成功 第三步:使用插件进行转换

vue实现input输入模糊查询(三种方式)

vue实现input输入模糊查询(三种方式) 目录 vue实现input输入模糊查询(三种方式) 1 计算属性实现模糊查询 演示&#xff1a; 2 watch 监听实现模糊查询 3 通过按钮点击实现模糊查询 演示&#xff1a; 1 计算属性实现模糊查询 vue 中通过计算属性实现模糊查询,创建 html …

微信小程序面试题大全(持续更新)

1.请谈谈微信小程序主要目录和文件的作用&#xff1f; project.config.json&#xff1a;项目配置文件&#xff0c;用的最多的就是配置是否开启https校验App.js&#xff1a;设置一些全局的基础数据等App.json&#xff1a;底部tab&#xff0c;标题栏和路由等设置App.wxss&#x…

呕心沥血 JavaScript知识点梳理大全,超详细 建议收藏!!!

呕心沥血 JavaScript知识点梳理大全&#xff0c;超详细 建议收藏&#xff01;&#xff01;&#xff01; ✴️大家好,我是王同学&#xff0c;爆肝三天三夜王同学把JavaScript 知识点梳理了一遍&#xff0c;文章没有一点套路&#xff0c;只有满满的干货 ✴️如果对你有帮助就给我…

vite.config.js配置-解决跨域问题,以及@vitejs/plugin-vue等报错

开发环境 在配置的过程中踩了很多坑&#xff0c;还是太菜&#xff0c;有些东西弄不明白什么意思。 运行项目时的报错可直接到最下面看vite.config.js文件的注释 目前项目用到的模块并不多&#xff0c;package.json文件如下 {"name": "PsWebV3Abb",&quo…

Vue vue.config.js 的详解与配置

Vue vue.config.js 的详解与配置 1. 为什么要配置 vue.config.js 由于 vue-cli 3 也学习了 rollup 的零配置思路&#xff0c;所以项目初始化后&#xff0c;没有了以前熟悉的 build 目录&#xff0c;也就没有了 webpack.base.config.js、webpack.dev.config.js 、webpack.prod…

HTML中的表格和表单(含有示例代码)

表格表格的基本构成标签 table标签&#xff1a;表格标签 caption标签&#xff1a;表格标题tr标签&#xff1a;表格中的行 th标签:表格的表头 td标签&#xff1a;表格单元格表格的基本结构 <table>定义表格 <caption>表格标题</caption><tr>定义表行 &l…

vue3 + vite 性能优化 ( 从5s -> 0.5s )

Ⅰ、Vue Vite 构建项目性能优化 vite 相比于 webpack 优势显著&#xff1b;然而 社区&#xff0c;却 不够成熟 &#xff0c;参考资料较少&#xff1b;如何让vue vite 构建项目变的 访问秒开 &#xff08;要想足够快&#xff0c;就是让首次加载足够小&#xff09;&#xff0c…

安装nvm,并使用nvm安装nodejs及配置环境变量

一、安装nvm 1.下载nvm 解压后点击exe文件进行安装&#xff1a; 2、点击下一步安装到 D:\NVM 下 3、先在D:\NVM 下创建nodejs文件夹&#xff0c;然后将路径设置如下&#xff1a; 4、点击next 一直点击 完成安装&#xff1b; 5、找到指定nvm打开后&#xff1a; 给该文件添加这…