变量
与Vue2不同，Vue3的变量分为固定变量和响应式变量
变量类型
固定变量
固定变量就是值固定的变量，一般这种变量用到的相对较少，因为一旦被赋值，其在页面上显示的内容就不会发生变化
<template>
<div>{{ text }}</div>
</template>
<script setup lang='ts'>
let text="Hello Vue3!";
</script>注意，无论怎么给变量text赋值，显示在页面上的text都不会发生任何变化
响应式变量
<template>
<div>{{ text }}</div>
</template>
<script setup lang='ts'>
// 注意要引入
import {ref} from "vue";
let text=ref("Hello Vue3!");
// 或者如果是数组和对象，可以这样
import {reactive} from "vue";
let text=reactive(["apple", "banana"])
</script>注意，ref可以用于创建所有响应式变量，而reactive只能创建对象和数组的响应式变量
变量的使用
在HTML标签中使用
所有的变量在HTML标签中都可以直接使用
<template>
<div>{{ text1 }}</div>
<div>{{ text2 }}</div>
</template>
<script setup lang='ts'>
import {ref} from "vue";
let text1="Hello Vue3!";
let text2=ref("Hello Vue3!");
</script>上面的代码两行都显示为"Hello Vue3!"，没有区别
在script标签中使用
在script标签中，所有的固定变量可以直接使用，但是响应式变量需要根据情况来改变其值
下面是错误示例，固定变量无法修改其值
<template>
<div>{{ num }}</div>
<button @click="changeNum">按钮</button>
</template>
<script setup lang='ts'>
// 注意，这是错误示例！！
let num=0;
function changeNum(){
num+=1;
}
</script>对于使用ref创建的响应式变量，需要通过.value来改变其值
<template>
<div>{{ num }}</div>
<button @click="changeNum">按钮</button>
</template>
<script setup lang='ts'>
import {ref} from "vue";
let num=ref(0);
function changeNum(){
num.value+=1;
}
</script>对于使用reactive创建的响应式变量，可以直接修数组或者对象中的值
<template>
<div>{{ obj.num }}</div>
<button @click="changeNum">按钮</button>
</template>
<script setup lang='ts'>
import {reactive} from "vue";
let obj=reactive({
num: 1,
name: 'zhangsan'
});
function changeNum(){
obj.num+=1;
}
</script>注意！使用reactive创建的响应式变量不能直接对整个变量赋值
下面的是一个错误的示例
<template>
<div>{{ obj.num }}</div>
<button @click="changeNum">按钮</button>
</template>
<script setup lang='ts'>
import {reactive} from "vue";
// 注意，这是错误示例！！
let obj=reactive({
num: 1,
name: 'zhangsan'
});
function changeNum(){
obj={
num: 2,
name: 'lisi'
}
}
</script>如果需要覆盖原有的对象，可以这么写
<template>
<div>{{ obj.num }}</div>
<button @click="changeNum">按钮</button>
</template>
<script setup lang='ts'>
import {reactive} from "vue";
// 注意，这是错误示例！！
let obj=reactive({
num: 1,
name: 'zhangsan'
});
let obj2={num: 2, name: 'lisi'};
function changeNum(){
Object.assign(obj, obj2);
}
</script>双向绑定
<template>
<div>
<!-- 注意添加:value -->
<input v-model:value="text" />
</div>
</template>
<script setup lang="ts">
import {ref} from "vue";
var text=ref("");
</script>