当前位置: 首页 > 知识库问答 >
问题:

javascript - 在vue3中的组合式函数中监听传递过来的值,监听不到?

王刚毅
2023-05-18

我定义了一个组合式函数useCompute:

export default function useCompute(nums) {
 const item = ref(0)
  watch(() => nums, (val) => {
    console.log('watch nums', val)
    if (val.length) item = nums[0]
  }, {deep: true})
  return {
    item    
  }
}

在组件中我这样使用:

const form = reactive({
    data: {
        nums: []
    }
})
const {item} = useCompute(form.data.nums)

我想在nums的长度改变之后能让item也改变,但是好像不起作用,我在组件中可以监听到 form.data.nums 的变化,但是在useCompute我监听不到,只有初次渲染组件的时候会执行一次watch里的函数,我才接触vue3,还有很多地方不是很懂,有大神可以帮忙解答下吗?十分感谢!

共有1个答案

杜俭
2023-05-18

如果你是直接form.data.nums = [],那监听不到,因为函数传参是复制值,都叫nums,值也一样,但是在内存中的位置不一样,所以不是同一个变量,你可以把form.data也传过去,对form.data进行监听

 类似资料:
  • 父组件用ref声明一数组 然后循环子组件并把数据传递给子组件 当父组件的数据发生变化时 希望子组件能监听到并响应 目前不知道为何没响应.请教哪里出了问题? 是不是这种业务场景最正规的是不是应该用reactive? 我试了一下 加immediate就可以了 但是我并不想第一次就触发

  • 主要内容:实例,实例,实例本章节,我们将为大家介绍 Vue3 监听属性 watch,我们可以通过 watch 来响应数据的变化。 以下实例通过使用 watch 实现计数器: 实例 <div id = "app" >     <p style = "font-size:25px;" >计数器 : { { counter } } </p >     <button @click = "counter++" style = "f

  • addEventListener('keydown', myFunction), removeEventListener('keydown', myFunction) 怎么在myFunction传参数 this?

  • 这是为什么,应该是独立的嘛,怎么全部的监听器都触发了。 如何修改呢? 剥离出来也不行。

  • Listener架构概述 Listener Listener.DrainType (Enum) Filter FilterChainMatch FilterChain Listener Listener proto { "name": "...", "address": "{...}", "filter_chains": [], "use_original_dst": "{...}

  • 我是React native和firestore的初学者,使用它们来构建一种社交媒体应用程序,我有一个奇怪的问题(我认为我构建数据库的方式不对)。我想有一个feed,所有的帖子,没有追随者,没有任何东西。我第一次在db中构建帖子时是这样的:用户(集合)- 所以我像这样重新构建了数据库:2个主集合、帖子和用户。完全不同。在用户集合中,只有用户及其数据的文档(姓名、年龄等)。在另一个中,他们的帖子(姓