|
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的方式。 - 那解构失效的情况是？在子组件中使用
const msgIn = ref(props.msg)，template中使用{{msgIn}}时，父组件中改变msg，子组件渲染数据不会改变。 - 写的时候对
vue3不熟悉，其实后者很好理解，父组件的msg改变时，获取到的props.msg是不会重新获取的，ref自然是监听不到其变化的，于是msgIn显然不会改变。希望在script中使用解构变量还是得靠toRefs，或者使用onWatch监听。
- 父组件使用子组件
ref，怎么使用子组件方法？
- 写着写着发现
ref.show()时发现没有methods属性，没法引用。事实上和setup方法中导出是一致的，使用defineExpose即可。
- 关于
vue文件内容结构顺序
- 开发中发现比起
template - script - style的顺序，script - template - style的功能模块顺序更方便于开发
|