VUE3 + TS

171 阅读1分钟
  1. 创建

1705462315294.png

1705463413884.png

setup 是最早的生命周期,如果data与setup混用,data中可以用this读取到setup中的数据。但是setup不能读取到data中的数据

vite-plugin-vue-setup-extend 该插件可以直接在setup语法糖上直接写name属性为组件命名 1705481199206.png

1705481252240.png

  1. ref 和 reactive

1705482856469.png

1705483379882.png

1705483572503.png

1705483991176.png

1705484118665.png

  1. watch

1705548324197.png

image.png

1705566098941.png

1705566874392.png

1705568785129.png

1705569046422.png

  1. watchEffect

1705569881275.png

  1. ref

1705571131933.png

  1. ts

1705649317291.png

  1. props

1705650393938.png

1705650973825.png

  1. 生命周期

1705653172307.png

  1. 自定义Hooks

1705904624819.png

1705905029528.png

1705904755268.png

1705905174912.png

1705904845847.png

  1. params

1706003319322.png

1706003421197.png

  1. props

1706086729789.png

1706087223537.png

  1. pinia

1706173565617.png

1706174826132.png

1706174672552.png

  • 修改数据 image.png

1706175442727.png

  • storeToRefs

1706176016436.png

  • getters

image.png

image.png

  • $subscribe

1706254446439.png

1706254399696.png

  • store 的组合式

1706254940491.png

  1. 组件通信
  • props

1706510972903.png

  • 自定义事件

1706512258368.png

  • mitt

npm i mitt

1706512760517.png

1706512815892.png

1706513161803.png

1706515403654.png

  • v-model

1706689772536.png

1706689839203.png

1706690901044.png

  • $attrs(祖->孙)

1706757596059.png

1706758724853.png

  • refs(父传子)与refs(父传子)与parent(子传父)

1706769173337.png 1706769121022.png

1706769492249.png

1706770053627.png

1706770128771.png

  • provide_inject

1706778845353.png

1706779078253.png

1706779050507.png

  • slot
    1. 默认插槽

1706780735061.png

  2.具名插槽

1706855354009.png

1706855571692.png

  3.作用域插槽

1706857973903.png

1706858113603.png

1706858346354.png

1706858428486.png