随笔分类 - Vue3/Vue2框架生态链
摘要：一、Vue3中使用 component :is 加载动态组件 1、不使用setup语法糖，这种方式和vue2差不多，is可以是个字符串 2、使用setup语法糖，这时候的is如果使用字符串就会加载不出来，得使用组件实例 <component class="task-box" :is="compone
阅读全文
摘要：1、问题背景 我在一个 js 文件里需要使用 pinia 去修改状态存储里的内容，但是在引入 pinia 的时候，比如 cont store = useStore() 时发现报错：getActivePinia was called with no active Pinia. 说是实例在文件中使用的时
阅读全文
摘要：一、unplugin-vue-components 插件 unplugin-vue-components 插件可以在Vue文件中自动引入组件（包括项目自身的组件和各种组件库中的组件）作者是Vite生态圈大名鼎鼎的Anthony Fu。使用此插件后，不需要手动编写 import { Button }
阅读全文
摘要：一、为什么需要使用Git Subtree 关于子仓库或者说是仓库共用，git官方推荐的工具是git subtree。 在实际的项目开发过程中，公共的代码或者模块是必定会出现的，为了不重复写相同的代码；普遍的做法就是将其抽取成一个公共模块，这个模块由不同的使用者引用。 作为Java工程师，可能会选择将
阅读全文
摘要：一、Pinia 简介及其使用 1、pinia 和 vuex 具有相同的功效， 是 Vue 的存储库，它允许您跨组件/页面共享状态。其设计使用的是 Composition api，更符合vue3的设计思维。Pinia 对 Vue 2 和 Vue 3 都有效。 2、安装 Pinia：npm i pini
阅读全文
摘要：一、Vue.use() 作用 上述代码截取自vue源码 global-api 下的use.ts文件，它导出一个initUse方法，参数传入Vue。内部use方法接收plugin参数，该参数就是我们编写的插件。同时定义了一个数组，当数组中存在传入的插件，会直接返回，即实现自动阻止多次注册相同的插件。
阅读全文
摘要：一、了解下 vue 的处理问题演进 Vue.js 从 1.x 到 2.0 版本，最大的升级就是引入了虚拟 DOM 的概念，它为后续做服务端渲染以及跨端框架 Weex 提供了基础。 Vue.js 2.x 发展了很久，现在周边的生态设施都已经非常完善了，而且对于 Vue.js 用户而言，它几乎满足了我们
阅读全文
摘要：一、Jest 和 Mocha 对比选型 至于：前端为什么做单元测试？JavaScript 单元测试的现状，常见单元测试工具：Jest 和 Mocha 的对比，可以看这篇文章了解：https://mp.weixin.qq.com/s/r08NghhRybAwBX9dzcoE1w 从 github st
阅读全文
摘要：一、Svelte 介绍 Svelte 是一种全新的构建用户界面的方法。传统框架如 React 和 Vue 在浏览器中需要做大量的工作，而 Svelte 将这些工作放到构建应用程序的编译阶段来处理。 与使用虚拟（virtual）DOM 差异对比不同。Svelte 编写的代码在应用程序的状态更改时就能像
阅读全文
摘要：一、vuex 的 state 如何保证其响应式 vuex 的 store对象的 state 是响应式的，凡是预先在 state 中定义的状态，都会被加入到响应式系统中，当状态发生了变化，所有引用状态的 vue 文件的 template 都会随之发生变化，做到响应式的功能。 但是其前提是：提前定义好的
阅读全文
摘要：一、vuex的基本使用 1、vuex 的基本结构及基本使用：src/store/index.js 中，代码如下 // vue3中创建store实例对象的方法createStore()按需引入 import { createStore } from 'vuex' export default crea
阅读全文
摘要：一、vue2 中 sync 修饰符的功能在 vue3 中如何呈现？ 1、sync 修饰符回顾 1、vue 规则：props 是单向向下绑定的，子组件不能修改 props 接收过来的外部数据。 2、如果在子组件中修改 props ，Vue会向你发出一个警告。（无法通过修改子组件的props来更改父组件
阅读全文
摘要：一、通过 ref 获取子组件实例中的DOM结构数据及方法 setup 怎么获取子组件的 ref ？在 Vue3 中，如果要在父组件拿到子组件(子组件的DOM结构、数据、方法)，可以通过 ref。即在父组件中定义响应式数据 ref(null) ，并绑定给子组件，在需要的时候，通过定义的响应式变量即可获
阅读全文
摘要：一、Prettier代码格式化工具 Prettier 是一个代码格式化工具，它可以支持 js/jsx/ts/flow/json/css/less/scss 等文件格式。 1、为什么要使用 Prettier？ 用来替代 lint 中的一些场景，比如说分号/tab缩进/空格/引号，这些在lint工具检查
阅读全文
摘要：一、场景 先理解什么是 Hook，拿 React 的介绍来看，它的定义是： 它可以让你在不编写 Class 的情况下，让你在函数组件里“钩入” React state 及生命周期等特性的函数 对于 Vue 提出的新的书写 Vue 组件的 API：Composition API RFC，作用也是类似，
阅读全文
摘要：一、环境变量配置 在项目开发中我们需要配置环境变量：开发环境，生产环境和测试环境。在cli 2.0的版本中我们是通过在config文件夹进行配置的，vue/cli 3.0相对简单，只需要在项目根目录创建 .env 文件即可。以下是环境对应文件名和命令 模式 对应npm命令 对应文件名称 develo
阅读全文
摘要：一、reactive 创建的响应式对象解构后为什么会失去响应式 Vue 拥有一个响应式系统，可以让它在数据更新的时候自动进行视图的更新。在Vue3.0中，可以使用 reactive 声明响应式状态。文档说不要解构 reactive 创建的响应式对象，为什么？因为会失去响应式的功能，那为什么会失去，我
阅读全文
摘要：想在你的Vue组件之间共享代码？如果你熟悉 Vue 2 则可能知道使用 mixin ，但是新的 Composition API 提供了更好的解决方案。在本文中，我们将研究 mixins 的缺点，并了解 Composition API 如何克服它们，并使Vue应用程序具有更大的可伸缩性。 一、Mixi
阅读全文
摘要：一、问题背景 vue3使用el-form的时候，如下代码，会导致输入框无法输入，无法赋值，选择框无法选择 <el-form ref="service" :model="service" label-width="80px"> <el-form-item label="名称"> <el-input v
阅读全文
摘要：一、使用reactive函数声明数组如何正确赋值 需求：将接口请求到的列表数据赋值给响应数据 array const arr = reactive([]); const load = () => { const res = [2, 3, 4, 5]; //假设请求接口返回的数据 // 方法1 失败，
阅读全文