Vue3.0新特性 —组件Setup
setup
函数是一个新的组件选项。作为在组件内使用Composition Api
的入口点。
调用时机
创建组件实例,然后初始化props
,紧接着就调用setup
函数。 从生命周期的角度来看,它会在beforeCreate
之前执行。也就是创建组件先执行setup
、beforeCreate
、create
<template>
<div>蛙人</div>
</template>
<script>
export default {
name: 'App',
setup() {
console.log("hey 蛙人")
}
}
</script>
this指向
由于不能在setup
函数中使用data
、methods
,为了避免使用Vue
出错,所以把setup
函数中this
修改为了undefined
。
<template>
<div>蛙人</div>
</template>
<script>
export default {
name: 'App',
setup() {
console.log(this); // undefined
}
}
</script>
函数参数
props和context
接收组件传递过来的所有数据,并且都是响应式的。
<template>
<div>蛙人</div>
</template>
<script>
export default {
name: 'App',
props: {
title: {
type: String
}
},
setup(props) {
console.log(props.title)
}
}
</script>
*注意一点,props数据不能使用解构,否则响应式数据失效
<template>
<div>蛙人</div>
</template>
<script>
export default {
name: 'App',
props: {
title: {
type: String
}
},
setup({ title }) {
console.log(title) // 这里响应式数据将失效
}
}
</script>
context
该参数提供一个上下文对象,从原来的2.x中选择性的暴露了一些属性。
attrs/slots/emit
<template>
<div>蛙人</div>
</template>
<script>
export default {
name: 'App',
props: {
title: {
type: String
}
},
setup(props, { attrs, slots, emit } ) {
console.log(attrs)
}
}
</script>
上面,attrs
和slots
都是内部组件实例上对应项的代理,可以确保在更新后仍然还是最新的值。所以这里可以使用解构语法
返回值
可以将setup
函数返回值渲染到页面上。但前提是,setup
返回值必须是一个对象,否则返回其它值则渲染无效。
<template>
<div>蛙人</div>
</template>
<script>
export default {
name: 'App',
props: {
title: {
type: String
}
},
setup() {
const name = "蛙人"
return {
name
}
}
}
</script>