vue3中的setup

Posted 2023-03-02

参考技术A setup ：组合api的入口函数 所有的组合api都学在setup中使用，它运行在beforeCreate之前

例：<script setup>

setup方法使用在script标签内 就不需要return数据以及方法了（这种方法一旦使用就不再有选项式api了）

const a = 1 （这样声明的数据没有响应式，就是不能和页面双向绑定）

const num = ref（0） （ref是一个声明响应式数据及方法，它是由reactive封装过来的，他的值其实在value中，所以我们使用及赋值时都要使用value属性，ref当前版本下可以声明所有的数据，包括基本数据类型，以及引用数据类型（复杂数据类型））

错误写法 ：components ：，beforeCreate（） （这种用法下 导入的组件会自动注册无需手动注册）

</script>

第二种方法，例：<script>

import  reactive,toRefs from 'vue' （用到啥引入啥）

setup()

const state= reactive （name： ‘张三’，age：14，id：1314）（reactive我们用来声明一个包含复杂结构的对象数据）

return ...toRefs(state) （用到的方法及数据等等需要return出来）



</script>