vue3学习笔记

知识点

• setup函数在created之前执行，内部没有this
• reactive 仅仅对对象类型有效，比如对象、数组、Map、Set这样的集合类型，对String、number、boolean这样的原始类是无效，不可以随意替换一个响应式对象，如果要替换，则用ref。
• reactive、props不能直接解构
• 计算属性的结果会被缓存，当函数的依赖发生时，Vue会自动重新计算这个属性的值，依赖其他数据的计算，减少if-else模板的编写，减少计算量优化性能
• 计算属性可以在组件内部多次使用，提高代码的重用性。如果多个组件需要相同的计算逻辑，可以将计算属性定义在一个函数中，在多个组件中引用。
• 额外内存开销：computed 函数会创建一个新的响应式对象来存储计算结果，这会占用一定的内存空间。如果计算属性的逻辑比较复杂或计算结果比较大，可能会导致内存开销较大。
• 不适合异步操作：computed 函数只适用于同步计算逻辑，不适合处理异步操作。如果需要进行异步计算，应该使用 watch 函数或 async/await 来处理。
• 监听数组的变化，执行相应的操作，数组内部元素的变化，需要设置 deep 选项为 true（注意，使用deep耗费性能，谨慎使用）
• 从响应式函数、计算函数、watch监听函数、生命周期钩子、自定义方法等顺序编写，在团队中按照一定的逻辑顺序编写，可以使代码更具可读性和可维护性
• 自定义 Hooks 是借鉴 React 的思想，Vue 3 的 Composition API 灵活性和组合，可以帮助我们封装可复用的逻辑，并在不同的组件中共享。
• 分离副作用代码：将有副作用的代码（例如定时器、网络请求等）放在 onMounted 和 onBeforeUnmount 钩子函数中，以确保正确的初始化和清理。、
• 函数式组件是一种定义自身没有任何状态的组件的方式，是纯函数，接受props，返回vnodes,函数式组件在渲染过程中不会创建组件实例 (也就是说，没有 this)，也不会触发常规的组件生命周期钩子。