cookcyq__的博客

随意建个文件并以 use 开头作为文件名，例如：useCounter.js，示例代码如下：useXXX 仅作为一种声明规范，看你心情定义。count: 0,}),getters: {},actions: {})state当作声明 Vue2dataor Vue3里的响应式数据。getters当作 Vue2/3 里的computed属性。actions当作 Vue2/3 定义methods函数。

目前网上大部分的打包流程都不能满足我的理解和需求，而官方的解释也只说明一半，这次我就干脆将 vite/vue-cli 这两者的打包流程详细梳理下。在 vue-cli 使用打包项目后，默认会提供一个入口（通常是 index.html），然后引入一个 js 入口文件完成页面的渲染。其实 vue-cli 还支持将项目作为一个库的方式来进行打包，这里需要借助命令 ，此命令会将入口文件打包成一个库吗，具体可参考官方解释接下来我会逐步详解如何构建属于自己的库。

Vue3 JSX 插槽、v-model 的用法以及与 React JSX 的区别。

Babel 给 ES6/7/8/9 Typescript、React / Vue3 JSX 等"语法糖"带来无限的可能。

在 Vue3 中使用 TS 时，父组件通过provide函数注入的数据类型往往是未知的，而子组件调用inject引入数据时也无法确定具体的数据类型是什么，这就产生了可维护性问题，比如某位同事写了下面这段代码时import {对于colors导数的数据类型我们并不知道是什么，它可以是对象 or 数组亦或是字符串，只能顺瓜摸藤找到它的 provide，对于小项目找一下可能不花费什么时间，但对于大型项目来说很明显是不可取的，于是官方提供了函数来对传参进行类型约束，确保父子间传递的数据类型是可见、透明的。

以上代码的作用在 vue 官方都有解释，但它还隐藏了与 vue-cli 构建有关的一个很有用的功能，类似的，其它插件如 i18n、vuex、vant 等都要借助 app.use 引入，构建属于自己的组件库，这样既可以单独维护，也可以减少主体项目的代码量。命令，此命令可以将文件打包成一个可作为依赖导入的 js 库，在 vue3 中，默认初始化 vue 的方式是这样的。方法，实现组件自引，一个库不止一个组件，你可以在。方法会在引入插件时自动被 vue 调用，方法，是的，组件本身也是一个对象，

实现瀑布布局思路方案1： 每个元素设置绝对定位实现思路为每个元素设置 left / top取列数高度最小的那列作为本次插入目标优点：实现过度效果更灵活，比如删除一个元素时，所有元素重新排位，可以使布局错乱感较美观。缺陷：元素都是定位的，内容动态变化时每个元素的位置得重新计算。效果图方案2： 先布列，再分配元素实现思路提前创建好列数取列数高度最小的那列作为本次插入目标优点：计算量较少，每列的元素高度随内容进行自适应。缺陷：动画效果较少，比如删除一个元素

关于 Vue3 reactive 函数嵌套 computed / inject / props 的情况

以下是笔者整理 vue3 日常工作所用到的文章，会不定期更新，如果是新手的话建议按照顺序阅读。

Vue3 如何使用多语言 vue-i18n

Vue3 如何使用 vuex

Vue3 如何使用 vue-router 以及路由权限拦截

Vu3 setup 函数的用法、作用

通过上面案例我们还能清楚的看到父组件和子组件任意方改动数据时都会同步更新，但建于后续的维护，官方的推荐做法是由调用。属性，这里就会有问题，如果父组件的数据需要送到 N 层子组件，那么就要传递 N 次。多层嵌套的问题，有了它，只需声明一次数据就够了，使用方式也很简单。本文就到这里，对于使用 TS 项目的同学，建议前往。父组件中管理并提供函数，子组件只需引入调用即可。函数的组件负责维护，这里便是由父组件。函数，使用方式也很简单，是。父组件的数据，我们只需在。函数导出数据， 然后。的数据， 子组件只需。

Vue3 轻松理解 toRef 和 toRefs 的作用、用法、区别，并举例一些简单案例。

Vue3 理解 ref 和 reactive 的用法、区别Vue3 新出的这俩属性 ref / reative 跟 Vue2 中的 data 一样是用来定义数据的，使用了这两个后， data 基本就用不到了，下面是笔者对这两个属性的一个总结：ref 常用于基本类型：Boolean / Number / String / ...reactive常用于引用类型：Object / Array ....用法如下：<template> <div v-if="show">

3333

据官方文档 [https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild]里面的开头说明：明确指出源节点消失是引用问题，要想保留源(元素)节点可以使用 Node.cloneNode(true) 属性，其中 true 表示深拷贝。...

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar