随笔分类 - vue
摘要：unplugin-auto-import的配置和eslint报错解决先上官网：unplugin-auto-import unplugin-auto-import 解决了vue3-hook、vue-router、useVue等多个插件的自动导入，也支持自定义插件的自动导入，是一个功能强大的typesc
阅读全文
摘要：副作用刷新时机Vue 的响应性系统会缓存副作用函数，并异步地刷新它们，这样可以避免同一个“tick”中多个状态改变导致的不必要的重复调用。 同一个“tick”的意思是，Vue的内部机制会以最科学的计算规则将视图刷新请求合并成一个一个的"tick"，每个“tick”刷新一次视图，比如a=1;b=2;只
阅读全文
摘要：toRefs 是为了避免对一个响应式对象解构的时候，解构后的每个属性不具有响应性 toRef 是为了针对单独获取某个对象的属性的时候保持响应性，从而单独对某个对象的属性进行响应式转化 针对 reactive 或者 ref 创建的响应式对象都可以使用这两个 api 进行转化 注意：toRefs只能对第
阅读全文
摘要：const arr1 = ref([]); const arr2 = reactive([]); const obj1 = ref({}); const obj2 = reactive({}); watchEffect(() => { console.log("watchEffect arr1",
阅读全文
摘要：获取dom的ref元素名称，要对应暴露的名称，不然会出现无效的dom报错，也就是拿到的是null 在setup中，使用ref（null）获取dom 不能直接在setup里面拿到dom的值，因为setup对应的生命周期是created,所以必须在后续的生命周期钩子里面拿到，比如onMounted 注意
阅读全文
摘要：知识点 storeToRefs# ▸ storeToRefs<SS>(store): ToRefs<StoreState<SS> & StoreGetters<SS> & PiniaCustomStateProperties<StoreState<SS>>> 创建一个引用对象，包含 store 的所
阅读全文
摘要：问题 在 vue3 + pinia 开发中，使用了自定义指令 directives，指令实现在独立的 js 文件中，想通过监听 dom 元素的变化修改 pinia 的 state 状态，直接在初始化调用 store 函数， directives/index.js import { useLayerS
阅读全文
摘要：html <div v-for="(layer, index) in layerList" :key="layer.id" class="layer-item"> <div>{{ layer.name }}</div> </div> JavaScript 解决方案 1 ： 给 state 增加 co
阅读全文
摘要：报错信息如下： Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking
阅读全文
摘要：背景 实际开发项目中，有些时候我们需要通过全局注册多个自定义组件，但是每个组件都导入一次，将会导致代码很冗余。 实现方案 customComponents/index.js const modules = import.meta.glob("@/customComponents/*.vue"); c
阅读全文
摘要：背景 在 vue3 中，如果使用 component，可以动态加载一个组件，例如 <!-- 直接创建 --> <component :is="Image" /> 这样会将已经定义好并导入的比如 Image 组件加载出来，但是如果将需要展示的自定义组件放在一个数组中，遍历展示，则无法展示成功。 <!-
阅读全文
摘要：在 vue 中，如果想在页面中展示格式化后的 json 数据，首先需要先将 json 字符串转化为 json 对象，而后通过 pre 标签 插值即可展示。代码示例如下： <script setup lang="ts"> import { ref } from "vue"; const jsonVal
阅读全文
摘要：创建二维响应式数组 const caculatorList = ref([[] as caculatorType[]]); 赋值 caculatorList.value = [ [ { value: "0", type: "number", bgColor: "#aaa" }, { value: "
阅读全文
摘要：子路由的地址如果是希望拼接父路由地址，子路由的 path 仅写名称，不写 “/”，如果希望是另外的地址，则直接以 “/” 开头。 { path: "/lifetools", name: "lifetools", component: () => import(/* webpackChunkName:
阅读全文
摘要：vite中导入基础样式文件，以供在全局下直接使用全局 less 变量，否则会报错 undefined 先新建 base.less 文件，定义基础样式变量 在 vite.config.ts 下 添加配置 import { defineConfig } from "vite"; import vue f
阅读全文
摘要：<script setup lang="ts"> import { ref, onMounted } from "vue"; onMounted(() => { transferTextarea.value.textarea.select(); }); </script> <el-input v-m
阅读全文
摘要：1 .原生js获取 DOM 节点 document.querySelector(选择器) document.getElementById(id选择器) document.getElementsByClassName(class选择器) .... 2. vue2中获取当前组件的实例对象 因为每个 vu
阅读全文
摘要：vite.config.ts import { resolve } from "path"; export default defineConfig({ resolve: { alias: { "@": resolve(__dirname, "./src"), //把 src 的别名设置为 @ },
阅读全文
摘要：vue3 中如何实现数组响应式，即数据更改，页面实时更新？ type dateObj = { title: String; days: Number; date: String; }; 方法一：ref let dataList = ref([] as dateObj[]); // 通过 dataLi
阅读全文
摘要：在 使用 vue ts 语言开发项目的过程中，会遇到，导入 vue 文件后，提示 找不到模块‘xxx.vue’或其相应的类型声明。（Vue 3 can not find module） 解决方式： 在项目根目录新建一个 xx.d.ts declare module '*.vue' { import
阅读全文