Vue3 使用 reactive

最新推荐文章于 2024-05-19 22:53:26 发布

是小张呀！

最新推荐文章于 2024-05-19 22:53:26 发布

阅读量573

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_52099965/article/details/127437932

版权

reactive

定义一个对象类型或数组类型的响应式数据

<template>
  <div>
      {{obj.name}}-------{{obj.age}}

      <button @click="edit">修改</button>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
// readonly 拷贝一份proxy对象将其设置为只读
// shallowReactive 只能对浅层的数据 如果是深层的数据只会改变值 不会改变视图

type H = {
  name:string,
  age: number
}

const obj = reactive<H>({
  name: 'zs',
  age: 19
})


const edit = () => {
  obj.name = 'ls',
  obj.age = 20
}

console.log(obj)
</script>

<style scoped>

</style>