【Vue3重点概念总结和实践五】（nextTick() / ＜Teleport＞ / effectScope() ）

目录

1、下一次DOM更新

2、DOM传送门

3、Effect 作用域API

4、Vue3 + Vue-cli (1) 基础篇

5、Vue3+ Vue-cli (2) 组件篇

---

1、下一次DOM更新

原题： 

vuejs-challenges/questions/11-next-dom-update/README.zh-CN.md at main · webfansplz/vuejs-challenges · GitHub

答案：

nextTick()：等待下一次 DOM 更新刷新的工具方法。

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

nextTick() 可以在状态改变后立即使用，以等待 DOM 更新完成。你可以传递一个回调函数作为参数，或者 await 返回的 Promise。

文档：

全局 API：常规 | Vue.js

2、DOM传送门

原题： 

Vue.js提供了一个内置组件，将其插槽内容渲染到另一个DOM，成为该DOM的一部分。

vuejs-challenges/questions/13-dom-portal/README.zh-CN.md at main · webfansplz/vuejs-challenges · GitHub

答案：

 : 将其插槽内容渲染到 DOM 中的另一个位置。它是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。

文档：

Teleport | Vue.js

3、Effect 作用域API

 原题： 

vuejs-challenges/questions/8-effect-scope/README.zh-CN.md at main · webfansplz/vuejs-challenges · GitHub

答案：

effectScope() ：创建一个 effect 作用域，可以捕获其中所创建的响应式副作用 (即计算属性和侦听器)，这样捕获到的副作用可以一起处理。

文档：

响应式 API：进阶 | Vue.js

4、Vue3 + Vue-cli (1) 基础篇

Vue3 + Vue-cli (1) 基础篇_vue3 vue-cli_小草莓蹦蹦跳的博客-CSDN博客

5、Vue3+ Vue-cli (2) 组件篇

Vue3+ Vue-cli (2) 组件篇_vue3一个根组件写法_小草莓蹦蹦跳的博客-CSDN博客