vue3种对象类型的响应式用reactive实现。
但是reactive对象在赋值后,因为变量代理函数变了,就失去了响应式功能了。示例如下:
<template> <div> <div >{{ data.name}}</div> <div >{{ data.age}}</div> <button @click="onUp">长大</button> </div> </template> <script lang="ts" setup> import { reactive } from 'vue' let data = reactive({name:'小猫', age:7}) const onUp = () => { data = reactive({name:'小猫', age:10}) } </script>
解决方法1:通过对象属性来修改:data.age=10
解决方法2:改用ref来定义变量