ref创建基本类型的响应式数据
- template里面不需要用.value
- 但js中使用ref的都要用.value
下面为反例
csharp
//数据
let name=ref('张三')
let age=ref(18)
let tel='123456789'//不用响应式
//方法
function changename(){
name='asd'//这样会报错,需要加.value
}
function changeage(){
age+=1
}
function showTel(){
alert(tel)
}
举例
xml
<script lang="ts" setup name="person">
import {ref} from 'vue'
// let a=666
//数据
let name=ref('张三')
let age=ref(18)
let tel='123456789'//可不用响应式
//方法
function changename(){
name.value='asd'
}
function changeage(){
age.value+=1
}
function showTel(){
alert(tel)
}
</script>
reactive创建对象类型的响应式数据
reactive是深层次的,ref是浅层次的
reactive局限性:
reactive包裹的对象不可整体修改
xml
<template>
<div class="person">
<h2>
汽车信息: 一辆{{ car.brand }}车,价值{{ car.price }}万
</h2>
<button @click="changePrice">修改汽车的价格</button>
<br>
<h2>游戏列表</h2>
<ul>
<li v-for="g in games" :key="g.id">{{ g.name }}</li>
<button @click="changename">修改第一个游戏的名字</button>
</ul>
</div>
</template>
//这个script配置组件API
<script lang="ts" setup name="person">
import {reactive} from 'vue'
//数据
let car=reactive({
brand:'奔驰',price:100
})
let games=reactive([
{id:'01',name:'aa'},
{id:'02',name:'bb'},
{id:'03',name:'cc'}
])
//方法
function changePrice(){
car.price+=10
}
function changename(){
games[0].name='kkk'
}
</script>
<style>
.person{
background-color: rgb(178, 178, 216);
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
button{
margin: 0 5px;
}
li{
font-size: 20px;
}
</style>
ref可以定义 基本类型、对象类型的响应式数据
reactive只能定义 对象类型的响应式数据
ref和reactive区别:
ref创建的变量必须使用.value
reactive 重新分配一个新对象,会失去响应式