前言
本文记录了vue2与vue3差异以及vue3官方文档所有学习笔记。
- 如果你不希望组件的根元素继承 attribute，可以在组件的选项中设置 inheritAttrs: false。你可以使用组件的 $attrs property 将 attribute 应用到其它元素上
- 可以通过 emits 选项在组件上定义发出的事件。当在 emits 选项中定义了原生事件 (如 click) 时，将使用组件中的事件替代原生事件侦听器。
app.component('custom-form', { emits: ['inFocus', 'submit'] })
- v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header
- 你也可能会发现，起始动画比结束动画的时间稍长一些，看起来会更好一些。用户通常是在动画开始时被引导的，而在动画结束时没有那么多耐心，因为他们想继续他们的动作。
- 因为 props 是响应式的，你不能使用 ES6 解构，它会消除 prop 的响应性。如果需要解构 prop，可以在 setup 函数中使用 toRefs 函数来完成此操作：const { title } = toRefs(props)
- 如果要确保通过 provide 传递的数据不会被 inject 的组件更改，我们建议对提供者的 property 使用 readonly。
- 要为 JavaScript 对象创建响应式状态，可以使用 reactive 方法。
- 我们有一个独立的原始值 (例如，一个字符串)，我们想让它变成响应式的，可以使用ref方法。最好是合用const state = reactive({ref(0)})
- 对于reactive后的对象，使用解构的 property 的响应性都会丢失。对于这种情况，我们需要将我们的响应式对象转换为一组 ref。这些 ref 将保留与源对象的响应式关联：let { author, title } = toRefs(book)
- watch现在可以监听多个数据源，如果你在同一个函数里同时改变这些被侦听的来源，watch的回调只会执行一次
- 当使用typescript时，ref可以接受泛型，ref<T>()
