这是一个创建于 1256 天前的主题，其中的信息可能已经有所发展或是发生改变。
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 也能实现我的功能啊
 | 1 shilianmlxg OP https://juejin.cn/post/6981701152786104350 我看到里面的大佬提到 1 、ref 是对元数据的拷贝，修改响应式数据时不会影响之前的数据，视图会更新 2 、toRef 和 toRefs 是对元数据的引用，修改响应式数据时，元数据也会改变，但是视图不会更新，toRef 修改的是对象的某个属性，toRefs 修改的是整个对象 3 、toRefs 的使用场景：如果想让响应式数据和原来的数据关联起来同步更新，并且不更新视图，那么就可以使用 toRefs toRefs 不能实现 解构对象里的值 保持同步更新 并且 dom 也跟着更新吗 |
 | 2 yaphets666 2022-05-07 16:37:56 +08:00 有没有可能是 const 的问题呢 |
 | 3 Vegetable 202205-07 16:45:45 +08:00 啊这，解构会丢失响应，这不是文档里说的吗 |
 | 4 kamilic 2022-05-07 16:47:32 +08:00 用 ref 大法好 |
| 5 Vegetable 2022-05-07 16:48:19 +08:00 |
| 6 shilianmlxg OP @Vegetable 谢谢大佬 |
 | 7 gouflv 2022-05-07 16:58:09 +08:00 via iPhone watch 似乎更符合直觉 |
 | 8 4196 2022-05-07 17:00:09 +08:00 |
| 9 shilianmlxg OP @kamilic 所以很疑惑,按理说 reactive 是定义引用类型数据,但是如果要 数组更新 dom 的话 必须要这样写 let state = reactive({ list:[] }) state.list.push() 这样才能保持 dom 也更新 或者就用 ref([])来定义数组 所以现在能用 ref 都用 ref 了 |
| 10 Vegetable 2022-05-07 17:01:22 +08:00 看错了...你这个写法，我本地复制下来你的代码，是可以响应的。 |
| 11 4196 2022-05-07 17:04:53 +08:00 |
| 12 kamilic 2022-05-07 17:29:07 +08:00 @shilianmlxg 始终觉得 ref 最保险，因为解构实在是用得太频繁，我都想自己搞个 eslint 规则禁止用 reactive 了。 |
| 13 shilianmlxg OP @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> |
 | 14 mosade 2022-05-07 21:58:07 +08:00 |
| 15 4196 2022-05-09 18:28:24 +08:00 @shilianmlxg @vue/composition-api 这个还是 vue2 ，只是包装了一层 vue3 的同名的方法，没有 proxy ， 你这里是数组要用变更方法，checkedCities.splice( 0, Infinity ); |
| 16 shilianmlxg OP @4196 #15 谢谢大佬。 |
Select Language