随笔分类 - vue
摘要：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
阅读全文
摘要：vue3 随着Vue3.0版本的发布，我们在使用或者对其源码进行阅读时会惊讶的发现，它又又又双叒叕变强了，尤大本人在直播中也提到新的Vue会比老的Vue有1.3到2倍的提升，它的更新机制会更加的快速敏捷。下面就抛砖引玉，给大家稍微介绍下在更新机制方面主要升级的两个点： 节点移动优化 要从一道算法题说
阅读全文
摘要：watch和 watchEffect watch watch显式指定依赖数据，依赖数据更新时执行回调函数 具有一定的惰性(lazy) , 第一次页面展示的时候不会执行，只有数据变化的时候才会执行(设置immediate: true时可以变为非惰性，页面首次加载就会执行） 监视ref定义的响应式数据时
阅读全文