vue3组合式API之setup方法
1、组合式API是为了解决大组件方法与数据分隔太远,太碎片化的问题。
2、setup是vue3.x中新的操作组件属性的方法,是组件内部暴露出的所有属性和方法的统一的API
3、setup函数,它将接收两个参数:setup(props, context) props为响应式
4、setup 返回的所有内容都将暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。
5、从 setup 返回的 refs 在模板中访问时是被自动浅解包的,因此不应在模板中使用 .value
6、setup执行时,组件都未曾创建,即它的执行时间再beforeCreated之前
7、注意:(1)ref主要用于基本类型的响应。ref如果要修改值,需要使用.value
(2)而reactive主要用于引用类型的响应
8、toRefs()方法的作用是把对象转成响应式的数据
简单演示:对ref,reactive,toRefs,computed,watchEffect,watch拓展运算符
<template>
<h2 @click="changeNum">{{num}}</h2>
<h2>{{user.name}}</h2> //使用...toRefs前,只能通过.value的方式
<h2 @click="changeAge">{{age}}</h2>
<h2>{{reverseName}}</h2>
</template>
<script>
import {ref,reactive,toRefs,computed} from 'vue'
export default {
name: 'App',
setup() {
const num = ref(0);//基本类型(number)用ref
const user = reactive({//对象用reactive
name: 'wy',
age: 18,
//计算属性的使用方式
reverseName: computed(() => {
return user.name.split('').reverse().join('');
})
})
function:changeAge() {
user.age = 20
}
function: changeNum() {
count.value++
}
watchEffect(() => {
console.log(user.age); //监听user.age的改变
console.log('user.age发生变化时,触发watchEffect函数')//当user.age发生改变时,会触发执行此函数
})
//监听数据改变,并且获取数据改变前后的值,
watch(num,(newVal,oldVal) => { //可单独或监听多个数据对象变化watch([num,user.age](newVal,oldVal)
console.log('新值':newVal);
console.log('原值':oldVal);
console.log('num发生了变化',)
})
return {count,changeNum,...toRefs(user),changeAge}
}
}
</script>
watch和watchEffect的区别,见下帖wy。