Vue.observable函数详解及如何使用它创建响应式数据

Vue.observable函数详解及如何使用它创建响应式数据

1.什么是Vue.observable函数

Vue 2.6 中新增了一个API函数Vue.observable，它可以将一个普通的Javascript对象转换成响应式的对象。

const data = { count: 0 }
const observableData = Vue.observable(data)
// 获取observableData中的数据
console.log(observableData.count)
// 修改observableData中的数据
observableData.count++

上述代码中，我们使用Vue.observable将一个普通对象转换成响应式对象，并将其赋值给observableData。接着我们可以通过observableData来获取对象中的数据，也可以直接修改对象中的数据。由于这个对象是响应式的，所以无论我们通过什么方式修改其中的数据，视图都会自动更新。

2.如何使用Vue.observable函数创建响应式数据

2.1 在组件中使用Vue.observable

我们可以在组件中使用Vue.observable来创建响应式数据。

<template>
  <div>
    <p>{{count}}</p>
    <button @click="increment">+</button>
  </div>
</template>
<script>
export default {
  data() {
    const data = {
      count: 0
    }
    const observables = Vue.observable(data)
    return observables
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

上述代码中，我们在组件的data函数中使用Vue.observable将一个普通的Javascript对象转换为响应式数据。由于observables是响应式数据，所以它可以直接在组件中进行使用。

2.2 创建独立的响应式数据对象

除了在组件中使用Vue.observable来创建响应式数据对象，我们还可以创建一个独立的响应式数据对象，将其用于多个组件中。

const state = Vue.observable({
  count: 0
})
const Counter1 = {
  template: `
    <div>
      <p>{{count}}</p>
      <button @click="increment">+</button>
    </div>
  `,
  computed: {
    count() {
      return state.count
    }
  },
  methods: {
    increment() {
      state.count++
    }
  }
}
const Counter2 = {
  template: `
    <div>
      <p>{{count}}</p>
      <button @click="increment">+</button>
    </div>
  `,
  computed: {
    count() {
      return state.count
    }
  },
  methods: {
    increment() {
      state.count++
    }
  }
}

上述代码中，我们首先创建了一个独立的响应式数据state，它包含一个count属性。接着我们创建了两个Vue组件Counter1和Counter2，它们都使用state中的count属性作为计数器的值。

3.在Vue.observable中使用嵌套对象

在Vue.observable中使用嵌套对象时，我们需要将其也转换成响应式数据。以下是一个例子。

const data = Vue.observable({
  counter: {
    count: 0
  }
})
const Counter = {
  template: `
    <div>
      <p>{{count}}</p>
      <button @click="increment">+</button>
    </div>
  `,
  computed: {
    count() {
      return data.counter.count
    }
  },
  methods: {
    increment() {
      data.counter.count++
    }
  }
}

在上述代码中，我们把Vue.observable应用于一个具有嵌套对象的对象。因此，counter对象及其属性count都是响应式的。在Counter组件中，我们通过compouted属性和methods属性来获取和修改counter对象中的属性count的值。

4.不能将Vue.observable应用于已经是响应式的对象

不能将已经是响应式对象的对象再次应用Vue.observable函数进行响应式转换。因此，在应用Vue.observable函数之前，需要先确保对象不是响应式的。

const data = Vue.observable({
  counter: {
    count: 0
  }
})
const observables = Vue.observable(data) // 这样是错误的，data已经是响应式的对象了

5.总结

Vue.observable函数可以将一个普通的Javascript对象转换成响应式的对象，从而让我们可以使用Vue的响应式系统对其进行更好的控制。在组件中使用Vue.observable可以很容易地创建响应式数据。同时，我们还可以将一个独立的响应式数据对象用于多个组件中。在使用嵌套对象时需要注意将其也转换成响应式数据。最后，需要注意不能将已经是响应式对象的对象再次应用Vue.observable函数进行响应式转换。