vue中的computed 和 vm.$data 原理解析

当我们在使用Vue.js时，我们会经常接触到computed属性和vm.$data数据对象，其中computed属性是通过函数动态计算并返回值的，而vm.$data是Vue实例数据对象，保存了Vue实例中所有的数据。下面我们来详细讲解一下computed和vm.$data的原理解析。

computed属性的原理解析

Computed属性是Vue.js中的一个非常重要的属性，我们可以直接在Vue实例中定义一个computed属性，并在模板中使用该属性的值，从而实现基于特定数据计算而来的动态结果。Computed属性的原理解析如下：

1. 当一个computed属性被定义时，Vue会为该属性创建一个getter函数，并将该函数添加至Vue实例的computed对象中。

2. 当computed属性被使用时，getter函数会被调用，并根据当前的数据计算出一个值。

3. 当使用该computed属性的依赖数据发生变化时，该computed属性所依赖的数据就会被标记为无效状态，下一次获取computed属性值时，Vue会重新计算新的值。

下面是一个简单的computed示例：

<template>
  <div>
    <p>商品数量：{{ num }}</p>
    <p>商品总价：{{ totalPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 10,
      count: 2
    }
  },
  computed: {
    num() {
      return this.count;
    },
    totalPrice() {
      return this.count * this.price;
    }
  }
}
</script>

上面的代码中，我们定义了一个计算商品总价的computed属性totalPrice，并在模板中使用该属性的值。当修改商品数量时，该computed属性所依赖的数据会被标记为无效状态，Vue会重新计算新的值。

vm.$data数据对象的原理解析

Vue实例是通过将一个数据对象传入Vue构造函数创建的，这个数据对象被称为“数据代理对象”，包含了Vue实例中所有的数据。我们可以通过Vue实例中的vm.$data属性获取到这个数据对象，并操作它中的数据。vm.$data数据对象的原理解析如下：

1. 当Vue实例被创建时，Vue会将数据对象的所有属性转变为getter/setter，从而实现“数据代理”的功能。

2. 当在模板中使用数据时，getter函数被调用并返回该数据的值。

3. 当数据发生变化时，setter函数被调用并通知Vue重新渲染视图。

下面是一个简单的vm.$data示例：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">更新</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, World!'
    }
  },
  methods: {
    updateMessage() {
      this.$data.message = 'Hi, there!';
    }
  }
}
</script>

上面的代码中，我们在模板中使用了vm.$data.message属性，并通过updateMessage方法修改了该属性的值。当数据发生变化时，setter函数会被调用并通知Vue重新渲染视图。

综上所述，computed和vm.$data是Vue.js中非常重要的两个属性，它们都是实现Vue数据响应式的核心之一。在实际开发中，我们需要充分掌握它们的原理，并灵活应用到项目中。