vue-watch 基本使用以及高价使用以及回调函数的详细

Posted 2023-05-03

参考技术A Watch的使用场景

1，主要任务就是监控变量的变化，一个数据影响多个数据

watch的特点：

1.当变量变化时调用函数

2.如果不设置immediate则在初始绑定值时不会执行

watch有两个选项：

1.deep选项：表示深层遍历，当需要监控对象内部值的变化时，可以在选项参数中指定 deep: true。注意监听数组的变动不需要这么做

2.immediate选项：如果在选项参数中指定 immediate: true，将立即触发监控中变量的函数（如果我们需要在最初绑定值的时候也执行监控函数，就需要用到immediate属性）

一，在vue中基本用法

<p>FirstName: <input type="text" v-model="firstName"></p>

data()

            return

              firstName: 'Dawei',

           

        ,

Watch:

//firstName是data的return返回对象中的数组变量，newName是属性变化后的值，oldName是属性变化前的值

firstName(newName, oldName)

          // this.fullName = newName + ' ' + this.lastName;

          console.log(newName)

          console.log(oldName)

        ,



二，使用 immediate和handler

使用场景：

当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行

当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate设为true

firstName:

          handler(newName, oldName)

            console.log(newName)

            console.log(oldName)

          ,

          immediate: true

       

监听的数据后面写成对象形式，包含handler方法和immediate，之前我们写的函数其实就是在写这个handler方法；

immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。

三，deep

当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。

  firstName:

          handler(newName, oldName)

            console.log(newName)

            console.log(oldName)

          ,

          deep: true,

          immediate: true

       

在使用 Vue-watch 监视的对象数组中，如何获取已更改对象的索引？

【中文标题】在使用 Vue-watch 监视的对象数组中，如何获取已更改对象的索引？

【英文标题】：In an array of obects watched with Vue-watch, how to get index of object that was changed?

【发布时间】：2019-04-27 11:03:24

【问题描述】：

我有一个对象数组，如下所示：

 myArray: [
 name: "First",
 price: 10,
 rebate: 5,
 listPrice: 15,
 outcome: 0
 ,
 name: "Second",
 price: 11,
 rebate: 5,
 listPrice: 16,
 outcome: 0

每当同一对象中的任何其他值发生变化时，我都想重新计算outcome-值。

我已经有这样的设置，但它会查找任何对象中的更改，然后重新计算整个数组。我已经设法通过使用computed 和watch 函数的组合来设置它。然而，他们观察整个数组的变化，然后重新计算数组中所有对象的结果值。

我怎样才能观察变化然后重新计算只改变了的对象？

以下是我当前用于重新计算整个数组的函数（查看另一个属性），但我正在寻找的可能完全不同。

计算：

myArrayWasChanged() 
return [this.myArray.reduce((a, vendors) => a + vendors, 0), this.myArray.filter(item => item.discounted == false).length] 

观看：

myArrayWasChanged: 
handler: function (val, oldVal) 
this.recalculateIsVendor();

【参考方案1】：

鉴于outcome 完全依赖于其他属性，它实际上并不是组件状态的一部分。因此，在组件的data 中，您可以存储没有outcome 的数组，然后计算新版本的数组将结果 作为计算属性。

data: function () 
  return 
    myArrayWithoutOutcome: [
    
      name: "First",
      price: 10,
      rebate: 5,
      listPrice: 15
    ,
    
      name: "Second",
      price: 11,
      rebate: 5,
      listPrice: 16
    ]
  
,
computed: 
  myArrayWithOutcome: function () 
    return this.myArrayWithoutOutcome.map(x => 
      return ...x, outcome: this.calculateOutcome(x)
    )
  
,
methods: 
  calculateOutcome(item) 
    // Logic to calculate outcome from item goes here
    return 0
  

【讨论】：

感谢您的建议，它确实有效。这不是我想象的解决方案，但我想我需要学习:-)

如果我想将outcome 添加到原始数组，而不是创建一个新数组。我还能以某种方式使用这种方法吗？

计算属性不应修改数据，因此您可能必须使用手表来实现这一点。这个解决方案听起来很冒险——如果可能的话，我会尽量避免将计算值放入组件数据中，因为它们太容易不同步了。

感谢您的评论，是的，这是我最初向观察者提出的问题 :-)