Vue3.0教程004：ref和reactive对比

文章目录

• • [3.4 ref创建基本类型的响应式数据](#3.4 ref创建基本类型的响应式数据)
  • [3.5 reactive创建对象类型响应数据](#3.5 reactive创建对象类型响应数据)
  • [3.6 ref创建对象类型的响应式数据](#3.6 ref创建对象类型的响应式数据)
  • [3.7 ref对比reactive](#3.7 ref对比reactive)

3.4 ref创建基本类型的响应式数据

在script中引入ref

import {ref} from 'vue';

需要哪个数据是响应式的，就用ref包裹哪个数据：

// 数据
let name = ref('张三'); // 此时的name是响应式的
let age = ref(18); // 此时的age是响应式的

注意：这个时候通过方法修改name和age的值的时候，不能通过name='李四'和age += 实现，会报错，因为真实的值是存放在value中的，需要通过name.value和age.value来实现。但是模板中不需要通过{``{name.value}}实现，因为模板会自动获取.value值。

修改name和age的方法

function changeName() {
    name.value = '李四';
}

function changeAge() {
    age.value += 1;
}

刷新浏览器，可以实现name和age的修改：

注意：这里强调的是基本类型响应式数据。

• 因为name='张三'和age=18都是基本类型。

3.5 reactive创建对象类型响应数据

引入reactive

import {reactive} from "vue";

和ref类似，哪个数据是响应数据，就用reactive包裹：

let car = reactive({
        brand: '凯迪拉克',
        price: 100,
    })

    let games = reactive([
        {
            id: '01',
            name: '王者荣耀'
        },
        {
            id: '02',
            name: '冲就完事模拟器'
        }
    ])

完整代码：

<template>
    <div class="car">
        <h2>一辆{{car.brand}}，价值{{car.price}}万</h2>
        <button @click="changePrice">修改汽车价格</button>
        <br />
        <h2>游戏列表</h2>
        <ul>
            <li v-for="game in games" :key="game.id">
                {{game.name}}
            </li>
        </ul>
        <button @click="changeFirstGameName">修改第一个游戏名字</button>
    </div>
</template>

<!--配置组件名-->
<script lang="ts">
// JS/TS
export default {
    name: 'Car',
}
</script>

<!--配置组合式API-->
<script lang="ts" setup>
    import {reactive} from "vue";

    let car = reactive({
        brand: '凯迪拉克',
        price: 100,
    })

    let games = reactive([
        {
            id: '01',
            name: '王者荣耀'
        },
        {
            id: '02',
            name: '冲就完事模拟器'
        }
    ])

    console.log(car);

    function changePrice(){
        car.price += 10;
    }

    function changeFirstGameName(){
        games[0].name = '魂斗罗';
    }
</script>

<style scoped>
/* 样式 */
.car {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 5px;
}

li{
    font-size: 20px;
}
</style>

实现效果：

注意：reactive只能定义对象类型的响应式数据。

3.6 ref创建对象类型的响应式数据

值得注意的是，【修改汽车价格】和【修改游戏名字】的函数中，要使用.value修改属性的值：

function changePrice(){
    car.value.price += 10;
}

function changeFirstGameName(){
    games.value[0].name = '魂斗罗';
}

完整代码：

<template>
    <div class="car">
        <h2>一辆{{car.brand}}，价值{{car.price}}万</h2>
        <button @click="changePrice">修改汽车价格</button>
        <br />
        <h2>游戏列表</h2>
        <ul>
            <li v-for="game in games" :key="game.id">
                {{game.name}}
            </li>
        </ul>
        <button @click="changeFirstGameName">修改第一个游戏名字</button>
    </div>
</template>

<!--配置组件名-->
<script lang="ts">
// JS/TS
export default {
    name: 'Car',
}
</script>

<!--配置组合式API-->
<script lang="ts" setup>
    import {ref} from "vue";

    let car = ref({
        brand: '凯迪拉克',
        price: 100,
    })

    let games = ref([
        {
            id: '01',
            name: '王者荣耀'
        },
        {
            id: '02',
            name: '冲就完事模拟器'
        }
    ])

    function changePrice(){
        car.value.price += 10;
    }

    function changeFirstGameName(){
        games.value[0].name = '魂斗罗';
    }
</script>

<style scoped>
/* 样式 */
.car {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 5px;
}

li{
    font-size: 20px;
}
</style>

3.7 ref对比reactive

宏观角度看：

1. ref用来定义：基本类型数据、对象类型数据
2. reactive用来定义：对象类型数据

区别：

1. ref创建的变量必须使用.value
2. reactive重新分配一个新对象，会失去响应式

使用原则：

1. 若需要一个基本类型的响应式数据，必须使用ref
2. 若需要一个响应式对象，层级不深，ref、reactive都可以
3. 若需要一个响应式对象，且层级较深，推荐使用reactive