- 博客(27)
- 收藏
- 关注
RSS订阅原创 Vue3的优势
1. 性能优化：Vue3在内部进行了重写和优化，采用了新的响应式系统（Proxy），相较于Vue2中的Object.defineProperty，更具性能优势。需要注意的是，尽管Vue3在许多方面进行了改动和优化，但Vue团队仍然会继续维护和支持Vue2版本，并提供迁移指南，以方便开发者平滑迁移到Vue3。7. 更好的Tree-Shaking支持：Vue3通过ES模块的方式进行导出，能够更好地与工具（如Webpack）配合，实现更好的Tree-Shaking，减少代码的冗余和打包体积。
2024-01-24 23:55:21
488
原创 分析Vue3生命周期
在Vue中，生命周期是组件从创建到销毁的整个过程中的不同阶段。Vue组件的生命周期主要由一系列的钩子函数（hook functions）组成。以下是Vue组件生命周期的主要阶段：1. 创建阶段：- beforeCreate：在实例被创建之前调用，此时组件的响应式属性和事件还未初始化。- created：在实例创建完成后调用，此时组件的数据已经初始化完成，但DOM还未生成，可以进行一些初始化操作。2. 挂载阶段：- beforeMount：在组件挂载到DOM之前调用，此时DOM元素尚未生成。
2024-01-24 23:53:11
1609
原创 Vue3与Vue2的区别和优化
这使得在Vue3中对数据的追踪和依赖维护更加高效，因为Proxy可以直接监听对象上的属性的变化，而无需像Vue2那样遍历对象的每个属性。Vue3通过模板的静态分析和编译优化，减少了编译的工作量，并且生成的渲染函数的执行效率更高。综上所述，Vue3在多个方面进行了优化，提升了性能和开发体验，在开发大型应用和对性能要求较高的项目中，Vue3相较于Vue2是一个更好的选择。4. 更小的包体积：Vue3对打包体积进行了优化，将一些内部逻辑进行了拆分，并进行了一些懒加载处理，这使得Vue3的包体积较Vue2更小。
2024-01-20 20:27:33
574
原创 新的生命周期钩子
在 `mounted` 钩子中，可以访问到DOM元素，执行一些基于DOM的操作，如绑定事件、初始化图表等。在Vue.js 3中，一些生命周期钩子函数的名称发生了变化，如 `beforeCreate` 改`beforeCreate`、`mounted` 改为 `mounted`，所以在使用时需要注意对应的钩子函数名称。需要注意的是，在Vue.js 3中，`beforeDestroy` 和 `destroyed` 生命周期钩子被废弃了，被 `beforeUnmount` 和 `unmount` 所取代。
2024-01-18 21:25:18
1009
原创 getters配置项
Getters（获取器）是在计算机编程中用于获取对象属性或状态的方法。Getters 是一种函数，其目的是获取对象的某个属性的值，并将其返回。在很多编程语言和框架中，特别是在面向对象编程中，通过定义 Getters 方法可以允许其他部分访问对象的私有属性或计算衍生属性。Getters 的主要作用是提供一个公共接口，使其他代码可以获取对象内部的数据，而不需要直接访问对象的属性。这样可以提高代码的封装性和安全性，同时也方便了其他代码与对象之间的交互。
2024-01-16 20:24:21
804
原创 TodoList本地存储
本地存储是指将数据保存在设备本地的存储介质上，而不是保存在网络或云端服务器上。这种存储方式允许用户在没有网络连接的情况下访问和修改数据。常见的本地存储设备包括硬盘驱动器、固态硬盘、闪存驱动器和内存卡等。数据可以以文件、文件夹或数据库的形式存储在这些设备上。本地存储可以用于各种目的，例如保存个人文件、音乐、照片、视频和应用程序数据等。它也可以用于离线工作，备份数据或存储敏感信息，如密码和身份验证令牌。
2024-01-16 20:20:56
772
原创 Vue实例博客
在 Vue.js 中，Vue 实例是一个 Vue 应用程序的根实例。它是 Vue.js 的核心概念之一，也是使用 Vue.js 构建应用程序的基础。一个 Vue 实例是通过构造函数 `Vue` 创建的，它接受一个配置对象作为参数。配置对象可以包含各种选项，用于定义 Vue 实例的行为和特性。在创建 Vue 实例时，配置对象可以包含以下选项：- `el`：指定要挂载到的页面元素，可以是元素的选择器字符串或实际的 DOM 元素。- `data`：定义 Vue 实例的响应式数据。
2024-01-11 19:47:51
908
原创 Vue.set()
Vue.set()` 是 Vue.js 提供的用于在响应式对象中添加响应式属性的方法。在默认情况下，Vue.js 可以检测到已经存在的对象的属性并将其转换为响应式属性，但是对于后期动态添加的属性，Vue.js 无法自动进行响应式转换。这时，可以使用 `Vue.set()` 方法手动将属性转换为响应式。`Vue.set()` 方法接受三个参数：对象、属性名和属性值。')上述代码将 `someObject` 对象的 `newProperty` 属性设置为 `'Hello, Vue!
2024-01-11 19:42:46
818
原创 ReactRouter6的用途和好处
React Router 6 是 React Router 库的最新版本，与 React 一起，它是 React 生态系统中最受欢迎和常用的库之一。React Router 6 提供了许多有用的新特性和改进，包括以下几个方面：1. 更简化的 API：React Router 6 使用了更简单的 API，不再需要使用`<Switch>`、`<Link>`和`<Redirect>`等组件，而是直接使用`<Routes>`和`<Route>`组件即可。这使得定义路由更加简单明了。
2024-01-11 19:35:01
420
原创 react中的路由导航
路由导航（Route Navigation）是指在Web应用程序中，由用户操作或程序自动触发，切换和加载不同的路由（Route）或页面（Page）的过程。在单页应用（Single-Page Application, SPA）中，路由导航通常是通过浏览器的URL地址实现的。通过在URL中指定不同的路径和参数，可以导航到不同的路由或页面，以提供个性化和动态化的用户体验。在前端框架中，常见的路由导航实现包括：1. 静态路由导航：直接通过路由的链接或点击事件进行导航。
2024-01-11 19:33:20
1636
原创 Params参数
在Web开发中，Params参数指的是URL路径中的参数。URL（Uniform Resource Locator）是用来标识和定位资源的字符串，一般形式为`protocol://hostname:port/path?Params参数位于URL路径中，以冒号（:）开始，用于标识相对应的值。参数部分是`123`，它是一个占位符，用于标识特定的用户ID。这个参数将被动态地插入到URL路径中，以便在浏览器中访问和使用。
2024-01-03 21:28:04
3704
1
原创 react的大体知识点
3. 类组件与函数组件：React组件可以是类组件或函数组件。1. 组件生命周期：组件生命周期指的是在组件从实例化到销毁的整个过程中，组件会经历的一系列生命周期阶段。React 16.3版本之前，组件的生命周期包括挂载阶段（Mounting）、更新阶段（Updating）和卸载阶段（Unmounting）。同时，还有许多其他的React生态系统相关的工具和库，如React Router、Redux、MobX等，可以进一步扩展和提升React应用程序的功能。键是帮助React识别更新或删除元素的重要属性。
2024-01-02 22:23:02
341
原创 TodoList
在 React 中，“TodoList” 可以是一个自定义组件，用于展示和管理待办事项列表。它可以是一个类组件或函数式组件，具体的实现方式取决于开发者的偏好。
2024-01-02 22:20:33
1036
原创 react生命周期
在 React 中，组件的生命周期指的是组件从被创建到被销毁的整个过程中经历的一系列方法调用。这些方法被称为生命周期方法，它们提供了在不同阶段执行代码的机会，用来处理组件的初始化、更新和销毁等操作。
2023-12-28 23:58:53
915
1
原创 react中props的使用
在 React 中，props 是组件的一个传递属性。它是一个包含一些键值对的 JavaScript 对象，其中的每个键值对都表示一个传递给组件的属性。props 可以从父组件通过声明式语法传递给子组件，在子组件中通过 this.props 访问传递的数据。通过props, 父组件会把自己的状态或者行为传递给子组件，让子组件完成自身的视图或者行为逻辑。在子组件中，props 是只读的，也就是不能再子组件中被直接修改。
2023-12-26 21:49:12
423
1
原创 React中的事件绑定
无论使用哪种方法，事件处理程序接收一个事件对象作为参数，你可以通过访问该对象的属性和方法来获取有关事件的信息。例如，`event.target` 可以获取触发事件的元素。如果你在使用函数式组件和 React 的钩子，可以使用 `useEffect` 钩子来绑定事件。在 JSX 中，可以直接在元素上使用内联事件处理程序。在 React 中，可以通过事件绑定来处理用户的交互操作。如果你在使用类组件，可以在组件类中定义事件处理方法，并在元素上绑定这些方法。
2023-12-17 22:52:33
545
1
原创 RBAC角色权限管理
RBAC，即角色基于访问控制（Role-Based Access Control），是一种常见的访问控制机制。它基于角色的权限分配来管理系统资源的访问。RBAC将权限与角色关联起来，而不是直接将权限赋予用户。通过将用户分配到适当的角色，可以简化访问控制的管理和维护。
2023-10-26 01:14:59
73
原创 如何处理服务器之间的token
JWT 即Json Web Token，将用户登录状态以及数据用加密的json格式存储在客户端，服务端可以完全依靠这个字符串认定用户身份。简单来说，这是一种用户身份认证的解决方案。
2023-10-25 01:33:30
638
1
原创 蓝湖的使用方法：
与设计工具的无缝集成。它支持与诸如Adobe XD、Sketch、Photoshop和Figma等常用的设计工具进行集成，使设计师可以直接上传和同步设计文件到蓝湖平台上。这样，团队成员可以轻松地查看、评论和下载最新版本的设计文件，而不需要频繁地发送文件或使用其他工具。蓝湖是一个高效的产品设计协作平台，能够无缝衔接产品、设计、研发流程降低沟通成本，缩短开发周期，提高工作效率。总的来说，蓝湖是一个以设计协作为核心的平台，旨在帮助设计团队更高效地协同工作、保持一致的设计风格，并减少沟通和版本控制方面的问题。
2023-09-21 00:58:19
318
原创 表格列序问题
appendChild() 方法将一个节点附加到指定父节点的子节点列表的末尾处。如果将被插入的节点已经存在于当前文档的文档树中，那么 appendChild() 只会将它从原先的位置移动到新的位置（不需要事先移除要移动的节点）。数组中的每个元素执行相同的操作。在这里，每个元素都被添加到。是一个包含DOM元素的数组。
2023-09-21 00:34:13
40
原创 演示总结：
参数 a 和 b 在函数内部被重新声明和赋值，这会导致函数内部使用的是重新声明和赋值后的 a 和 b 的值，而不是传入函数的参数值。console.log(abc) 只打印了函数本身，而不是执行函数并打印结果。应该使用 console.log(abc())，加上小括号执行函数并打印返回值。在函数内部，使用 let 关键字重新声明 a 和 b 是多余的，因为已经有了参数 a 和 b。重新声明的变量会屏蔽外部的同名变量，导致无法访问外部的参数值。每日复习基础的JS代码，对于一些常用的语法案例进行练习。
2023-09-19 22:50:07
43
原创 如何使用箭头函数
箭头函数最早是在ECMAScript 6（ES6）规范中引入的，也被称为ES2015。它的设计目标是简化函数的书写，并提供更清晰的语法。在之前的版本中，定义函数需要使用function关键字，并且函数体内部的this指针是动态绑定的，经常会导致this指向的问题。为了解决这个问题，并且简化函数定义的语法，箭头函数被引入到了ECMAScript规范中。
2023-09-18 22:32:01
147
原创 如何使用箭头函数
在ES6中新增了函数的简写方式----箭头函数，箭头函数的出现不仅简化了大量代码，也让代码看起来更加优雅，同时也解决了this指向问题。map() 方法定义在JS的Array中，它返回一个新的数组，数组中的元素为原始数组调用函数后处理的值。thisValue：可选，对象作为该执行回调时使用，传递给函数，用作“this”的值。map（）函数不会改变原始数组，它形成的是一个新数组。index：可选，当前元素的索引也就是第几个数组元素。arr：可选，当前元素属于的数组对象。数组中的每个元素都会执行这个函数。
2023-09-18 20:25:24
33
原创 数据驱动(MVVM)理解
数据驱动（Data-Driven）的理解：数据驱动是 Vue 的核心理念之一，也是 Vue 区别于其他框架的重要特点。它基于 MVVM（Model-View-ViewModel）架构模式，将视图（View）与数据（Model）进行了解耦，而通过 ViewModel 进行双向的。
2023-09-17 18:50:06
115
1
原创 关于Symbol
Symbol 的主要特点是其值的唯一性，即使两个 Symbol 具有相同的描述，它们也是不相等的。这使得 Symbol 特别适用于用作对象属性键，这样可以避免命名冲突的风险。方法创建的 Symbol 可以在全局符号注册表中检索到，从而实现跨域、跨页面共享 Symbol 的能力。Symbol 是 JS中的一种基本数据类型。
2023-09-17 17:59:04
35
1
原创 v-if中的key值
在Vue.js中,v-if指令用于条件性的渲染元素。它的key属性是一个可选的属性,用于帮助Vue.js区分每个不同的渲染元素。当v-if的条件发生变化时,Vue.js会使用key属性来确定哪些元素需要被替换,哪些元素需要被保留。key属性的值应该是唯一且稳定的,通常使用一个唯一的标识符或者一个能唯一标识元素的属性值。这样可以确保Vue.js能正确地追踪每个元素的状态,并避免不必要的重新渲染。key的值不要用index，因为index没有唯一性,尽量要把id作为key的值(因为id属性值具有唯一性)
2023-09-13 17:11:18
425
原创 关于修改this指向的问题
其中apply和call是立即调用，等于是直接返回一个结果，如果不返回一个函数的话，外面再调用就报错了而bind不是立即调用的，返回的是一个函数，用例在外面调用的时候输入了参数。修改this指向的三种方法分别是:bind(),call(),apply()。call()、bind()、apply()的用法，改变this的指向，区别在于。
2023-09-12 22:55:41
80
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人