reactive
<template>
<div>
<h2 @click="increment">{{ count }}</h2>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
// 使用reactive创建响应式数据
const state = reactive({
count: 0
})
// 定义一个增加count的方法
const increment = () => {
state.count++
}
// 在组件挂载后输出初始化信息
onMounted(() => {
console.log('组件已挂载')
})
// 导出响应式数据和方法
export { state, increment }
</script>
<style>
/* 样式代码 */
</style>
在上述代码中,使用了reactive函数来创建一个响应式的state对象,其中包含一个count属性。还定义了一个increment方法,用于增加count的值。在组件挂载后,使用onMounted钩子函数输出了一个初始化信息。
最后,通过export关键字将state和increment导出,以便在模板中使用。文章来源:https://www.toymoban.com/news/detail-821110.html
ref
<template>
<div>
<button @click="increment">Increment</button>
<p>Count: {{ count }}</p>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const count = ref(0);
function increment() {
count.value++;
}
</script>
<style scoped>
/* 样式代码 */
</style>
在这个例子中,使用了ref函数来创建一个响应式的变量count,并将其初始值设置为0。
然后,定义了一个increment函数,当按钮被点击时,会将count的值加1。
在模板中,展示了count的值,并提供了一个按钮来触发increment函数。文章来源地址https://www.toymoban.com/news/detail-821110.html
到了这里,关于Vue 3 + Ts 钩子函数(hooks)的用法,以<script setup lang=“ts“/>语法糖形式 #reactive #ref的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!