- 博客(46)
- 收藏
- 关注
RSS订阅原创 Vue3里面的setup上下文应用示例
插槽（非响应式的对象，等价于 $slots)：defineSlots 用于声明组件内部的命名插槽，该API是在 < script setup> 里使用的。这个宏可以用于为 IDE 提供插槽名称和 props 类型检查的类型提示。-props的进阶版，相当于props + emit：需要vue3.4+版本。defineProps：父组件传过来的值进行类型验证。中声明组件选项，而不必使用单独的。父组件：关键代码，其它的跟上面一样。子组件：修饰符验证方法1。子组件：修饰符验证方法2。-暴露公共属性（函数）
2024-05-21 14:38:12
88
原创 React里面useMemo和useCallBack的区别
useCallBack计算结果是函数, 主要用于缓存函数，应用场景如: 需要缓存的函数，因为函数式组件每次任何一个 useState 的变化，整个组件都会被重新刷新，一些函数是没有必要被重新刷新的，此时就应该缓存起来，提高性能，和减少资源浪费。useMemo缓存的是二次计算的数据，主要用于缓存计算结果的值，跟vue里面的computed大致相同的作用，这样避免组件重新渲染的时候，再重新执行整个函数，导致之前的二次计算也会重新执行一次。都是依赖数据发生变化，才会去更新缓存数据。
2024-05-21 13:26:02
374
原创 Vue3的setup系列篇之defineEmits和defineProps使用方式
defineEmits：触发事件（函数，等价于 $emit)defineProps：父组件传过来的值进行类型验证。
2024-05-21 13:22:28
109
原创 Vue3的watchEffect、watchPostEffect、watchSyncEffect
flush: 'post'， 如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'flush: sync'，创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发。不需要再指定需要依赖的值，会自动追踪依赖的值。
2024-05-20 12:05:32
161
原创 Vue3的watch使用方式说明
{deep: true, immediate: true, flush: 'post'}：deep是深度监听；flush:如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'，sync'创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发；(newVal1, oldVal) => {}: newVal1是改变后新的值, oldVal是改变前旧的值。attr: 基本类型可以直接监听，引用类型需要用函数返回监听(基本数据类型-监听多个值：对某个值进行判断。
2024-05-19 12:36:27
671
原创 Vue3计算属性的使用
计算属性：需要对数据进行二次运算才使用，里面的值不变调用的话就使用缓存，除非里面依赖的数据项发生改变才会调用函数进行再次运算，依赖项可以有多个。
2024-05-16 16:31:12
126
原创 Vue2和Vue3重置响应式数据
Vue2我们提交表单后，想把表单数据重置到初始是不是这样？Vue3表单初始化就有很多方法，介绍其中一种。可以这样，就节省很多代码。
2024-05-16 16:25:54
255
原创 Vue3选项式和组合式生命周期说明
setup -beforeCreate和created的统称，只在composition里面取消这两个，可以在这里进行数据请求。onUpdated-更新，可以获取到更新后的实例，避免在此期间更改数据，因为这可能会导致无限循环的更新。updated-更新，可以获取到更新后的实例，避免在此期间更改数据，因为这可能会导致无限循环的更新。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。beforeUpdate-更新前，可以在此更改数据。
2024-05-16 13:30:42
502
原创 Vue3组合式响应式数据
number、boolean、string等等使用的方式都跟下面类似；底层实现响应式也是对象，有兴趣的朋友可以去看源码。reactive(attr)只能把Array、Object等了类型作为实参,不能传入基本数据类型。
2024-05-15 13:40:26
433
原创 react组件渲染性能优化之函数组件-useMemo使用
useMemo 计算结果是 return 回来的值, 主要用于缓存计算结果的值。应用场景如：需要进行二次计算的状态。中的计算属性），由于函数组件一旦重新渲染，就会重新执行整个函数，这就导致之前的二次计算也会重新执行一次。，某些时候，组件中某些值需要根据状态进行一个二次计算（类似于。
2024-05-14 09:54:08
469
原创 react组件渲染性能优化之函数组件-useCallback使用
比如：UseCallBackOptimize组件传递了一个事件函数给ChildCom2、ChildCom3，只要其中一个子组件调用这个事件就会影响到另一个子组件重新渲染一次,useCallBack(fn, dependencies) ：fn想要缓存的函数，dependencies有关是否更新 fn 的所有响应式值的一个列表。,useCallBack这个Hooks主要是解决React.memo不能。，但解决不了传递事件的问题。，两个子组件什么都不变的。
2024-05-14 09:49:39
643
原创 react组件渲染性能优化之函数组件-memo使用
的状态时，子组件也会跟着更新，原因很简单，因为父组件更新了，那你子组件当然要重新更新。React.memo只做浅比较，比如修改数组的话，子组件不会更新。，如果你想要控制这个过程，请在第二个参数里面写上你自己的控制流程。你需要对原数组进行深拷贝，然后再赋值给原数组。属性并没有变化，因此子组件不会更新。React.memo只会对对象做浅比较。传递给子组件，此时我们修改。时，由于传递给子组件的。
2024-05-12 14:56:14
456
原创 使用React高阶组件
高阶组件英语全称为 Higher-Order Components，简称 HOC，所谓高阶组件，是 React中一种复用逻辑的技巧。简单示例:比如说现在有个餐厅，餐厅有固定餐牌，客人点了什么直接输入序列号，餐厅获取客人的餐桌号和点的餐单等信息,价钱也不一样。，高阶组件作为一个函数，接收你传入的组件，然后又返回一个新组件给你。
2024-05-09 11:27:34
428
原创 Vue2组件的data为什么是函数，而不是对象
组件实例 data 必须为函数，目的是为了防止多个组件实例对象之间共用一个 data(组件在创建的时候，源码会进行选项合并，会对定义的data进行数据校验，如果不是function，则出现警告)，产生数据污染。采用函数的形式，initData 时会将其作为工厂函数会返回全新 data 对象。根实例对象可以是函数也可以是对象(根实例是单例)，不会产生数据污染。data使用函数形式就不会造成数据污染。data是对象，数据之间会共用、污染。以下为个人见解，仅供参考。
2024-05-08 14:14:48
437
原创 JS各种概念
在前端开发中，常用的模块化方案包括CommonJS、AMD（Asynchronous Module Definition）、CMD（Common Module Definition）和ES6 Modules等。/纯函数（Pure Function）：一个纯函数的输出只取决于输入参数，不会改变任何外部状态或产生副作用。高阶函数（Higher Order Function）：能够接受函数作为参数或返回一个函数的函数。颗粒化（Currying）：将接受多个参数的函数转换为一系列接受单个参数并返回新函数的过程。
2024-05-08 14:00:14
428
原创 Vue2动态添加属性方式
Vue2不允许在已经创建的实例上动态添加新的响应式属性;1.使用Vue.set，里面的参数是Vue.set(target,index, value)2.使用Object.assign，给属性重新赋值。
2024-05-01 18:07:00
481
1
原创 linux常用命令
今天电脑上安装好了centos8.x，这样不需要购买服务器也能练习linux命令了电脑已安装git、nvm,使用nvm管理node版本以下是我总结的命令。
2024-04-30 11:14:08
343
1
原创 理解typescript泛型
/ 泛型定义console.log(getData<string>('你好啊'));// 重载+ 泛型return `名字是：` + vreturn `年龄是：` + vreturn vconsole.log(loadData('旺财'));add(value: T): any{ // void写不写都可以// 求取最小数c2.add(3)c2.add(1)c2.add(32)c2.add(26)//* 定义泛型接口方式1。
2024-04-29 15:42:14
235
原创 typescript方法重载
所谓方法重载（Overloading）是面向对象编程中一个概念，指同一个类中或者在父类和子类中，有多个同名方法，但这些方法的参数类型、参数个数或者类型的组合不同，即通过参数列表的不同来区分同名方法。
2024-04-29 14:51:59
122
原创 typescript抽象类里面定义多个private时，如何让实现类访问里面的数据
【代码】typescript抽象类里面定义多个private时，如何让实现类访问里面的数据。
2024-04-29 14:43:52
326
原创 js按照指定长度划分数组
/结果： [['a','b','c'],['d','e','f'],['g']]chunkArrayInGroups(['a','b','c','d','e','f'], 3);//结果： [['a','b','c'],['d','e','f']]chunkArrayInGroups(['a','b','c','d'], 2) // 结果：[['a','b'],['c','d']]
2024-04-28 17:24:31
280
原创 一篇文章盘点面试题js继承优缺点
缺点:是无论在什么情况下，都会调用两次父类构造函数：一次是在创建子类原型的时候，另一次是在子类构造函数内部。缺点2:在父类型的原型中定义的方法，对子类型而言也是不可见的，结果所有类型都只能使用构造函数模式。缺点1:借用构造函数的缺点是方法都在构造函数中定义，因此无法实现函数复用。因为子类的this对象是继承父类的this对象， 然后对其进行加工，而super方法表示的是父类的构造函数， 用来新建父类的this对象。优点:解决了原型链实现继承的不能传参的问题和父类的原型共享的问题。缺点:无法向父级传递参数。
2024-04-27 09:23:23
112
原创 使用Pinia自己写个插件
自己写pinia插件本质上是一个函数,可以在上面添加方法、属性。先下载 pnpm i pinia -S。下面的自己扩展...
2024-04-26 16:19:53
531
原创 Vue3使用自己的svg
/ 自己写个插件，把svgIcon和Element-plus的图标注册成全局组件，不需要再导入。// 引入svg插件需先安装，pnpm i vite-plugin-svg-icons。vite.config.ts关键代码。// 这样组件就可以直接使用。
2024-04-26 15:48:41
437
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人