表达式: 用于表达式进行插值,渲染到页面之中

语法: {{ 表达式 }}

案例

<template>
    <h1>{{ arr[2] }}</h1>
    <h1>{{ 9 + 5 }}</h1>
    <h1>{{ "神奇" }}</h1>
</template>

<script setup>
import { ref } from 'vue';
var arr = ref([1, 2, 4, 5])
</script>

<style></style>

---

响应式：数据的变化可以触发到界面

响应式语法：可以将任何类型的值转换为响应式数据

import { ref } from 'vue'; //用于引入组件，相对于java中的导包

const reactiveVar = ref('这是响应式变量');

---

普通变量和响应式的区别(当一个修改的区域块，同时出现了普通和响应式，两者都会是响应式)

响应式：修改响应式的值之后，页面可以发生改变

<template>
    <div>
        <!-- 显示响应式变量的值 -->
        <h1>响应式变量: {{ reactiveVar }}</h1>
        <!-- 点击按钮时调用updateRef函数以更新响应式变量的值 -->
        <button @click="updateRef">响应式变量</button>
    </div>
</template>

<script setup>
// 导入Vue的ref函数，用于创建响应式变量
import { ref } from 'vue';

// 创建一个响应式变量，初始值为'这是响应式变量'
const reactiveVar = ref('这是响应式变量');

/**
 * 更新响应式变量的值
 * 此函数将reactiveVar的值更新为'响应式变量已更新'，以演示响应式原理
 */
function updateRef() {
    reactiveVar.value = '响应式变量已更新';
}

</script>

点击后

---

普通变量：当我们修改普通变量的值之后，页面中显示的值并不会发生改变

<template>
    <div>
        <!-- 显示普通变量的值 -->
        <h1>普通变量: {{ normalVar }}</h1>
        <!-- 点击按钮时调用update函数以更新普通变量的值 -->
        <button @click="update">普通变量</button>
    </div>
</template>

<script setup>
// 普通变量，不会引起界面自动更新
let normalVar = '这是普通变量';

// 更新函数，用于更新普通变量的值
function update() {
    // 更新普通变量
    normalVar = '普通变量已更新';
}
</script>

<style></style>