vue3 <script setup> 写法

Posted 2023-03-02

参考技术A

这里主要讲下<script setup>的一些写法，因为这种写法比较简洁，推荐使用这种写法

ref
用于为数据添加响应式的状态，它的本质就是将基本数据或对象通过 new Proxy 创建成为一个响应式的对象，所以通过它创建的基本数据 其实是个对象 它的值就放在了该对象的value属性中

所有通过ref创建的数据 需要通过xxx.value取它的值
通过ref创建一个响应式对象 其实它的内部还是通过reactive对该对象进行处理 所以声明响应式对象 推荐使用ref统一声明

reactive
reactive主要为对象添加响应式对象，接收一个对象作为参数，可以用于为表单等数据做统一响应式处理

toRefs
toRefs 用于将响应式对象转换为结果对象，其中结果对象的每个属性都是指向原始对象相应属性的ref。
常用于es6的解构赋值操作。
主要解决 对一个响应式对象直接解构时解构后的数据将不再有响应式

toRef
toRef 用于为源响应式对象上的属性新建一个ref，从而保持对其源对象属性的响应式连接。
接收两个参数：源响应式对象和属性名，返回一个ref数据。
例如使用父组件传递的props数据时，要引用props的某个属性且要保持响应式连接时就很有用。

总结

eslint配置 .eslintrc.js 中配置则不会对此进行引入校验

script-setup用法
该连接为github仓库连接 可能网络问题打不开

script-setup用法 一个中文博客