Vue是一個(gè)流行的JavaScript前端框架,它幫助開(kāi)發(fā)者構(gòu)建響應(yīng)式、高效的應(yīng)用程序。Vue 3是Vue的最新版本,它帶來(lái)了許多改進(jìn)和新功能,其中包括更快的渲染速度和更好的TypeScript支持。在Vue 3中,調(diào)用組件實(shí)例的方法和屬性稍微有些不同。
調(diào)用Vue 3實(shí)例的方法需要使用`ref`方法來(lái)創(chuàng)建一個(gè)引用,然后使用`value`屬性來(lái)調(diào)用實(shí)例中的方法和屬性。以下是一個(gè)示例代碼:
<template><div><p>{{ message }}</p><button @click="countUp">計(jì)數(shù)器+1</button></div></template><script>import { ref } from 'vue'
export default {
setup() {
// 創(chuàng)建一個(gè)message的ref
const message = ref('Hello World!')
// 創(chuàng)建一個(gè)count的ref
const count = ref(0)
// 定義countUp函數(shù),每次點(diǎn)擊按鈕count加1
function countUp() {
count.value++
}
// 返回message和count的值到template中
return {
message,
count,
countUp
}
}
}
</script>
在上面的代碼示例中,我們使用`ref`方法來(lái)創(chuàng)建了一個(gè)`message`對(duì)象和一個(gè)`count`對(duì)象。這些對(duì)象都可以使用`.value`屬性來(lái)調(diào)用其中的方法和屬性。在`countUp`函數(shù)中,我們使用了`.value`屬性來(lái)將`count`值增加1。最后,我們可以在template中使用`message`和`count`的值來(lái)構(gòu)建我們的計(jì)數(shù)器應(yīng)用程序。