(1)setup函数是一个新的组件选项。作为在组件内使用 Composition API 的入口点
(2)之前的data、声明周期、自定义函数都可以放置在内
(3)setup是围绕beforeCreate和created生命周期钩子运行的
beforeCreate和created钩子中编写的任何代码都应该直接在setup函数中编写。
(4)具有hooks随处使用的特性,也是mixins的强化版,比mixins更加灵活
实例方法
component
config
directive
mixin
mount
provide
unmount 卸载应用实例的根组件
use
version
1、使用
import {defineComponent,ref,h} from 'vue';
export default defineComponent({ 若要获取传递给setup()的参数的类型推断,使用defineComponent是需要的。
setup(props,context){
(1)props:
组件传递的参数,是响应式的,可以通过使用watchEffect或watch进行观测和响应
不要直接使用解构赋值,会使得参数失去响应性,因为参数是通过Object.definePropery来监听的,使用ref、reactive解构则不会丢失
若要解构:const { title } = toRefs(props)
(2)context:
上下文对象 对应之前vue2的
context.attrs this.$attrs 组件标签上的属性(非响应式对象)
context.slots this.$slots 插槽(非响应式对象)
context.emit this.$emit 标签上自定义的触发事件(方法)
context.emit('自定义事件名',参数)
context.expose 定义向外暴露的内容,使得可以通过ref获取到
expose({...}) 在setup中非return出去的内容,无法通过ref获取
无法访问:因为是在组件创建实例之前指向
data
computed
methods
解构:
context是一个普通的JavaScript对象,也就是说,它不是响应式的,可以直接解构
attrs和slots是内部组件实例上相应值的代理。这样可以确保它们即使在更新后也始终会显示最新值,以便我们可以对它们进行结构分解,而不必担心访问老的引用:
但避免对内部的属性进行解构,并始终以attrs.x或slots.x的方式使用
(3)this指向问题:
因为setup()是在解析其它组件选项之前被调用的,所以setup()内部的this的行为与其它选项中的this完全不同
(4)更好的模块化问题:
可以从其他文件引入函数等,然后在setup中执行,其他文件中可以使用v3的组合式api(需先导入),但必须在setup中调用
(5)return返回值方式:
返回的内容可以在命令式api中this.x访问到
方式一:
return{
返回的属性和方法,在setup外部能够使用,返回的普通属性不是响应式的,即改变不会更新视图
}
方式二:
return () => h('div', ["哇咔咔"]) 还可以直接返回一个渲染函数,将替换模板中的内容
方式三:返回jsx
return () => <div ref={root} />
方式四:注意此时组件已经变成了一个异步组件,可使用Suspense悬挂展示
可以返回一个成功状态的Promise对象,会将成功态的[[PromiseResult]]结果作为返回值
return new Promise((resolve,reject)=>{ 也可返回一个Promise对象,使得组件为异步的
...
resolve({
数据
})
})
return await ...
}
})
代码示例:
<template>
<div id="nav">
<!-- <router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> -->
<div @click="fn">{{count.val}}</div>
</div>
<!-- <router-view/> -->
</template>
<script lang='ts'>
// ,ref, reactive
import {defineComponent,ref,reactive} from 'vue';
export default defineComponent({
name:"App",
data(){
return{
// name:'jack'
}
},
setup(){
let count=ref({val:1});
const fn=function(){
count.value.val++;
console.log(count.value.val)
console.log(count);
}
return {
count,
fn
}
// return () => h('div', ["哇咔咔"])
},
mounted(){
console.log();
}
})
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
</style>