vue ref和computed的联系和区别

Vue中的`ref`和`computed`都是用于处理组件中的数据的工具，但它们的作用和用法有所不同。

1. `ref`：

`ref`是用于获取组件或者DOM元素的引用。可以通过`this.$refs`来访问`ref`获取到的组件或者DOM元素，从而操作组件或者DOM元素的属性和方法。

示例：

<template>
  <div>
    <!-- 使用 ref 获取 input 元素 -->
    <input type="text" ref="inputRef" />

    <button @click="handleClick">获取 input 值</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 通过 this.$refs.inputRef 获取 input 元素
      console.log(this.$refs.inputRef.value);
    }
  }
};
</script>

2. `computed`：

`computed`是用于处理组件中的计算属性的工具。计算属性指的是根据其他数据计算得来的属性值，可以通过`computed`来计算这些属性值，并将计算结果缓存起来，只有依赖的数据发生变化时，才重新计算。

示例：

<template>
  <div>
    <p>商品价格：{{ price }}</p>
    <p>折扣价：{{ discountPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 100,
      discount: 0.8
    };
  },
  computed: {
    discountPrice() {
      // 计算折扣价
      return this.price * this.discount;
    }
  }
};
</script>

`computed`的计算结果是响应式的，当依赖的数据发生变化时，`computed`会重新计算，并更新视图。

区别：

- `ref`用于获取组件或者DOM元素的引用，`computed`用于处理计算属性；
- `ref`获取到的组件或者DOM元素是对象或者元素，而`computed`计算得到的是一个值；
- `ref`可以在组件的任何方法中使用，而`computed`只能在组件的计算属性中使用。