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

js 复制代码
import {ref} from 'vue';

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

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

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

修改nameage的方法

js 复制代码
function changeName() {
    name.value = '李四';
}

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

刷新浏览器,可以实现nameage的修改:

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

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

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

引入reactive

js 复制代码
import {reactive} from "vue";

ref类似,哪个数据是响应数据,就用reactive包裹:

js 复制代码
let car = reactive({
        brand: '凯迪拉克',
        price: 100,
    })

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

完整代码:

js 复制代码
<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修改属性的值:

js 复制代码
function changePrice(){
    car.value.price += 10;
}

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

完整代码:

js 复制代码
<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. 若需要一个响应式对象,层级不深,refreactive都可以
  3. 若需要一个响应式对象,且层级较深,推荐使用reactive
相关推荐
某公司摸鱼前端28 分钟前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~29 分钟前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程35 分钟前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏36 分钟前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083162 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头2 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's2 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
一只叫煤球的猫3 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim3 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim3 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron