vue3 setup reactive响应数据

最新推荐文章于 2024-08-08 10:47:22 发布

万事胜意sy

最新推荐文章于 2024-08-08 10:47:22 发布

阅读量765

点赞数 1

分类专栏：笔记文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_50736511/article/details/121752316

版权

笔记专栏收录该内容

469 篇文章 2 订阅

订阅专栏

本文介绍了Vue中的响应式原理，重点讨论了reactive和ref在修饰对象和数组时的用法。通过示例展示了如何改变深层对象属性和数组元素，并在模板中实时更新。同时，提供了修改对象属性和数组元素的growup()方法作为实践操作。

摘要由CSDN通过智能技术生成

在这里插入图片描述

reactive不能修饰基本数据类型只能修饰对像和数组

改变对象（可以该变更深层次的对象）

<template>
 名字：{{name}}
 <br>
 年龄：{{age}}
 <br>
 性别：{{obj.sex}}
 <br>
身高：{{obj.long}}
<br>
发行:{{obj.hair.color}}和{{obj.hair.type}}
<br>
<button @click="growup()">
  点击成长
</button>
</template>
<script>
import {reactive, ref} from "vue"
export default {
 setup(){
   let name=ref("张三")
   let age=ref(18)
   let obj=reactive({
     sex:"男",
     long:"160",
     hair:{
       color:"黑",
       type:"短"
     }
   })
  function growup(){
     age.value=20
     obj.long="180"
     obj.hair.color="黄"
     obj.hair.type="长"
     console.log(age);
     console.log(obj.long);
   }
return{
  name,
  age,
  obj,
  growup
}
 }
}
</script>

<style>

</style>

在这里插入图片描述
改变数组

<template>
 名字：{{name}}
 <br>
 年龄：{{age}}
 <br>
 性别：{{obj.sex}}
 <br>
身高：{{obj.long}}
<br>
发行:{{obj.hair.color}}和{{obj.hair.type}}
<br>
爱好：{{hobbits}}
<br>
<button @click="growup()">
  点击成长
</button>
</template>
<script>
import {reactive, ref} from "vue"
export default {
 setup(){
   let name=ref("张三")
   let age=ref(18)
   let obj=reactive({
     sex:"男",
     long:"160",
     hair:{
       color:"黑",
       type:"短"
     }
   })
   let hobbits=reactive(["吃饭","打游戏"])
  function growup(){
     age.value=20
     obj.long="180"
     obj.hair.color="黄"
     obj.hair.type="长"
     hobbits[0]="打代码",
     hobbits[1]="运动"
   }
return{
  name,
  age,
  obj,
  hobbits,
  growup
}
 }
}
</script>

<style>

</style>