import { computed, onMounted, reactive, ref, toRefs } from "vue"; const formState = () => { const state = reactive({ list: [ { addre...">

script setup 语法糖中reactive + toRefs+解构, 如何让内部数据具有响应性?

2023-04-03 0 1,336
<script setup lang="ts">
import { computed, onMounted, reactive, ref, toRefs } from "vue";
const formState = () => {
  const state = reactive({
  list: [
    {
      address: '浙江省杭州市江干区丁群街556号',
      name: '蓝雅萍',
      phone: '18682072619'
    },
    {
      address: '云南省昆明市五华区正义路33-35号',
      name: '张翠佩',
      phone: '18682039451'
    },
    {
      address: '湖北省武汉市武昌区彭刘杨路215号',
      name: '李品坤',
      phone: '15732112891'
    },
  ]
  });
  return toRefs(state);
}
const { list } = formState();
// 应该怎样的写法让list具有响应式 现在list修改不能在页面更新
</script>

你这样写是没有问题的,list就是具有响应性的
但是为什么要写的这些复杂,这样不就可以了

const state = reactive({
  list: [
    {
      address: '浙江省杭州市江干区丁群街556号',
      name: '蓝雅萍',
      phone: '18682072619'
    },
    {
      address: '云南省昆明市五华区正义路33-35号',
      name: '张翠佩',
      phone: '18682039451'
    },
    {
      address: '湖北省武汉市武昌区彭刘杨路215号',
      name: '李品坤',
      phone: '15732112891'
    },
  ]
  });

const {list } = toRefs(state)
script setup 语法糖中reactive + toRefs+解构, 如何让内部数据具有响应性?
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. JK下载官网所有资源来源于开发团队,加入会员即可下载使用!如有问题请联系右下角在线客服!
2. JK下载官方保障所有软件都通过人工亲测,为每位会员用户提供安全可靠的应用软件、游戏资源下载及程序开发服务。
3. JK开发团队针对会员诉求,历经多年拥有现今开发成果, 每款应用程序上线前都经过人工测试无误后提供安装使用,只为会员提供安全原创的应用。
4. PC/移动端应用下载后如遇安装使用问题请联系右下角在线客服或提交工单,一对一指导解决疑难。

JK软件下载官网 技术分享 script setup 语法糖中reactive + toRefs+解构, 如何让内部数据具有响应性? https://www.jkxiazai.com/1277.html

JK软件应用商店是经过官方安全认证,保障正版软件平台

相关资源

官方客服团队

为您解决烦忧 - 24小时在线 专业服务