vue3 基础概念 (含与 vue2.6 的对比)

如题所述

第1个回答  2022-06-02

计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。
相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。
通常更好的做法是使用计算属性而不是命令式的 watch 回调。

Vue 将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新。这些被包裹过的方法包括: push() 、 pop() 、 shift() 、 unshift() 、 splice() 、 sort() 、 reverse()

同时绑定多个事件

不同于组件和 prop ,事件名不存在任何自动化的大小写转换。因为 HTML 是大小写不敏感的,因此推荐你始终使用 kebab-case 的事件名。

使用场景:由于 vue 有 $parent 属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过 provide / inject 可以轻松实现跨级访问祖先组件的数据。
provide:Object | () => Object
inject:Array<string> | { [key: string]: string | Symbol | Object }

提示: provide 和 inject 绑定并不是可响应的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。

动态组件:

异步组件:

混入 mixin 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。

将插槽内容传送至指定位置,接受一个 to 的属性,它接受一个 css query selector 作为参数,这就是代表要把这个组件渲染到哪个 dom 元素中

Suspense 组件用于在等待某个异步组件解析时显示后备内容。

AsyncShow.vue

index.vue

相似回答
大家正在搜