在script中编写组合式API
这样一定要return声明的变量和方法
<script>
export default {
setup () {
// 数据
const message = "学习Vue3"
//函数
const logMessage = () => {
console.log(message)
}
return{
message,
logMessage
}
}
}
</script>
在script中声明则不需将方法变量返回
<script setup>
const message = "AI reture"
const logMessage = () =>{
console.log(message)
}
</script>
reactive: 接收一个对象类型数据,返回一个响应式的对象
import { reactive } from '
const num = reactive({
count: 100
})
const setCount = () =>{
num.count++
}vue';
<div>{{ num }}</div>
<button @click="setCount">动态增加</button>
Ref 接收简单类型或复杂类型,返回一个响应式数据
本质:在原有数据上包裹一层对象,包成复杂类型
底层:包成复杂类型,再借助reactive实现响应式
注意:1.脚本需要通过.value
2.在template,value不需要加帮我们扒了一层
import { Ref } from 'vue';
const age = ref(10)
const setAge = () =>{
age.value++
}
<div>{{ age }}</div>
<button @click="setAge">增加年龄</button>