web前端全系列 教程
1839个小节阅读:2243.4k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
使用选项式API的时候,所有的侦听器都必须放在watch
中,这样如果有很多侦听器就显得很臃肿,但如何使用组合式API,这个问题就迎刃而解了
xxxxxxxxxx
<template>
<h3>选项式API</h3>
<p>{{ count }}</p>
<button @click="addCountHandle">增加</button>
</template>
<script>
export default {
data(){
return{
count:0
}
},
methods:{
addCountHandle(){
this.count++
}
},
watch:{
count(newValue,oldValue){
console.log(newValue,oldValue);
}
}
}
</script>
xxxxxxxxxx
<template>
<h3>组合式API</h3>
<p>{{ count }}</p>
<button @click="addCountHandle">增加</button>
</template>
<script setup>
import { ref,watch } from "vue"
const count = ref(0)
function addCountHandle(){
count.value++
}
watch(count,async(newValue,oldValue) =>{
console.log(newValue,oldValue);
})
</script>
xxxxxxxxxx
import { watch } from "vue"
export function countUtil(count){
watch(count,async(newValue,oldValue) =>{
console.log(newValue,oldValue);
})
}
实时效果反馈
1. 下列代码中,画横线的地方应该填写的是:
xxxxxxxxxx
<template>
<h3>组合式API</h3>
<p>{{ count }}</p>
<button @click="addCountHandle">增加</button>
</template>
<script setup>
import { ref,watch } from "vue"
const count = ref(0)
function addCountHandle(){
count.value++
}
watch(___,async(newValue,oldValue) =>{
console.log(newValue,oldValue);
})
</script>
A watch
B count
C count.value
D 空
答案
1=>B