上一页 1 2 3 4 5 6 7 8 9 ··· 27 下一页
摘要: 副作用刷新时机Vue 的响应性系统会缓存副作用函数,并异步地刷新它们,这样可以避免同一个“tick”中多个状态改变导致的不必要的重复调用。 同一个“tick”的意思是,Vue的内部机制会以最科学的计算规则将视图刷新请求合并成一个一个的"tick",每个“tick”刷新一次视图,比如a=1;b=2;只 阅读全文
posted @ 2023-04-06 16:48 蓓蕾心晴 阅读(506) 评论(0) 推荐(0)
摘要: toRefs 是为了避免对一个响应式对象解构的时候,解构后的每个属性不具有响应性 toRef 是为了针对单独获取某个对象的属性的时候保持响应性,从而单独对某个对象的属性进行响应式转化 针对 reactive 或者 ref 创建的响应式对象都可以使用这两个 api 进行转化 注意:toRefs只能对第 阅读全文
posted @ 2023-04-06 16:14 蓓蕾心晴 阅读(311) 评论(0) 推荐(0)
摘要: const arr1 = ref([]); const arr2 = reactive([]); const obj1 = ref({}); const obj2 = reactive({}); watchEffect(() => { console.log("watchEffect arr1", 阅读全文
posted @ 2023-04-04 18:55 蓓蕾心晴 阅读(132) 评论(0) 推荐(0)
摘要: 获取dom的ref元素名称,要对应暴露的名称,不然会出现无效的dom报错,也就是拿到的是null 在setup中,使用ref(null)获取dom 不能直接在setup里面拿到dom的值,因为setup对应的生命周期是created,所以必须在后续的生命周期钩子里面拿到,比如onMounted 注意 阅读全文
posted @ 2023-04-04 18:25 蓓蕾心晴 阅读(841) 评论(0) 推荐(0)
摘要: 知识点 storeToRefs# ▸ storeToRefs<SS>(store): ToRefs<StoreState<SS> & StoreGetters<SS> & PiniaCustomStateProperties<StoreState<SS>>> 创建一个引用对象,包含 store 的所 阅读全文
posted @ 2023-04-04 15:20 蓓蕾心晴 阅读(2367) 评论(0) 推荐(0)
摘要: 问题 在 vue3 + pinia 开发中,使用了自定义指令 directives,指令实现在独立的 js 文件中,想通过监听 dom 元素的变化修改 pinia 的 state 状态,直接在初始化调用 store 函数, directives/index.js import { useLayerS 阅读全文
posted @ 2023-04-03 15:16 蓓蕾心晴 阅读(878) 评论(0) 推荐(0)
摘要: html <div v-for="(layer, index) in layerList" :key="layer.id" class="layer-item"> <div>{{ layer.name }}</div> </div> JavaScript 解决方案 1 : 给 state 增加 co 阅读全文
posted @ 2023-03-28 12:48 蓓蕾心晴 阅读(1832) 评论(0) 推荐(0)
摘要: 报错信息如下: Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking 阅读全文
posted @ 2023-03-24 17:59 蓓蕾心晴 阅读(5079) 评论(0) 推荐(0)
摘要: 背景 实际开发项目中,有些时候我们需要通过全局注册多个自定义组件,但是每个组件都导入一次,将会导致代码很冗余。 实现方案 customComponents/index.js const modules = import.meta.glob("@/customComponents/*.vue"); c 阅读全文
posted @ 2023-03-24 15:02 蓓蕾心晴 阅读(2224) 评论(0) 推荐(0)
摘要: 在开发的过程中,外层盒子高度不确定的情况下,想要跟内层图片高度保持一致,内层图片高度设为width:100%;height:auto;外层box高度也是width:100%;height:auto.为什么会比图片本身到高度超出去一部分呢?外层box如何可以跟内层不确定高度的图片高度保持一致呢? <! 阅读全文
posted @ 2023-03-24 11:40 蓓蕾心晴 阅读(191) 评论(0) 推荐(0)
摘要: 背景 在 vue3 中,如果使用 component,可以动态加载一个组件,例如 <!-- 直接创建 --> <component :is="Image" /> 这样会将已经定义好并导入的比如 Image 组件加载出来,但是如果将需要展示的自定义组件放在一个数组中,遍历展示,则无法展示成功。 <!- 阅读全文
posted @ 2023-03-23 14:15 蓓蕾心晴 阅读(4063) 评论(0) 推荐(1)
摘要: function foo(){ console.log(a) } function bar(){ var a = 2; foo(); } var a=1; bar(); 请说出上题最终会输出 a= ? 解析:词法作用域让 foo() 中的 a 通过 RHS 引用用到了全局作用域中的 a,因此会输出 阅读全文
posted @ 2023-03-21 13:55 蓓蕾心晴 阅读(23) 评论(0) 推荐(0)
摘要: 在日常开发中,我们经常会用到 escape 和 encodeURI 和 encodeURIComponent 这三个方法对 url 或某些字符串进行转义,那这三个方法有什么区别呢? escape 官方文档:https://developer.mozilla.org/zh-CN/docs/Web/Ja 阅读全文
posted @ 2023-03-09 17:39 蓓蕾心晴 阅读(196) 评论(0) 推荐(0)
摘要: foo(); var a=true; if(a){ function foo(params) { console.log("a") } }else{ function foo(params) { console.log("b") } } 思考下,上面代码执行会输出什么? 再看下面的👇🏻执行会输出 阅读全文
posted @ 2023-03-07 12:41 蓓蕾心晴 阅读(36) 评论(0) 推荐(0)
摘要: 给定一个长度为 n 的整数数组 height 。有 n 条垂线,第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线,使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 说明:你不能倾斜容器。 示例 1: 输入:[1,8,6,2 阅读全文
posted @ 2023-02-16 00:15 蓓蕾心晴 阅读(93) 评论(0) 推荐(0)
摘要: isNaN(parseFloat(value)) && isFinite(value); 参考链接:https://blog.csdn.net/qq_23365135/article/details/123833406 阅读全文
posted @ 2023-02-08 11:53 蓓蕾心晴 阅读(47) 评论(0) 推荐(0)
摘要: flat 函数第一个参数为需要扁平化的数组,第二个参数为需要打平的层数,默认不传则打平一层,传入几则代表打平几层。 测试用例 const arr = [1, [2], [3, [4, [5]]]]; console.log(flat(arr)); // [1, 2, 3, [4,[5]]] cons 阅读全文
posted @ 2023-02-08 11:39 蓓蕾心晴 阅读(736) 评论(0) 推荐(0)
摘要: 在 vue 中,如果想在页面中展示格式化后的 json 数据,首先需要先将 json 字符串转化为 json 对象,而后通过 pre 标签 插值即可展示。代码示例如下: <script setup lang="ts"> import { ref } from "vue"; const jsonVal 阅读全文
posted @ 2023-02-07 15:16 蓓蕾心晴 阅读(2500) 评论(0) 推荐(0)
摘要: 创建二维响应式数组 const caculatorList = ref([[] as caculatorType[]]); 赋值 caculatorList.value = [ [ { value: "0", type: "number", bgColor: "#aaa" }, { value: " 阅读全文
posted @ 2023-02-03 17:24 蓓蕾心晴 阅读(1601) 评论(0) 推荐(0)
摘要: 子路由的地址如果是希望拼接父路由地址,子路由的 path 仅写名称,不写 “/”,如果希望是另外的地址,则直接以 “/” 开头。 { path: "/lifetools", name: "lifetools", component: () => import(/* webpackChunkName: 阅读全文
posted @ 2023-02-03 14:01 蓓蕾心晴 阅读(370) 评论(0) 推荐(0)
上一页 1 2 3 4 5 6 7 8 9 ··· 27 下一页