计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 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