前端开发13小时前
下面的代码在对ref实例赋值完之后。既：test.value = { name: 1 }，会发现不执行watch里面的回调函数了，这是为什么呢？ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="view...
前端开发17小时前
目录 computed watch methods 归纳三者不同点 1、methods 2、computed 3、watch 在Vue中，computed、watch和methods是处理响应式数据的三种方式。它们的主要区别在于计算方式、响应方式和使用场景。 computed computed是一种计算属性，它会根据所依赖的响应式数据自动计算出一个新的值，...
前端开发前天 21:53
目录 Ⅰ. ref、reactive ( 递归监听 ) Ⅱ. isRef、isReactive ( 判断 ) Ⅲ. toRef 和 toRefs ( 解构 ) Ⅳ. toRaw 、 markRaw ( 解除代理) Ⅴ. unref ( 拷贝 ) Ⅵ. shallowRef 、shallowReactive（ 非递归监听 ） Ⅶ. triggerRef （强...
前端开发前天 20:31
在Vue3中，全局使用按钮截流指令的方法与Vue2中有所不同，可以根据以下步骤进行： 1.创建一个自定义指令文件，例如throttle.js，该文件中实现按钮截流逻辑的代码。示例代码如下： export default { mounted(el, binding) { let timeoutId; const delay = parseInt(bindin...
前端开发前天 14:06
目录 一、不传参的事件处理 1.原理 2.代码示例 二、传参的事件处理 1.原理 2.代码示例 总结 总览 1.传参的事件绑定 2.不传参的事件绑定 一、不传参的事件处理 1.原理 1.1 我们在vue模板实例中，给标签设定一个属性：v-on:click=“xxx”（可以简写为 @click=“xxx”），然后赋一个函数名 A。 1.2 意思就是，如果我们...
前端开发前天 20:08
目录 前言 按需引入 一、误区 二、正确手法 1、安装插件 2、更改.babelrc配置 3、 新建auto-import-elementUI.js文件，注册需要用到的组件 4、main.js引入 前言 为了减小项目打包体积，提高项目性能，对Element UI组件进行按需引入，但是在实际实践过程中遇到了比较有意思的问题，官方写的demo然而并不能行的通，...
前端开发前天 14:04
目录 1. 确定需求 2. 设计组件结构 3. 实现功能 3.1 生成随机字母验证码 3.2 刷新验证码 3.3 提交验证码 4. 效果演示 5. 总结 1. 确定需求 在实现字母验证码之前，我们需要明确需求并准备好设计思路。字母验证码通常用于保护网站或应用程序的安全性，可以防止垃圾邮件、恶意攻击等不良行为。因此，我们需要实现以下功能： 随机生成指定长度的...
前端开发2026年02月04日
目录 前言 父子组件之间传参 兄弟组件之间传参 provide/inject传参 总结 前言 Vue组件传参方也是面试最常考的内容，犹记得当初刚出来实习的时候，遇到一个需求，大概就是一个tabs下面有五个子页面，每个子页面表示订单的一种状态。当时是把五个子页面抽成了五个组件，做完后又有一个问题，就是在一个页面更改了数据状态之后，切换到另一个页面的时候要通知...
前端开发2026年02月04日
引言 一个 Vue 组件在使用前需要先被“注册”，这样 Vue 才能在渲染模板时找到其对应的实现。 组件注册有两种方式：全局注册和局部注册。 全局注册 我们可以使用 Vue 应用实例的 app.component() 方法，让组件在当前 Vue 应用中全局可用。 import { createApp } from 'vue' const app = cr...
前端开发2026年02月03日
Vue 内部的组件是以虚拟 dom 形式存在的。下面的代码就是一个很常见的虚拟 Dom，用对象的方式去描述一个项目。相比 dom 标签相比，这种形式可以让整个 Vue 项目脱离浏览器的限制，更方便地实现 Vuejs 的跨端 { tag: 'div', props: { id: 'app' }, chidren: [ { tag: Container, pr...