vue3 中 怎么解构 reactive 里的对象,并且还同步 dom 更新

https://juejin.cn/post/6981701152786104350

我看到里面的大佬提到
1 、ref 是对元数据的拷贝，修改响应式数据时不会影响之前的数据，视图会更新
2 、toRef 和 toRefs 是对元数据的引用，修改响应式数据时，元数据也会改变，但是视图不会更新，toRef 修改的是对象的某个属性，toRefs 修改的是整个对象
3 、toRefs 的使用场景：如果想让响应式数据和原来的数据关联起来同步更新，并且不更新视图，那么就可以使用 toRefs

toRefs 不能实现 解构对象里的值 保持同步更新 并且 dom 也跟着更新吗

有没有可能是 const 的问题呢

啊这，解构会丢失响应，这不是文档里说的吗

用 ref 大法好

@Vegetable 谢谢大佬

watch 似乎更符合直觉

[vue playground]( https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHJlZiAscmVhY3RpdmUsd2F0Y2gsdG9SZWYsdG9SZWZzfSBmcm9tICd2dWUnXG5cblxuIGZ1bmN0aW9uIGFkZExpc3QoKXtcbiAgICBuYW1lLnZhbHVlID0gJzMyMSdcbiAgfVxuIGZ1bmN0aW9uIGFkZE5lc3RQcm9wcygpe1xuICAgcHJvamVjdE5hbWUudmFsdWUgPSAnMzMzJ1xuICB9XG4gIFxuICBmdW5jdGlvbiBhZGQoKXtcbiAgICAgc3RhdGUucGVvcGxlLm5hbWUgPSAn5bu26L+fJ1xuXG4gIH1cblxuICBcbiAgIGxldCBzdGF0ZSA9IHJlYWN0aXZlKHtcbiAgICAgIHBlb3BsZTp7XG4gICAgICAgIGFnZToxOCxcbiAgICAgICAgc2V4OidtYWxlJyxcbiAgICAgICAgbmFtZTonbWFmZWlmZWknLFxuICAgICAgICB3ZWFwb246J2thcjk4J1xuICAgICAgfSxcbiAgICAgIHByb2plY3ROYW1lOid3aDF0ZSdcbiAgIH0pXG4gICBcbiAgIGNvbnN0IHtuYW1lfSA9IHRvUmVmcyhzdGF0ZS5wZW9wbGUpO1xuICAgY29uc29sZS5sb2cobmFtZSlcbmNvbnN0IHtwcm9qZWN0TmFtZX0gPSB0b1JlZnMoc3RhdGUpXG5jb25zb2xlLmxvZyhwcm9qZWN0TmFtZSlcbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU+XG4gIDxoMz5cbiAgICB7e3N0YXRlfX1cbiAgPC9oMz5cbiAgPGJ1dHRvbiBAY2xpY2s9J2FkZExpc3QnPlxuICAgIOS/ruaUuXBlb3BsZS5uYW1lXG4gIDwvYnV0dG9uPlxuICA8YnV0dG9uIEBjbGljaz0nYWRkTmVzdFByb3BzJz5cbiAgICDkv67mlLlwcm9qZWN0TmFtZVxuICA8L2J1dHRvbj5cbiAgPGJ1dHRvbiBAY2xpY2s9J2FkZCc+XG4gICAg5L+u5pS5c3RhdGUucGVvcGxlLm5hbWVcbiAgPC9idXR0b24+XG48L3RlbXBsYXRlPiIsImltcG9ydC1tYXAuanNvbiI6IntcbiAgXCJpbXBvcnRzXCI6IHtcbiAgICBcInZ1ZVwiOiBcImh0dHBzOi8vdW5wa2cuY29tL0B2dWUvcnVudGltZS1kb21AMy4yLjIxL2Rpc3QvcnVudGltZS1kb20uZXNtLWJyb3dzZXIuanNcIlxuICB9XG59In0=)

toRefs 解构没问题啊，你是怎么写的

@kamilic 所以很疑惑,按理说 reactive 是定义引用类型数据,但是如果要 数组更新 dom 的话 必须要这样写
let state = reactive({
list:[]
})
state.list.push() 这样才能保持 dom 也更新

或者就用 ref([])来定义数组

所以现在能用 ref 都用 ref 了

看错了...你这个写法，我本地复制下来你的代码，是可以响应的。

@shilianmlxg
const list = reactive([])
list.push(1)
同样没问题，你要么环境有问题，要么写法有问题

@shilianmlxg 始终觉得 ref 最保险，因为解构实在是用得太频繁，我都想自己搞个 eslint 规则禁止用 reactive 了。

@4196 这样写是可以改变 list 的值 但是不会刷新 dom
比如这个 reset 就不会清除 dom 上的数组
<template>
<div>

<el-button size="small" @click="add">添加</el-button>
<el-button size="small" @click="reset">重置</el-button>

<div>checkedCities:{{checkedCities}}</div>
</div>
</template>

<script>
import {reactive, ref} from '@vue/composition-api'

export default {
name: "hello3",
setup() {
let checkedCities = reactive([])
function add () {
checkedCities.push((Math.random() * 1000).toFixed(0))
}
function reset () {
checkedCities.length = 0
console.log('checkedCities',checkedCities)
}
return {
checkedCities,
add,
reset
}
}
}
</script>

@shilianmlxg
@vue/composition-api 你用的是 Vue2 吧。它的并不是 Proxy 。

@shilianmlxg
@vue/composition-api 这个还是 vue2 ，只是包装了一层 vue3 的同名的方法，没有 proxy ，

你这里是数组要用变更方法，checkedCities.splice( 0, Infinity );

@4196 #15 谢谢大佬。