vue3

写在前面 这篇文章记录我在使用el-upload时删除图片时遇到的一些坑，导致删除文件异常。 坑1 文件数据删除，页面图片还在 正常上传图片之后，点击删除按钮，图片没有删除，但是文件列表已经清空了，效

> **开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第26天，[点击查看活动详

写在前面 我们这篇文章就是介绍vue3依赖注入的使用。 依赖注入 依赖注入指的是provide和inject这一对函数。一个父组件相对于其所有的后代组件，会作为依赖提供者。任何后代的组件树，无论层级有

写在前面 在实际项目开发过程中，对于按钮的提交事件来说，我们需要限制按钮重复点击，避免在某个时间内重复提交。这时候我们一般用到事件的防抖，也就是说在规定时间连续多次触发事件，回调函数只会执行最近的一次

实现思路 首先我们分析一下要根据文本的宽度是否超过展示提示框，那么就必须要获取文本的宽度和容器的宽度，然后还要根据el-tooltip的disabled属性来判断是否需要展示tool-tip。我们可以

document.execCommand('copy') 在很久之前我们是使用document.execCommand('copy')来实现复制文本的，但是现在mdn上已经将这个命令废弃了。 当一个

插件的作用场景 通过app.component()和app.directive()注册一到多个全局组件或自定义指令 通过app.provide()使一个资源可被注入进整个应用 向app.config.

el-upload上传文件 我们先来看一下el-upload可以配置哪些属性和事件。 属性 action: 请求url headers: 设置上传的请求头部 method: 设置上传请求方法 mult

自定义指令 vue3中的自定义指令和vue2中的自定义指令差不多，也有两种定义方式：局部定义和全局定义。在作用上是一样的，只是在具体定义和使用上有一些差别。 局部定义 在 <script setup>

vue3生命周期 vue3中的生命周期和vue2的生命周期不一样。主要差异就是多了一个setup钩子，取代了之前的creat相关的钩子。而且不再有destroy相关的生命周期了，取而代之的是unmou

组合式函数 “组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。组合式函数逻辑复用的核心思想就是在组合式函数里写逻辑代码，需要在模板中使用或其

计算属性 我们一般使用计算属性来描述依赖响应式状态的复杂逻辑。 计算属性的用法 在vue3中计算属性的用法和在vue2中的不一样。 效果如下： 从上述效果图中我们可以看出，计算属性返回的变量相当于是一

toRaw toRaw是返回reactive或readonly proxy的原始对象。也就是说将一个由reactive生成的响应式对象转为普通对象。这是一个转义口，可用于临时读取而不会引起 proxy

回顾ref和reactive的区别 ref和reactive的区别就是： 类别 ref reactive 返回数据类型 RefImpl对象（也叫ref对象） Proxy对象 传入基本类型返回 {val

ref和reactive它们在用法上区别还是蛮大的，一个针对基本数据类型，一个针对复杂数据类型。而toRef和toRefs它们其实在用法上是很类似的，都是用来复制reactive里面的属性然后转成re

定义响应式数据 在使用ref和reactive定义响应式数据的时候，它们的使用场景是不一样的。 1. ref 1.1 使用方法 定义基本类型数据 效果如下： 可以看出ref就是将基础数据转换为响应式数

vue3响应式原理是vue3的核心。我们已经介绍过vue数据响应式原理是通过数据劫持结合发布订阅者模式来实现的。其中在vue2中数据劫持是通过Object.defineProperty()来实现的。