5、reactive

尘缘浮梦2024-11-04 22:27

作用

reactive`用来定义：对象类型数据。

reactive重新分配一个新对象，会失去响应式（可以使用Object.assign`去整体替换）。

代码

<template>
<div>
    
    <h2>{{ info.name }}</h2>
    <h2>{{ info.age }}</h2>
    <button @click="updateName">修改名字</button>
    <button @click="updateAge">修改年龄</button>
    <button @click="showPhone">显示联系方式</button>
</div>
</template>

<script setup lang="ts" name="Student">
    import { reactive } from 'vue';
    let info=reactive({name:'weiwei',age:18})
    function updateName(){
        info.name="李四"
    }
    function updateAge(){
        info.age+=1
        
    }
    function showPhone(){
        alert("18880709")
    }
</script>

<style scoped>

</style>

重新分配一个新对象代码

<template>
<div>
    
    <h2>{{ info.name }}</h2>
    <h2>{{ info.age }}</h2>
    <button @click="updateName">修改名字</button>
    <button @click="updateAge">修改年龄</button>
    <button @click="updateInfo">修改名字和年龄</button>
    <button @click="showPhone">显示联系方式</button>
</div>
</template>

<script setup lang="ts" name="Student">
    import { reactive } from 'vue';
    let info=reactive({name:'weiwei',age:18})
    function updateName(){
        info.name='李四'
    }
    function updateAge(){
        info.age+=1
        
    }
    function showPhone(){
        alert("18880709")
    }
    function updateInfo(){
        Object.assign(info,{name:'王五',age:38})
    }
</script>

<style scoped>

</style>