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
相关推荐
小毛驴8505 分钟前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
誰能久伴不乏34 分钟前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端
涔溪2 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
今禾2 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的2 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
我想说一句2 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
jqq6662 小时前
Vue3脚手架实现(九、渲染typescript配置)
前端
码间舞2 小时前
Zustand 与 useSyncExternalStore:现代 React 状态管理的极简之道
前端·react.js
Dream耀2 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
冰菓Neko2 小时前
HTML 常用标签速查表
前端·html