vue3使用is动态切换组件,activeComponent用ref定义报错 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 ins…
data 组件选项声明不再接收纯 JavaScript object,而需要 function 声明 就是 vue2 根组件的 data 可以是 object 或 function, vue3 所有组件的 data 只可以是 function
// vue2
data: {s: 2
},
// 这种写法作废在 data 改变了的还有 Mixin 行为
举例
var c1 {d…
整体认识和路由配置 场景:点击哪个分类跳转到对应的路由页面,路由传对应的参数
router/index.js
import { createRouter, createWebHashHistory } from vue-router
import Layout from /views/Layout/index.vue
import Home from /views/Home/index.vu…
报错:ts2769 原因:mitt3.0进行了更新 源代码:
import mitt from mittexport const bus mitt()更正代码:
import mitt from mitt
import type {Emitter} from mitt
export const bus:Emitter<any> mitt()可对any进行限制…
1、问题描述:
其一、报错为:
[Vue warn]: Failed to resolve component: el-table If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. at <App> 或者: …
一、vite中使用env环境变量基本介绍
Vite 是一种现代化的前端构建工具,旨在提供快速的开发和构建体验。在 Vite 中,env 环境变量是一种用于在项目中设置和访问全局变量的机制。通过 env 变量,可以在不同环境下配置不同的参数,实现…
在Vue3中使用watch监听useRoute()的时候,控制台报出警告: [Vue warn]: Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead.
watch(rout…
MENU vue3响应式数据的判断、isRef、isReactive、isReadonly、isProxy、ref、reactive、readonlyvue3的生命周期vue3手写isRef、isReactive、isReadonly、isProxyvue3手写ref、深的refvue3手写shallowRef、浅的refvue3customRefvue3readonly与shallowReadonlyvue3toRaw与markRa…
问题
如下图,在component组件上添加v-if判断,会报错: parentcomponent.ctx.deactivate is not a function
解决方法
去除v-if,将key直接添加上。由于有的公用页面,需要刷新,不希望缓存,所以需要添加key…
前端如何切割数组
目标:前端需要做轮播,一屏展示12个,后端返回的数组需要进行切割,将数据以12为一组进行分割
环境:vue3tselement plus
代码如下:
function divideArrayIntoEqualParts(array, chunkSiz…
在Vue3中组件通信中(子传父)报出如下警告:
[Vue warn]: Extraneous non-emits event listeners (changeParentProps) were passed to component but could not be automatically inherited because component renders fragment or text root…
使用的组件是 element Plus Menu 菜单 注意:Menu 菜单属性参数可以自己配置 链接: Menu 菜单
//父级页面
<el-container><el-aside width"320px"><el-menuopen"handleOpen"close"handleClose":default-active"…
说明 修改全局状态变量的值,是一个比较常规而且常见的操作。 本文就介绍四种常见的操作。 由于Option Store 和Setup Store 在修改的时候略有不同,所以本文也会将不同点体现一下。 全局状态变量的定义 包含了 Option Store 和Setup Store 两种定义方式&a…
1.创建一个封装全局组件的js
//引入需要使用的组件
import Archive from ../components/Archive.vue
import Home from ../components/Home.vue//把所有引入的组件存储在一个对象中
const allComponent {Archive,Home}export default {//必须是install这个名字的方法install(…
1、new Function的基础概念
new Function() 是 JavaScript 中的一个构造函数,它可以实例化一个新的函数对象并返回。该函数对象可以使用传递给 new Function() 的字符串参数作为函数体,并使用其他传递给它的参数作为函数参数,从而动态创建一…
什么是响应式 Js代码是自上而下执行的,结合下面代码看,代码执行后,会打印两次double的结果,结果也都是2,即使修改了代码中count的值后,double的值也不会发生任何改变。
let count 1
let double count * …
文章目录四、Composition API 的优势1.Options API 存在的问题2.Composition API 的优势四、Composition API 的优势
1.Options API 存在的问题
使用传统OptionsAPI中,新增或者修改一个需求,就需要分别在data,methods,computed里…
Composition API
1.Composition API
接下来我们来介绍一下Vue3中新增的Composition API如何使用。注意Composition API仅仅是Vue3中新增的API,我们依然可以使用Options API。先来实现一下之前演示的获取鼠标位置的案例。做这个案例之前,需要先介绍一下…
.vue文件被标识红色波浪线;提示: HelloWorld is declared but its value is never read.
问题原因: 因为vue3已经不支持vetur插件。
1、在扩展里面进行搜索Vetur插件,进行禁用或卸载; 2、在 VScode扩展里面搜索并下载…
1、route/router的区别
● $route 表示当前激活的路由的状态信息,包含了当前URL解析得到的信息,包含当前的path路径,params参数,query对象,name路径名等属性 ● r o u t e r 路由器对象( n e w 的路由器对…
vue3ts 展示fbx与tga贴图
npm i three --save
<template><div ref"modelContainer"></div>
</template><script setup lang"ts">
import { ref, onMounted } from vue;
import * as THREE from three;
import { FBXLoader…
1.vue3中不再需要用this.$set 方法 在 Vue 3 中,this. s e t 方法不再存在,因为 V u e 3 使用了 P r o x y 来实现其响应式系统,使得对象的属性访问和修改都能够被自动追踪。因此,在 V u e 3 中,你通常不需要使用特殊的…
Vite 项目中环境变量的声明
我们要在 Vite 项目中进行环境变量的声明,那么需要在项目的根目录下,新建 .env.[mode] 文件用于声明环境变量,如:
.env.test 文件用于测试环境下项目全局变量的声明.env.dev 文件用于开发环境下项目全…
在组件内部,可以使用 r o u t e r 属性访问路由,例如 t h i s . router 属性访问路由,例如 this. router属性访问路由,例如this.router.push(…)。如果使用组合式 API,你可以通过调用 useRouter() 来访问路由器&#…
问题:项目一执行: pnpm run dev, 启动就出错,
Failed to load resource: the server responded with a status of 401 (Unauthorized) 分析:
项目之前是正常运行的,没有问题,回溯刚刚改动,还原…
一、vite是什么?
vite 是一种新型前端构建工具,能够显著提升前端开发体验。它主要由两部分组成: 一个开发服务器,它基于原生 ES 模块提供了丰富的内建功能,如速度快到惊人的模块热更新(HMR)。 …
终端报错: ERR_PNPM_JSON_PARSE Unexpected end of JSON input while parsing empty string in
报错原因:依赖没有删除干净 解决办法: ①删除node_modules ②在package.json的dependencies删除不需要依赖 ③重新pnpm i