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

[shilianmlxg]

 let state = reactive({
      people:{
        age:18,
        sex:'male',
        name:'mafeifei',
        weapon:'kar98'
      },
      projectName:'wh1te'
   })

就是我想取一个 reactive 里的people的某一个属性,比如people里的name,保持people改变之后,我定义的解构的变量 name 也能同步

比如

const {name} = toRefs(state.people)
const {projectName} = toRefs(state)

我想让people里的name改变之后 我解构出来的name也能跟着改变,我用这个name去页面里面渲染新的name的值.

但是我const {name} = toRefs(state.people)这个如果在方法里写才会是最新的,如果是在setup里写的话,还是最初的初始值. 就是我声明这个 reactive 的时候的值

现在我做的是

let lastName = computed(() => return state.people.name)

只有watch或者computed才能实现我的功能

请问大佬我是哪里写的不对吗 ,按理说 toRefs 也能实现我的功能啊

[shilianmlxg]

https://juejin.cn/post/6981701152786104350

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

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

[yaphets666]

有没有可能是 const 的问题呢

[Vegetable]

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

[kamilic]

用 ref 大法好

[Vegetable]

https://v3.cn.vuejs.org/guide/reactivity-fundamentals.html#响应式状态解构

[shilianmlxg]

@Vegetable 谢谢大佬

[gouflv]

watch 似乎更符合直觉

[4196]

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

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

[shilianmlxg]

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

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

所以现在能用 ref 都用 ref 了

[Vegetable]

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

[4196]

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

[kamilic]

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

[shilianmlxg]

@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>

[mosade]

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

[4196]

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

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

[shilianmlxg]

@4196 #15 谢谢大佬。