vue怎么就响应式了

发布日期: 2023-08-27

更新日期: 2023-09-05

文章字数: 250

阅读时长: 1 分

阅读次数:

我们看这段vue代码

<template>
    <h1>{{ count }}</h1>
    <el-button @click="count++">count++</el-button>
</template>
<script setup>
const count = 10;
</script>

<style scoped>
</style>

效果如图

这里我们怎么点击 count++ 按钮, h1 标签中 count 显示的值都不会变化。但是你说内存中 count 的值变了么，当然变了，只是我们没有再反向给 h1 标签赋值而已

<template>
    <h1>{{ count }}</h1>
    <el-button @click="count++">count++</el-button>
</template>
<script setup>
import {ref} from "vue";

const count = ref(10);
</script>

<style scoped>
</style>

而如果我们使用 ref() 这个函数来定义一个变量，那么当我们再次点击 count++ 按钮的时候，h1 标签里面的值就会自动跟着变了。这就是响应式最基本的表现形式之一。