基础入门:vue.js 组合式API:setup()
1、setup() 钩子是在组件中使用组合式 API 的入口,通常只在以下情况下使用:
其他情况下,都应优先使用 <script setup> 语法。
2、基本使用
- 我们可以使用响应式 API 来声明响应式的状态,在
setup()
函数中返回的对象会暴露给模板和组件实例。其它的选项也可以通过组件实例来获取setup()
暴露的属性: -
<script> import { ref } from 'vue' export default { setup() { const count = ref(0) // 返回值会暴露给模板和其他的选项式 API 钩子 return { count } }, mounted() { console.log(this.count) // 0 } } </script> <template> <button @click="count++">{{ count }}</button> </template>
- 请注意在模板中访问从
setup
返回的 ref 时,它会自动浅层解包,因此你无须再在模板中为它写.value
。当通过this
访问时也会同样如此解包。
3、相关使用
-
在组件创建之前被执行,不需要this,this不会指向实例;
-
ref定义响应式变量,reactive 可以定义引用数据类型,通过ref定义响应式变量,ref()会返回一个带有value属性的对象;
-
通过reactive 定义引用类型数据;
-
obj 扩展运算符,可以进行解构;...toRefs(obj) 可使解构后端数据为响应式数据;
源代码:
<script>
import Hello from './components/Hello.vue';
import { ref,reactive, toRefs } from 'vue';//ref定义响应式变量,reactive 可以定义引用数据类型
export default{
data(){
return{
isShow:true
}
},
// 组合式API:将同一个逻辑关注点的相关代码收集在一起
setup(){//在组件创建之前被执行,不需要this,this不会指向实例
console.log('setup');
//msg逻辑代码
let msg='hello'
console.log(msg);
function changeMsg(){
msg='你好!'//数据不是响应式的
console.log(msg)
}
//通过ref定义响应式变量
//counter逻辑代码
const counter=ref(0)//ref()会返回一个带有value属性的对象
function changeCoun(){
counter.value++
}
//message逻辑代码
const message=ref('hello word!')
function changMessage(){
message.value='你好,世界!'
}
//通过reactive 定义引用类型数据
const obj=reactive({
name:"志在成功",
age:15,
childer:{
name:'x-ysr'
}
})
function changeObjName(){
obj.name="xueysr"
}
let {name,age,childer} =toRefs(obj)//也可实现解构
return{
msg,
changeMsg,
counter,
changeCoun,
message,
changMessage,
obj,
changeObjName,
//...obj 扩展运算符,可以进行解构;...toRefs(obj) 可使解构后端数据为响应式数据
// ...toRefs(obj),
name,
age,
childer
}
},
beforeCreate(){
console.log("beforeCreate")
},
created(){
console.log('created')
},
components:{
Hello
}
}
</script>
<template>
<h2>{{msg}}</h2>
<h2>{{counter}}</h2>
<h2>{{message}}</h2>
<h2>{{'姓名:'+ obj.name}}</h2>
<h2>{{'姓名:'+ name}}</h2>
<h2>{{'年龄:'+ age}}</h2>
<h2>{{childer.name}}</h2>
<button @click="changeMsg">改变msg</button>
<button @click="changeCoun">改变counter</button>
<button @click="changMessage">改变message</button>
<button @click="changeObjName">改变名字</button>
<Hello></Hello>
</template>
<style>
</style>
源代码运行情况: