Vue3学习 - 倒序记录

2021-12-20 17:00:16 阅读：235 来源： 互联网

标签：vue 记录 E5% E6% 调用 Vue3 组件 import 倒序

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

标签：vue,记录,E5%,E6%,调用,Vue3,组件,import,倒序
来源： https://www.cnblogs.com/james2306/p/15684162.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9