- 博客(18)
- 收藏
- 关注
RSS订阅原创 vue中创建组件的几种方式，你都会吗？
可以把template节点换成render节点，但那样子编写成本会变高，因为你要通过编写h()返回虚拟dom。你也可以直接编写template节点，最后它会被编译为render函数。函数式组件是一种定义自身没有任何状态的组件的方式。h() 函数可以用来创建任何类型的虚拟 DOM 节点，包括元素、文本节点、组件等。export default 那个对象的写法和对象形式的组件的写法一致。用于编程式地创建组件虚拟 DOM 树的函数。h() 函数是用于创建虚拟 DOM 节点的函数。实现的效果和上面的一样。
2024-04-05 21:42:10
427
1
原创 你知道vue3的customRef吗？你知道它和ref的区别吗？你知道它的应用场景吗？
是 ES11 中新增的运算符，表示当左边的操作数为 null 或 undefined 时，返回其右侧的操作数，否则返回左侧的操作数。customRef允许我们通过获取或设置一个变量的值时进行一些额外的操作，而不需要侦听这个变量进行额外的操作。是 Vue 3 中新增的 API，用于创建自定义 ref，并对其依赖项跟踪和更新触发进行显式控制。：通过控制依赖项收集和更新触发时机，可以实现防抖/节流功能。方法中调用，收集该 ref 所依赖的响应式数据。提供对依赖项跟踪和更新触发更细粒度的控制。
2024-04-04 13:36:00
479
1
原创 详解vue3中组件的定义、使用、传递props、监听事件
上面的例子中定义了一个组件，并在一个.js文件里默认导出了它自己，但你也可以通过具名导出在一个文件中导出多个组件。当使用构建步骤时，我们一般会将 Vue 组件定义在一个单独的.vue文件中，这被叫做单文件组件(简称 SFC)：Vue的单文件组件是一种特殊的组件，以“.vue”扩展名结尾。这种组件将HTML、CSS和JavaScript代码封装到一个单独的文件中，使得组件的代码更加简洁、易于管理和维护。
2024-01-25 09:50:29
2777
1
原创 一文讲清楚vue3中的内置特殊内容key、ref、is、＜component＞、＜slot＞、＜template＞
在 Vue 3 中，key的作用主要与重新渲染和优化有关。用于标识列表中的元素，以便在列表更新时，Vue 可以识别哪些元素发生了变化，而不是简单地替换所有元素。key绑定的值应为基础类型，如字符串或数字。不要使用对象作为v-for的 key。例如，如果有一个动态列表，希望在列表更新时保留某些元素的身份，可以使用key。在这个例子中，使用key可以确保列表的渲染更加高效，因为它可以区分哪些元素发生了变化，而不是每次重新创建所有元素。同一父元素下的子元素必须具有。
2024-01-24 09:03:12
3003
1
原创 详解vue3中的依赖提供和注入
这种依赖注入的机制使得组件之间的通信更加灵活，尤其在跨层级的组件通信时，provide和inject提供了一种方便的方式。
2024-01-23 08:06:09
640
1
原创 vue3中的生命周期
Vue 3 的生命周期是 Vue 实例从创建到销毁的全过程，这个过程可以被划分为多个阶段。每个阶段都有相应的生命周期钩子函数，开发者可以在这些钩子函数中进行相应的操作。这些额外的生命周期函数提供了更多灵活性，允许开发者在更细粒度的情境中执行自定义逻辑。在实际应用中，根据具体需求选择合适的生命周期函数来处理特定的任务。除了上述提到的主要生命周期钩子函数之外，Vue3还引入了一些其他的生命周期函数，用于更细粒度地控制组件的行为。setup` 函数是一个新的组合式 API 的一部分，用于配置组件。
2024-01-22 09:18:25
408
原创 一文讲清楚vue3中watchEffect的使用
一般情况下，侦听器会被链接到该组件的生命周期，但也可以通过手动调用watchEffect返回的函数去取消侦听，如下我们改写上面的例子，在onBeforeMount生命周期钩子中停止侦听，效果就是组件一被挂载就停止侦听，但似乎这没什么意义，你完全可以在其它地方调用它。不需要显式地依赖于响应式数据，而是自动追踪其使用的所有响应式依赖，并在这些依赖发生变化时重新运行其回调函数。当我们点击页面上的+1按钮时，会引发data.count的变化，而watchEffect中依赖这个数据，就会自动执行回调函数打印结果。
2024-01-20 08:36:14
673
原创 一文讲清楚vue3中ref、reactive、toRef、toRefs、isRef、isReactive、unref、toValue的使用
先看一个组件我们定义了一个count，还有一个修改它的方法，并尝试在模板中通过两种方式去修改它，但结果却是页面没有任何变化。其实通过这些操作我们已经修改了count的值，只是未能得到视图的更新，所以我们看到的还是最初的值，那如何解决呢？这就引出了响应式数据ref()用于创建一个包装基本类型值的响应式对象。它将基本类型值（如数字、字符串等）转换为响应式对象（但其实也可以是引用类型），使其具有响应式特性。ref()返回一个包含value属性的对象，通过这个属性来访问和修改值。是一个响应式对象，通过ref。
2024-01-19 09:12:33
1453
1
原创 一文讲清楚vue中的readonly、shallowReadonly、isReadonly
在Vue 3中，readonly是一个用于创建只读响应式对象的函数。它可以应用于普通对象或响应式对象，将其转换为只读对象，这意味着不能对这个对象进行修改操作。这个函数返回一个代理对象，该代理对象与原始对象具有相同的结构，但所有的属性都变成了只读的。这样一来，任何尝试修改代理对象的操作都会触发警告，并且不会真正地修改原始对象。这是很有用的，它可以被传递给那些只需要读取数据而不需要修改的组件或函数。这样做有助于确保它们不会在意外的情况下修改数据。
2024-01-18 14:20:37
1742
1
原创 一文讲清楚Vue3中computed的使用
computed()方法期望接收一个 getter 函数，返回值为一个。和其他一般的 ref 类似，你可以通过XXX.value访问计算结果。计算属性 ref 也会在模板中自动解包，因此在模板表达式中引用时无需添加.value。
2024-01-17 08:49:19
1138
原创 一文讲清楚vue3中watch的使用
watch的第一个参数的传递方式：对于ref的响应式数据对象直接传一个ref包装后的响应式对象即可，新旧值不一样。。使用watch侦听多个数据源的变化，直接将多个ref响应式对象组成的数组传递给watch，新旧值不一样。。无需开启深度侦听，直接传一个ref响应式对象无效，需要传一个getter函数，新旧值不一样。。如果有多层嵌套，需要开启深度侦听，可以直接传一个ref响应式对象或者使用getter函数，新旧值一样。或。直接传一个ref响应式对象无效，需要传一个getter函数，新旧值不一样。。
2024-01-16 10:17:03
1344
1
原创 FISCO BCOS--搭建一条单群组4节点联盟链
学习了比特币后，了解了区块链是什么，也可以跳过以太坊的学习，来到区块链3.0等平台的学习使用，但若能掌握以太坊各种技术的使用，是可以很好地理解此类平台的。
2023-11-16 14:13:16
169
1
翻译 TS数据类型--自定义数据类型
当基本的数据类型满足不了我们的需求的时候，我们就可以自己定义一个数据类型（这种方式有点像C语言的结构体）。自定义类型使用关键字interface来定义。
2022-09-18 09:18:54
3145
翻译 TS数据类型--基本数据类型
JavaScript 的类型分为两种：原始数据类型和对象类型。原始数据类型包括：布尔值、数值、字符串、null、undefined以及 ES6 中的新类型 Symbol和 ES10 中的新类型 BigInt。
2022-08-26 09:56:09
229
mysql数据库课程设计报告 期末作业 大作业
2023-12-31
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人