vue3+ts开发系统 --setup

vue3 中，使用setup语法糖显然在很大程度上简便了开发，不需要那么多的return啦，引入components不需要再次导出等等。在使用过程中，有一些与createApp不同的地方，做个记录。

• 迷惑的defineProps
  • defineProps 是在setup中获取props的内置方法，不需要import就可以直接使用。使用方式为const props = defineProps<{msg: string}>()。这种方式要求有类型定义，即上方的<{msg: string}>，否则还是乖乖用回props.msg。
  • 官方文档提到，对于props，结构将会失去响应式，所以在template中使用属性，可以采用{ {props.msg}}，或者使用const msg = toRefs(props)解构获取响应式变量。
  • 编码时发现，在template中，可以直接使用{ {msg}}的方式使用props变量，当父组件中的msg变量变化时，子组件会重新渲染msg，也就是说直接在子组件的template中直接引入是会有响应式的，不需要props.msg的方式。