创建响应式数据
Vue2中
在vue2中数据写在对应的data中就是响应式的。
Vue3
ref ：可以定义基本类型的响应式数据
先要导入对应的ref，然后才能使用
import {ref} from 'vue'
作用：定义响应式变量。
语法：let xxx = ref(初始值)。
返回值：一个RefImpl的实例对象，简称ref对象或ref，ref对象的value属性是响应式的。
注意点：
JS中操作数据需要：xxx.value，但模板中不需要.value，直接使用即可。
对于let name = ref('张三')来说，name不是响应式的，name.value是响应式的。
<template><div class="person"><h2>姓名: {{ name }}</h2><h2>年龄: {{ age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="showTel">查看联系方式</button></div>
</template><script setup lang="ts" name="Person234">import {ref} from 'vue'//###### 数据（原本写在data中） ######let name = ref('张三');let age = ref(18);let tel = "18888888888";//###### 方法（原本写在methods中） ######function changeName() {name.value = "李四";console.log(name.value);}function changeAge() {age.value += 1;console.log(age.value);}function showTel() {alert(tel);}
</script><style>
.person {background-color: skyblue;box-shadow: 0 0 10px; /* 盒子阴影 */border-radius: 10px;padding: 20px;
}button {margin: 0 5px;
}
</style>
reactive：只能定义对象类型的响应式数据
作用：定义一个响应式对象（基本类型不要用它，要用ref，否则报错）
语法：let 响应式对象= reactive(源对象)。
返回值：一个Proxy的实例对象，简称：响应式对象。
注意点：reactive定义的响应式数据是“深层次”的。
<template><div class="person"><h2>一辆{{car.brand}}, 价值{{car.price}}</h2><button @click="changePrice">修改汽车的价格</button><ul><li v-for="g in games" v-bind:key="g.id">{{g.name}}</li></ul><button @click="changeFirstGame">修改第一个游戏的名字</button></div>
</template><script setup lang="ts" name="Person234">import {reactive} from 'vue'//###### 数据 ######let car = reactive({brand: '小米S7', price: 30});let games = reactive([ //数组也是属于对象范畴的{id: 1, name:'原神'},{id: 2, name:'CF'},{id: 3, name:'王者荣耀'}])//###### 方法 ######function changePrice() {car.price += 10;console.log(car);}function changeFirstGame() {console.log(games);games[0].name = '三国志';}
</script><style>
.person {background-color: skyblue;box-shadow: 0 0 10px; /* 盒子阴影 */border-radius: 10px;padding: 20px;
}button {margin: 0 5px;
}
</style>
ref：可以定义对应类型的响应式数据
其实ref接收的数据可以是：基本类型、对象类型。
若ref接收的是对象类型，内部其实也是调用了reactive函数。
<template><div class="person"><h2>一辆{{car.brand}}, 价值{{car.price}}</h2><button @click="changePrice">修改汽车的价格</button><ul><li v-for="g in games" v-bind:key="g.id">{{g.name}}</li></ul><button @click="changeFirstGame">修改第一个游戏的名字</button></div>
</template><script setup lang="ts" name="Person">import {ref} from 'vue'//###### 数据 ######let car = ref({brand: '小米S7', price: 30});let games = ref([ //数组也是属于对象范畴的{id: 1, name:'原神'},{id: 2, name:'CF'},{id: 3, name:'王者荣耀'}])//###### 方法 ######function changePrice() {car.value.price += 10;console.log(car);}function changeFirstGame() {console.log(games);games.value[0].name = '三国志';}
</script><style>
.person {background-color: skyblue;box-shadow: 0 0 10px; /* 盒子阴影 */border-radius: 10px;padding: 20px;
}button {margin: 0 5px;
}
</style>
ref 对比 reactive
宏观角度看：
ref用来定义：基本类型数据、对象类型数据；
reactive用来定义：对象类型数据。
- 区别：
ref创建的变量必须使用.value（可以使用volar插件自动添加.value）。
reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）。(具体参考vue文档reactive的局限性)
- 使用原则：
- 若需要一个基本类型的响应式数据，必须使用
ref。- 若需要一个响应式对象，层级不深，
ref、reactive都可以。- 若需要一个响应式对象，且层级较深，推荐使用
reactive。
参考代码：
<template><div class="person"><h2>一辆{{car.brand}}, 价值{{car.price}}</h2><button @click="changePrice">修改汽车的价格</button><button @click="changeCar">修改汽车</button><hr><h2>当前求和位: {{sum}}</h2><button @click="changeSum">点我sum+1</button></div>
</template><script setup lang="ts" name="Person">import {reactive, ref} from 'vue'//###### 数据 ######let car = reactive({brand: '小米S7', price: 30});let sum = ref(0)//###### 方法 ######function changePrice() {car.price += 10;console.log(car);}function changeSum() {sum.value += 1;console.log(sum.value);}function changeCar() {// car = {brand: '马自达', price: 20}; //无效，修改了原本的整个对象// car = reactive({brand: '马自达', price: 20}); //无效，如果重新reactive 其实已经断开了最开始的设置Object.assign(car, {brand: '马自达', price: 20}); //有效}
</script><style>
.person {background-color: skyblue;box-shadow: 0 0 10px; /* 盒子阴影 */border-radius: 10px;padding: 20px;
}button {margin: 0 5px;
}
</style>
