书架

书架

=一个知识书库=

常见的Vue2项目性能优化

常见的Vue2项目性能优化

# 前言 众所周知,Vue项目采用了数据双向绑定和虚拟DOM基础,在数据驱动代替DOM频繁渲染已经算是非常高效了,对开发者而言已经非常优化了,那为什么还会有Vue性能优化这一说呢? 因为目前Vue 2.x使用了webpack等第三方打包构建工具,并且支持其他第三方的插件,我们在项目中使用这些工具时可能不同的操作在运行或打包效率上会有不同的效果,下面就来详细说明优化的方向。 <!--more--> ## v-if 和 v-show 的使用 - `v-if` 为`false`的时候不会渲染`DOM`到视图,为`true`的时候才会渲染到视图; - `v-show`
more...
如何优雅地使用Vue 弹窗

如何优雅地使用Vue 弹窗

## Dialog地狱 为啥是地狱? 因为凡是有`Dialog`出现的页面,其代码绝对优雅不起来!因为一旦你在也个组件中引入`Dialog`,就最少需要额外维护一个`visible`变量。如果只是额外维护一个变量这也不是不能接受,可是当同样的`Dialog`组件,即需要在父组件控制它的展示与隐藏,又需要在子组件中控制。 <!--more--> 为了演示我们先实现一个`MyDialog`组件,代码来自ElementPlus的Dialog示例 **`MyDialog`组件:** ```javascript <script setup lang="ts"> i
more...
再谈前端状态管理

再谈前端状态管理

# 什么是状态管理? ## 状态 状态是表示组件当前状况的 JS 对象。在 React 中,可以使用 useState 或者 this.state 维护组件内部状态,通过 props 传递给子组件使用。 为了避免状态传递过程中出现混乱,React 引入了“单向数据流”的理念。主要思想是组件不会改变接收的数据,只会监听数据的变化,当数据发生变化时他们会使用接收到的新值,而不是修改已有的值。当组件的更新机制触发后,他们只是使用新值进行重新渲染。 父子组件通信可以直接使用 props 和回调方式;深层次、远距离组件则要通过“状态提升”和 props 层层传递。 <!--
more...
5 分钟搞懂 Monorepo

5 分钟搞懂 Monorepo

> *由于谷歌在 Monorepo 上的实践,Monorepo 受到了越来越多的关注。Monorepo 意味着把所有项目的所有代码统一维护在一个单一的代码版本库中,和多代码库方案相比,两者各有优劣,需要根据公司文化和产品特性进行取舍。原文:What is monorepo? (and should you use it?)[1]* *Monorepos(单一代码库)有助于加快开发工作流程,在本文中,我们将帮助你认识这一代码组织模型是否适合你的团队和公司。* <!--more--> # 什么是 monorepo? *Monorepo* 的意思是在版本控制系统的单个代码库里
more...
基于Vue3开发自己的组件库

基于Vue3开发自己的组件库

## 项目创建 ### 一、使用脚手架创建一个vue项目 `vue create m-baseui` 快速初始化一个项目 <!--more--> ### 二、修改和创建目录 1.将src文件夹修改为examples 2.创建packages文件夹,用来进行组件编写 ![img](http://www.lixianglong.cn/bg_store/img/content/1422714-20220520104228900-446930740.png) 描述: - `packages/components`: 存放组件。 - `pack
more...