Vue3的组合api(setup)

setup

setup 函数是一个新的组件选项。作为在组件内使用 Composition API 的入口点。

调用时机

创建组件实例，然后初始化 props ，紧接着就调用setup 函数。从生命周期钩子的视角来看，它会在 beforeCreate 钩子之前被调用

注意事项：

this 在 setup() 中不可用

参数：

该函数接收 props 作为其第一个参数：watchEffect 或 watch 会观察和响应 props 的更新

然而不要解构 props 对象，那样会使其失去响应性

第二个参数提供了一个上下文对象

<script>
    setup(props,ctx) {
        // props 我们经常用户路由跳转传输过来的值或者父子传参的数据
        // ctx里面有attrs 和 slots 都是内部组件实例上对应项的代理，可以确保在更新后仍然是最新值
        // ctx里面的emit我们经常用，用来进行父子组件的传参
    }
</script>

setup也可进行简写，也就是setup 语法糖

<script setup></script>
// 也可以这样写，不过里面的两个参数

// 通过defineProps指定当前 props 类型，获得上下文的props对象。示例：
<script setup>
   import { defineProps } from 'vue'
   const props = defineProps({
       title: String,
   })
</script>

// 使用defineEmit定义当前组件含有的事件，并通过返回的上下文去执行 emit。示例：
<script setup>
 	import { defineEmits } from 'vue'
 	const emit = defineEmits(['change', 'delete'])
</script>


//好处就是不用return,就可以直接使用

响应式系统 API

reactive：

接收一个普通对象然后返回该普通对象的响应式代理

// reactive 定义多个时候可以用toRefs进行展开，
// 用toRefs进行展开的可以进行响应式
<script>
import { reactive , toRefs } from 'vue'
  export default {
    setup() {
      const data = reactive({ count: 0 })
      return {
        ...toRefs(data)
      }
    },
  }
</script>


// setup简写
// 不过页面上要使用的话
<template>
  <div>
    {{data.num}}
  </div>
</template>

<script setup>
import { reactive } from "vue";
const data = reactive({
  num: 10
});
</script>

ref

接受一个参数值并返回一个响应式且可改变的 ref 对象。ref 对象拥有一个指向内部值的单一属性 .value

// ref也可以定义数组
// 里面的值需要使用 .value 进行赋值和获取
<script>
  import { ref } from 'vue'
  export default {
    setup() {
      const num = ref(0)
      return {
        num
      }
    },
  }
</script>

// setup简写 
<script setup>
  import { ref } from 'vue'
  const num = ref(0)
</script>

 

注意：setup 语法糖如果想设置 组件名称（name）的话，在语法糖里面写是不行的，需要创建两个setup，一个是普通的，用来设置组 件名称（name），另一个用语法糖，按照语法糖的方式正常书写就可以了

<!-- 组件名称 -->
<script>
export default {
  name: "jyDialog"
}
</script>
<!-- setup 单文件组件 -->
<script setup>
</script>

以上只是个人的理解：

详细请参考：Vue.js (vuejs.org)   Vue的官网