5、reactive

作用

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>
相关推荐
倒霉男孩36 分钟前
HTML视频和音频
前端·html·音视频
喜欢便码36 分钟前
JS小练习0.1——弹出姓名
java·前端·javascript
chase。41 分钟前
【学习笔记】MeshCat: 基于three.js的远程可控3D可视化工具
javascript·笔记·学习
暗暗那1 小时前
【面试】什么是回流和重绘
前端·css·html
小宁爱Python1 小时前
用HTML和CSS绘制佩奇:我不是佩奇
前端·css·html
weifexie2 小时前
ruby可变参数
开发语言·前端·ruby
千野竹之卫2 小时前
3D珠宝渲染用什么软件比较好?渲染100邀请码1a12
开发语言·前端·javascript·3d·3dsmax
sunbyte2 小时前
初识 Three.js:开启你的 Web 3D 世界 ✨
前端·javascript·3d
半兽先生2 小时前
WebRtc 视频流卡顿黑屏解决方案
java·前端·webrtc
南星沐3 小时前
Spring Boot 常用依赖介绍
java·前端·spring boot