vue3+ts开发系统 --setup

本文主要是介绍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的方式。
  • 那解构失效的情况是？在子组件中使用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的功能模块顺序更方便于开发

这篇关于vue3+ts开发系统 --setup的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！