Vue3学习 - 倒序记录

2023-11-15 21:34:16

Provide / Inject

详见: https://v3.cn.vuejs.org/guide/component-provide-inject.html#%E5%A4%84%E7%90%86%E5%93%8D%E5%BA%94%E6%80%A7

防抖和节流

详见: https://v3.cn.vuejs.org/guide/data-methods.html#%E6%96%B9%E6%B3%95

防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间.
使用场景：频繁触发、输入框搜索.
因为防抖的特性，一直执行最后一次的触发，所以可以用于鼠标移动确定最后一次移动的时候的坐标位置.

节流：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率.
使用场景：频繁触发、onrize，onscroll滚动条.
因为节流是监听到第一次触发事件后就执行，所以可以用来防止按钮多次点击执行多次，且按照第一次点击的事件为准.

setup() 内部调用生命周期钩子

props

计算属性

详见: https://v3.cn.vuejs.org/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E7%BC%93%E5%AD%98-vs-%E6%96%B9%E6%B3%95

对于任何包含响应式数据的复杂逻辑，你都应该使用计算属性.

生命周期

函数式组件

详见: https://v3.cn.vuejs.org/guide/migration/functional-components.html#%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BB%84%E4%BB%B6

片段

Vue 3 现在正式支持了多根节点的组件，也就是片段.

在 3.x 中，组件可以包含多个根节点！但是，这要求开发者显式定义 attribute 应该分布在哪里。

在 3.x 中，由于原生片段的支持，插槽也可以渲染为根节点.

过滤器

在 3.x 中，过滤器已移除，且不再支持。取而代之的是，我们建议用方法调用或计算属性来替换它们。

自定义指令

2.x中

bind - 指令绑定到元素后调用。只调用一次。
inserted - 元素插入父 DOM 后调用。
update - 当元素更新，但子元素尚未更新时，将调用此钩子。
componentUpdated - 一旦组件和子级被更新，就会调用这个钩子。
unbind - 一旦指令被移除，就会调用这个钩子。也只调用一次。

3.x中

const MyDirective = {
　　created(el, binding, vnode, prevVnode) {}, // 新增, 在元素的 attribute 或事件监听器被应用之前调用。
　　beforeMount() {},
　　mounted() {},
　　beforeUpdate() {}, // 新增
　　updated() {},
　　beforeUnmount() {}, // 新增
　　unmounted() {}
}

移除 $children

在 2.x 中，开发者可以使用 this.$children 访问当前实例的直接子组件：

在 3.x 中，$children property 已被移除，且不再支持。如果你需要访问子组件实例，我们建议使用 $refs。

异步组件

2.x 中,异步组件是通过将组件定义为返回 Promise 的函数来创建的，例如：

const asyncModal = () => import('./Modal.vue')

或者，对于带有选项的更高阶的组件语法：

const asyncModal = {
　　component: () => import('./Modal.vue'),
　　delay: 200,
　　timeout: 3000,
　　error: ErrorComponent,
　　loading: LoadingComponent
}

3.x 中, 由于函数式组件被定义为纯函数，因此异步组件需要通过将其包裹在新的 defineAsyncComponent 助手方法中来显式地定义：

import { defineAsyncComponent } from 'vue'
import ErrorComponent from './components/ErrorComponent.vue'
import LoadingComponent from './components/LoadingComponent.vue'

// 不带选项的异步组件
const asyncModal = defineAsyncComponent(() => import('./Modal.vue'))

// 带选项的异步组件
const asyncModalWithOptions = defineAsyncComponent({
　　loader: () => import('./Modal.vue'),
　　delay: 200,
　　timeout: 3000,
　　errorComponent: ErrorComponent,
　　loadingComponent: LoadingComponent
})

v-for

在 Vue 2 中，在 v-for 中使用的 ref attribute 会用 ref 数组填充相应的 $refs property。当存在嵌套的 v-for 时，这种行为会变得不明确且效率低下。

在 Vue 3 中，此类用法将不再自动创建 $ref 数组。要从单个绑定获取多个 ref，请将 ref 绑定到一个更灵活的函数上 (这是一个新特性)

在 Vue 2.x 中，<template> 标签不能拥有 key。不过，你可以为其每个子节点分别设置 key

在 Vue 3.x 中，key 则应该被设置在 <template> 标签上 (而不是设置在它的子节点上)

在 Vue 3.x 中不再建议在 v-if/v-else/v-else-if 的分支中继续使用 key attribute，因为没有为条件分支提供 key 时，也会自动生成唯一的 key。

<template v-for="item in list">
<div :key="'heading-' + item.id">...</div>
<span :key="'content-' + item.id">...</span>
</template>

<template v-for="item in list" :key="item.id">
<div>...</div>
<span>...</span>
</template>

通过脚手架Vite创建项目:

npm init vite@latest my-vue-app --template vue

码农公寓