口木秋子

2026年8月3日

摘要： Proxy 和 Object.defineProperty 都可以用来拦截和操作对象的属性访问，但它们在功能、灵活性和适用场景上有显著的区别。 1. Object.defineProperty 功能用于定义或修改对象的属性，包括属性的值、可写性、可枚举性、可配置性等。主要用于对单个属性进行细粒度阅读全文

posted @ 2026-08-03 22:02 口木秋子阅读(2) 评论(0) 推荐(0)

vue 的响应式开发比命令式有哪些优势？

摘要： Vue 的响应式开发相较于命令式开发有以下优势：简化代码：在 Vue 中，通过将数据和模板绑定起来实现视图更新的自动化，从而避免了手动操作 DOM 的繁琐和容易出错的操作。因此，可以大幅减少编写样板代码和调试代码所需的时间。提高可维护性：使用 Vue 的响应式开发可以帮助我们更方便地管理应用程序阅读全文

posted @ 2026-08-03 21:58 口木秋子阅读(2) 评论(0) 推荐(0)

Vue中，created和mounted两个钩子之间调用时间差值受什么影响？

摘要： created 和 mounted 这两个生命周期钩子，分别在实例创建和挂载的不同阶段被调用。它们之间的时间差值主要受以下几个因素的影响：模板编译时间：当实例被创建时，Vue 会编译模板（或将模板转换为渲染函数），这个过程在 created 钩子之前完成。如果模板非常复杂或包含大量指令、组件，阅读全文

posted @ 2026-08-03 21:53 口木秋子阅读(1) 评论(0) 推荐(0)

vue 文件中，在 v-for 时给每项元素绑定事件需要用事件代理吗，为什么？

摘要：在 Vue 文件中，v-for 遍历数组时，为每项元素绑定事件通常不需要事件代理，但使用事件代理有其优势。这里是两种方式的对比：直接绑定事件 <div v-for="item in items" :key="item.id"> <button @click="handleClick(item)"> 阅读全文

posted @ 2026-08-03 21:52 口木秋子阅读(2) 评论(0) 推荐(0)

说说你对slot的理解？slot使用场景有哪些？

摘要：一、slot是什么在HTML中 slot 元素，作为 Web Components 技术套件的一部分，是Web组件内的一个占位符，该占位符可以在后期使用自己的标记语言填充。在Vue中的概念Slot 名插槽，我们可以理解为solt在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就阅读全文

posted @ 2026-08-03 21:50 口木秋子阅读(2) 评论(0) 推荐(0)

说说Vue 页面渲染流程

摘要：前言在 Vue 核心中除了响应式原理外，视图渲染也是重中之重。我们都知道每次更新数据，都会走视图渲染的逻辑，而这当中牵扯的逻辑也是十分繁琐。本文主要解析的是初始化视图渲染流程，你将会了解到从挂载组件开始，Vue 是如何构建 VNode，又是如何将 VNode 转为真实节点并挂载到页面。挂载组件阅读全文

posted @ 2026-08-03 21:44 口木秋子阅读(4) 评论(0) 推荐(0)

Vue组件间通信方式都有哪些?

摘要： props传递数据适用场景：父组件传递数据给子组件子组件设置props属性，定义接收父组件传递过来的参数父组件在使用子组件标签中通过字面量来传递值 Children.vue props:{ // 字符串形式 name:String // 接收的类型参数 // 对象形式 age:{ type:N 阅读全文

posted @ 2026-08-03 21:35 口木秋子阅读(2) 评论(0) 推荐(0)

2026年7月31日

Vue 中的 h 函数有什么用？

摘要： 1. h 函数概述在 Vue 中，h 函数是一个用于创建虚拟 DOM 节点的工厂函数。它的全称是 createElement，在 Vue 3 中，它通常被直接引用为 h。 2. 基本用法 h 函数的基本语法如下： h(tag, props, children) tag: 字符串或组件对象，表示要创阅读全文

posted @ 2026-07-31 20:29 口木秋子阅读(6) 评论(0) 推荐(0)

vue3 相比较于 vue2，在编译阶段有哪些改进？

摘要：以下是一些主要的改进： 1. 虚拟 DOM 的优化 Proxy 代理：Vue 3 使用 Proxy 对象来实现响应式系统，而 Vue 2 使用 Object.defineProperty。Proxy 提供了更灵活和高效的方式来追踪对象的变化。静态节点提升：Vue 3 在编译阶段对静态节点进行了优化阅读全文

posted @ 2026-07-31 20:28 口木秋子阅读(3) 评论(0) 推荐(0)

谈谈 Vue 事件机制，并手写$on、$off、$emit、$once

摘要： Vue 的事件机制允许组件之间进行通信，通过 $on、$off、$emit 和 $once 等方法进行事件的订阅、取消订阅、触发和一次性订阅。我们可以通过手写这些方法来理解其工作原理。 Vue 事件机制 $on(event, callback)：监听特定事件。 $off(event, callbac 阅读全文

posted @ 2026-07-31 20:26 口木秋子阅读(5) 评论(0) 推荐(0)

说说vue中，key的原理

摘要：在 Vue 中，key 是用于帮助 Vue 识别和跟踪虚拟 DOM 的变化的特殊属性。当 Vue 更新渲染真实 DOM 时，它使用 key 属性来比较新旧节点，并尽可能地复用已存在的真实 DOM 节点，以提高性能。 Vue 在进行虚拟 DOM 的 diff 算法时，会使用 key 来匹配新旧节点，以阅读全文

posted @ 2026-07-31 15:41 口木秋子阅读(5) 评论(0) 推荐(0)

vue2 中的虚拟 dom 是怎么实现的？

摘要： Vue 2 中的虚拟 DOM 实现机制基于以下几个核心概念和技术： 1. 虚拟 DOM 节点 VNode（虚拟节点）：Vue 2.x 中的虚拟 DOM 使用 VNode 对象来表示 DOM 元素。每个 VNode 对象包含标签名、属性、子节点等信息。 2. 创建虚拟 DOM _c（createEle 阅读全文

posted @ 2026-07-31 15:38 口木秋子阅读(8) 评论(0) 推荐(0)

React 和 Vue 在技术层面有哪些区别？

摘要： React 和 Vue 是当前比较流行的前端框架，它们在技术层面有以下区别：组件化方式不同：React 是基于组件实现的，组件包含了状态和行为，所有组件共享一个状态树。Vue 也是基于组件实现的，但是每个组件都有自己的状态，并且可以很容易地将数据和行为绑定在一起。数据驱动方式不同：React 使阅读全文

posted @ 2026-07-31 15:35 口木秋子阅读(5) 评论(0) 推荐(0)

Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同？

摘要：通常使用Vue2开发的项目，普遍会存在以下问题：代码的可读性随着组件变大而变差每一种代码复用的方式，都存在缺点 TypeScript支持有限 Composition API 可以说是Vue3的最大特点，以上通过使用Composition Api都能迎刃而解一、Options Api Optio 阅读全文

posted @ 2026-07-31 15:35 口木秋子阅读(2) 评论(0) 推荐(0)

2026年7月30日

Vue 模板是如何编译的

摘要： new Vue({ render: h => h(App) }) 这个大家都熟悉，调用 render 就会得到传入的模板(.vue文件)对应的虚拟 DOM，那么这个 render 是哪来的呢？它是怎么把 .vue 文件转成浏览器可识别的代码的呢？ render 函数是怎么来的有两种方式第一种就是经阅读全文

posted @ 2026-07-30 18:19 口木秋子阅读(4) 评论(0) 推荐(0)

Vue2.0为什么不能检查数组的变化，该怎么解决？

摘要： Vue 2的响应式系统通过 Object.defineProperty 将 data 中的属性转换为 getter/setter，从而在数据被访问或修改时触发更新。技术限制：Object.defineProperty 主要用于拦截对象属性的读写。虽然理论上也能用于数组索引，但为每个索引和数组长度都阅读全文

posted @ 2026-07-30 17:23 口木秋子阅读(3) 评论(0) 推荐(0)

2026年7月28日

浏览器的垃圾回收机制有哪些？

摘要： JS会在创建变量时自动分配内存，在不使用的时候会自动周期性的释放内存，释放的过程就叫 "垃圾回收"。一方面自动分配内存减轻了开发者的负担，开发者不用过多的去关注内存使用，但是另一方面，正是因为因为是自动回收，所以如果不清楚回收的机制，会很容易造成混乱，而混乱就很容易造成"内存泄漏"。由于是自动回阅读全文

posted @ 2026-07-28 18:49 口木秋子阅读(3) 评论(0) 推荐(0)

说说你对 Iterator, Generator 和 Async/Await 的理解

摘要： Iterator 是一个循环接口，任何实现了此接口的数据都可以被 for of 循环遍历 Generator 是一个可以暂停和继续执行的函数，他可以完全实现 Iterator 的功能，并且由于可以保存上下文，他非常适合实现简单的状态机。另外通过一些流程控制代码的配合，可以比较容易进行异步操作。 As 阅读全文

posted @ 2026-07-28 18:48 口木秋子阅读(2) 评论(0) 推荐(0)

如何区分数组和对象？

摘要：方法1 ：通过 ES6 中的 Array.isArray 来识别 console.log(Array.isArray([]))//true console.log(Array.isArray({}))//false 方法2 ：通过 instanceof 来识别 console.log([] inst 阅读全文

posted @ 2026-07-28 18:47 口木秋子阅读(4) 评论(0) 推荐(0)

引用类型有哪些，有什么特点

摘要：在JavaScript中，引用类型是指非基本数据类型，它们是由对象、数组、函数等复杂数据结构组成的。常见的引用类型包括：对象（Object）：对象是JavaScript中最基本的引用类型，它可以用来存储键值对，也可以通过原型链实现继承。数组（Array）：数组是一种有序的集合，可以存储任意类型阅读全文

posted @ 2026-07-28 18:45 口木秋子阅读(5) 评论(0) 推荐(0)

公告