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的官网