Vue3学习笔记

  1. nextTick()
  2. app.provide()
  3. app.config.errorHandler
  4. 访问Props

nextTick

等待下一次DOM更新刷新的工具方法。

在Vue中更改响应式状态时，最终的DOM更新并不是同步生效，而是由Vue将它们缓存在一个队列中，直到下一个tick才一起执行。这样是为了确保每个组件无论发生多少状态改变，都仅执行一次更新。

nextTick()可以在状态改变后立即使用，以等待DOM更新完成。

provide

提供一个值，可以在应用中的所有后代组件中注入使用。

第一个参数应当是注入的key，第二个参数则是提供的值。返回应用实例本身。

1
2
3
4
5
6
import { provide } from 'vue';
provide('message', 'hello');

// 组件
import { inject } from 'vue';
inject('message');

errorHandler

用于为应用内抛出的未捕获错误指定一个全局处理函数。

Props

setup函数的第一个参数是组件的props。和标准的组件一致，一个setup函数的props是响应式的，并且会在传入新的props时同步更新。

如果解构了props对象，解构出的变量将会丢失响应性。因此我们推荐通过props.xxx的形式来使用其中的props。

如果确实需要解构props对象，或需要将某个props传到一个外部函数中并保持响应性，那么你可以使用toRefs()和toRef()这两个工具函数。

1
2
3
4
import { toRef, toRefs } from 'vue';
const props = defindeProps({});
const { title } = toRefs(props);
const title = toRef(props, 'title');