0%

概要内容

  • 问题描述
  • 解决方法

问题描述


起因:一个vue页面组件都2645行,而且功能有多,实在太难维护,所以决定进行功能拆分重构。

https://cdn.jsdelivr.net/gh/yxw007/BlogPicBed@master//img/20211021093914.png

调整之前结构

  • PageScene.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
...
<!-- #ifdef APP-PLUS || H5 -->
<canvas
canvas-id="canvas"
class="canvas"
:style="{ width: canvasWidth, height: canvasHeight }"
></canvas>
<!-- #endif -->

<!-- #ifndef APP-PLUS || H5 -->
<canvas
canvas-id="canvas"
id="canvas"
class="canvas"
:style="{ width: canvasWidth, height: canvasHeight }"
></canvas>
<!-- #endif -->
...
</template>
阅读全文 »

概要内容

  • Object.defineProperty 拦截测试
  • Proxy 拦截测试
  • 总结

假如你熟悉Vue,同时好奇心比较强,你肯定会想知道Vue是如何实现响应式的,要了解响应式原理就需要我们了解Object.defineProperty 和 Proxy 这两个API。针对这两个API编写对应的测试例子看看情况如何。

阅读全文 »

概要内容

  • 核心原理:流转图
  • 流转步骤:讲解&疑问解答

由于Vue3 Reactive源码涉及的代码较多,给初学者学习带来一定的门槛,所以尤大讲解的最核心的响应式demo来讲解响应式核心原理实现

阅读全文 »

概要内容

  • 需求效果
  • 解决方案一:利用rich-text的v-html属性
  • 解决方案二:利用rich-text的nodes参数

实现效果:

https://cdn.jsdelivr.net/gh/yxw007/BlogPicBed@master//img/20210602132458.png

这行文字包含3部分,前:“您当前有”,中:“3”,后:“个客户”,最直接的方案就是用三个view标签搞定。我想万一有很多段需要特殊突显显示怎么办法?这种直接办法就不可取了,所以去官网了解富文本组件。


阅读全文 »

概要内容

  • 通过vue.config 实现
  • 示例

通过vue.config 实现


由于我们公司业务需求,同一份uniapp项目代码需搞出两个不同名称的小程序,所以每次切换项目配置时,需要改好几处配置信息。根据以前的经验,就是通过webpack编译时,动态选择不同的配置。看到工程项目结构后我傻眼了,编译相关的uniapp 框架完全封装集成完,让人无需关系。可问题是我现在需要啊~… 😭

阅读全文 »