vue如何解决往组件中传值只执行一次的问题？有没有更简单的方法？

• Z时代
• 2024-03-13
• 分类：IT

比如平时写后台程序时，只要定义一个函数func(xxx,yyy)，每次调用这个函数，函数里面的内容就执行一次，重复调用则重复执行。

而前端vue组件，写好一个组件被其他组件调用，如果不用watch去监听入参，这个组件只有第一次create时运行，第二次参数变更就不运行了。但如果用watch每次都要这么写：
入参写一次，监听写一次。

太麻烦了。

这个问题有其他解决方法吗，能像写后台程序的函数那样，只要有新的入参（入参变更），就重新执行一次。（即每次都刷新一次组件）

回答：

题主可能提错了问题

业务逻辑依赖多个 props + data + computed 如何跟踪变化

写到 created 中很方便, 但后续这些参数变化跟踪会丢失, 写到watch又只能一次跟踪一个参数

两个解决办法, 逻辑一样

created(){
   this.$watch(()=> [this.aaa, this.bbb, this.ccc], ([aaa,bbb,ccc]) => {
       ....
   })
}

另一种就是计算属性了

  computed: {
     myargs() { return [this.aaa, this.bbb, this.ccc] }
  },
  watch: {
     myargs([aaa, bbb, ccc]) {
        .....
     }
  }

当然如果你的处理过程都是同步的, 考虑将你的处理过程抽象出一个返回值, 把整体包装为一个计算属性, 这样就是自动收集依赖关系了

computed: {
  myargs(){
    let { aaa, bbb, ccc } = this
    ...
    return newValue
  }
}

如果处理过程有异步操作, 也可以这么干, 只是稍微有点风险

回答：

watch不也是函数吗？watch支持立即执行，不需要在created再写一次：

watch: {
  text: {
    handler(newValue){
    // dosomething
    },
    immeidate: true,
  }
}

回答：

watch就是处理这个问题的，传入组件的props变化，如果在watch中有定义就会变更。

回答：

用ref可以解决，即在子组件中写一个方法（function resolve(opt)）接收一个参数，父组件直接使用ref调用子组件的方法，并且传参： this.$ref.chidRef.resolve(opt)

以上是 vue如何解决往组件中传值只执行一次的问题？有没有更简单的方法？ 的全部内容， 来源链接： utcz.com/p/935988.html