vue用什么记录旧值

在Vue中，可以通过使用计算属性和watch来记录旧值。

1. 计算属性：计算属性是Vue中一种便捷的方式，用于根据当前数据的变化动态计算衍生出来的值。通过在计算属性中保存旧值，可以方便地跟踪数据变化。

例如，我们有一个data属性叫做value，需要记录其旧值，可以使用计算属性的方式：

data() {
  return {
    value: 0,
  }
},
computed: {
  oldValue() {
    return this.value; // 计算属性通过依赖于data的value来实时计算旧值
  }
}

2. Watch：Watch是Vue提供的另一种方式，在监听数据的变化时执行特定的操作。通过监听数据的变化，可以在其变化前保存旧值。

例如，我们需要监听data属性value的变化并保存旧值：

data() {
  return {
    value: 0,
    oldValue: 0,
  }
},
watch: {
  value(newVal, oldVal) {
    this.oldValue = oldVal; // 在数据变化时将旧值保存到oldValue
  }
}

以上就是Vue中记录旧值的两种方式，可以根据具体的应用场景选择适合的方式来记录旧值。

在Vue中，可以使用computed属性、watch属性和ref属性来记录旧值。

1. computed属性：计算属性是Vue的一种特殊属性，用于根据其他数据的值进行计算，并返回计算结果。在计算属性中，可以利用闭包的特性来记录旧值。首先，定义一个计算属性，然后在计算属性中使用一个变量来保存旧值。每当计算属性的依赖值发生变化时，计算属性会重新计算，并且将新的值赋给变量，同时可以将旧值保存到另外一个变量中，以此记录旧值。

例如：

data() {
  return {
    value: 0,
    oldValue: 0
  }
},
computed: {
  newValue() {
    this.oldValue = this.value;
    return this.value * 2;
  }
},

2. watch属性：watch属性用于监听数据的变化，并在数据变化时执行相应的操作。通过在watch属性中定义一个回调函数，可以获取新值和旧值。在回调函数中，可以将新值赋给变量，并将旧值保存到另外一个变量中，以此记录旧值。

例如：

data() {
  return {
    value: 0,
    oldValue: 0
  }
},
watch: {
  value(newValue, oldValue) {
    this.oldValue = oldValue;
  }
},

3. ref属性：ref属性是Vue3中新增的一个API，用于创建一个响应式的引用。通过使用ref属性，可以将一个变量定义为一个响应式的引用，并使用.value访问其值。在修改变量的值之前，可以将其值保存到另外一个变量中，以此记录旧值。

例如：

import { ref } from 'vue';

const value = ref(0);
const oldValue = ref(0);

oldValue.value = value.value;
value.value = 2;

4. 使用computed属性和watch属性结合的方式：可以通过在watch中监听computed属性的变化，来间接地获取computed属性的旧值。

例如：

data() {
  return {
    value: 0,
    oldValue: 0
  }
},
computed: {
  newValue() {
    return this.value * 2;
  }
},
watch: {
  newValue(newValue, oldValue) {
    this.oldValue = oldValue;
  }
},

5. 使用生命周期钩子函数：在Vue的生命周期钩子函数中，可以通过将旧值保存到data中的一个变量中，以此记录旧值。

例如：

data() {
  return {
    value: 0,
    oldValue: 0
  }
},
mounted() {
  this.oldValue = this.value;
},

这样，每当组件被挂载时，旧值就会被记录下来，可以在需要的时候使用。

在Vue中，可以使用计算属性(computed)或侦听器(watcher)来记录旧值。

在计算属性中记录旧值：
计算属性通过监听依赖的数据变化，并返回一个计算结果。可以利用计算属性的缓存功能将旧值保存下来。

new Vue({
  data: {
    value: 0
  },
  computed: {
    oldValue() {
      return this.value;
    }
  },
  methods: {
    updateValue(newValue) {
      this.value = newValue;
    }
  }
})

在侦听器中记录旧值：
侦听器通过监听指定的数据变化，并在变化发生时执行相应的回调函数。

new Vue({
  data: {
    value: 0,
    oldValue: 0
  },
  watch: {
    value(newValue) {
      this.oldValue = newValue;
    }
  },
  methods: {
    updateValue(newValue) {
      this.value = newValue;
    }
  }
})

以上两种方式都可以根据实际需要选择，计算属性适用于需要依赖其他数据计算的场景，而侦听器适用于需要在特定数据变化时执行一些操作的场景。

此外，如果需要记录多个值的变动历史，可以使用数组或对象来保存历史值。