前端学习-vue视频学习004-响应式数据ref reacive
响应式数据
- vue2中，写在data()里的数据自动成为响应式数据
- vue3定义响应式数据，使用ref()或reactive()
- 什么是响应式数据：数据改变时。页面随之变化，即为响应式数据
ref() 创建基本类型的响应式数据
- 首先引入ref
import { ref } from 'vue'
- 所有需要动态变化的数据，使用ref包裹
let name = ref('ssss') // 响应式
- 页面标签中的响应式数据，不需要使用.value
<h2>name:{{ name }}</h2>
- 但是在方法里一定要用
function changeAge() {
age.value++
}
整体的代码
<!-- Person.vue -->
<template>
<div class="person">
<h2>name:{{ name }}</h2>
<h2>age:{{ age }}</h2>
<button @click="changeName">changeName</button>
<button @click="changeAge">changeAge</button>
<button @click="showTel">click</button>
</div>
</template>
<!-- <script lang="ts">
export default {
name:'Person',
}
</script> -->
<script lang="ts" setup name="aaaaaa">
import { ref } from 'vue'
let name = ref('ssss') // 响应式
let age = ref(20) // 响应式
let tel = '1234567889' // 非响应式
// 方法
function changeName() {
name.value = '3dfgb'
}
function changeAge() {
age.value++
}
function showTel() {
alert(tel)
}
</script>
<style scoped>
.person {
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
button {
margin : 0 5px;
}
</style>
ref() 创建对象类型的响应式数据
- ref在遇到对象的时候，会借用reactive进行响应式数据的创建
- 数字类型的对象，使用ref并要修改其值的时候，.value要直接放在数组名后
games.value [0].name = "els"
<template>
<div class="person">
<h1>一辆{{car.name}}, 价格{{car.price}}万</h1>
<button @click="changePrice">changePrice</button>
<hr/>
<h1>游戏列表</h1>
<ul>
<li v-for="game in games" :key="game.id">{{ game.name }}</li>
</ul>
<button @click="changeName">changegamename</button>
</div>
</template>
<script lang="ts" setup name="Person">
import {ref} from 'vue'
let car = ref({name:'宝马', price:100})
let games = ref([
{id:'game01',name:"奥德赛"},
{id:'game02',name:"鬼屋"},
{id:'game03',name:"动森"}
])
function changePrice() {
car.value.price += 20
}
function changeName() {
games.value [0].name = "els"
}
</script>
<style scoped>
.person {
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
button {
margin : 0 5px;
}
li {
font-size : 20px;
}
</style>
reactive() （只能）创建对象类型的响应式数据
方式和ref()类似
<template>
<div class="person">
<h1>一辆{{car.name}}, 价格{{car.price}}万</h1>
<button @click="changePrice">changePrice</button>
<hr/>
<h1>游戏列表</h1>
<ul>
<li v-for="game in games" :key="game.id">{{ game.name }}</li>
</ul>
<button @click="changeName">changegamename</button>
</div>
</template>
<script lang="ts" setup name="Person">
import {reactive} from 'vue'
let car = reactive({name:'宝马', price:100})
let games = reactive([
{id:'game01',name:"奥德赛"},
{id:'game02',name:"鬼屋"},
{id:'game03',name:"动森"}
])
function changePrice() {
car.price += 20
}
function changeName() {
games[0].name = "els"
}
</script>
<style scoped>
.person {
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
button {
margin : 0 5px;
}
li {
font-size : 20px;
}
</style>
如何区分什么时候使用ref，什么时候使用value
-
使用插件自动添加.value
-
使用ref修改对象全部内容
<template>
<div class="person">
<h1>一辆{{car.name}}, 价格{{car.price}}万</h1>
<button @click="changePrice">changePrice</button>
<button @click="changeCar">changeCar</button>
</div>
</template>
<script lang="ts" setup name="Person">
import {ref,reactive} from 'vue'
let car = ref({name:'宝马', price:100})
function changePrice() {
car.value.price += 20
}
function changeCar() {
car.value = {name:'奔驰',price:200}
}
</script>
<style scoped>
.person {
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
button {
margin : 0 5px;
}
li {
font-size : 20px;
}
</style>
- 使用reactive修改对象全部内容
Object.assign(car,{name:'奔驰',price:200})
<template>
<div class="person">
<h1>一辆{{car.name}}, 价格{{car.price}}万</h1>
<button @click="changePrice">changePrice</button>
<button @click="changeCar">changeCar</button>
</div>
</template>
<script lang="ts" setup name="Person">
import {ref,reactive} from 'vue'
let car = reactive({name:'宝马', price:100})
function changePrice() {
car.price += 20
}
function changeCar() {
Object.assign(car,{name:'奔驰',price:200})
}
</script>
<style scoped>
.person {
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
button {
margin : 0 5px;
}
li {
font-size : 20px;
}
</style>
- 关于怎么选择ref和reactive
- 基本类型数据-ref
- 对象类型-ref、reactive
- 层级较深-reactive
toRefs和toRef
toRefs
将reactive定义的对象变成ref定义的对象
- 取出对象中所有的key value，取出的数据同时具备响应式能力
let {name,price} = toRefs(car) // 修改name，对象car的key value也同时被修改
<template>
<div class="person">
<h1>一辆{{name}}, 价格{{price}}万</h1>
<button @click="changePrice">changePrice</button>
<button @click="changeName">changeCar</button>
</div>
</template>
<script lang="ts" setup name="Person">
import {toRefs,reactive} from 'vue'
let car = reactive({name:'宝马', price:100})
let {name,price} = toRefs(car)
function changePrice() {
price.value += 10
console.log(price);
}
function changeName() {
name.value += '`'
console.log(name);
}
</script>
<style scoped>
.person {
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
button {
margin : 0 5px;
}
li {
font-size : 20px;
}
</style>
toRef
<h1>一辆{{car.name}}, 价格{{newPrice}}万</h1>
let newPrice = toRef(car,'price')
