vueJS挑战记录--简单

在做TS类型体操的时候偶然发现还有vuejs在线挑战，就简单的记录一下，因为之前大多是在vue2做项目，vue3学了一段时间了只是自己在写小demo还没有接受过现实情况的拷打，就做下挑战看看抗打不。 cn-vuejs-challenges.netlify.app/

• 生命周期钩子：组件卸载onUnmounted时，需要清理定时器。

• 下一次DOM更新 在nextTick里执行获取双向绑定变化数值

• DOM传送门<Teleport to="">xxxx</Teleport>

• 动态CSS 在style里使用 v-bind()

• ref 全家桶

  • isRef()
  • toRef()
  • unref()

• 阻止事件冒泡 cn.vuejs.org/guide/essen…

  • .stop
  • .prevent

• 响应性丟失

  • toRefs() 和compositionAPI的结合 ,

• 大写

  • 自定义修饰符（对于又有参数又有修饰符的 v-model 绑定，生成的 prop 名将是 arg + "Modifiers"。)比如定义v-model:test.capitalize，子组件获取到的modifiers为testModifiers,emit里定义方法

• Prop验证 defineProps({ type:, default:, validator:(value)=>{}})

• 可写的计算属性

  computed({
  get(){},
  set(){})
  

• watch 全家桶

  • watch的第三个参数是一个对象，支持以下这些选项
    • immediate：在侦听器创建时立即触发回调。第一次调用时旧值是 undefined。
    • deep：如果源是对象，强制深度遍历，以便在深层级变更时触发回调。
    • flush：调整回调函数的刷新时机。在侦听器回调中能访问被 Vue 更新之后的 DOM， flush: 'post'
    • onTrack / onTrigger：调试侦听器的依赖。与 watchEffect() 相比，watch() 使我们可以： 1. 懒执行副作用； 2. 更加明确是应该由哪个状态触发侦听器重新执行； 3. 可以访问所侦听状态的前一个值和当前值

• 浅层 ref

  • shallowRef 浅层属性可以触发响应式，可以用triggerRef强制触发

• 依赖注入

  • provide ,inject

总结，很多小知识点都没有注意到，果然我不能没有文档就像西方不能没有耶路撒冷。