vue2的Vue.observable

vue2的Vue.observable

在Vue.js 2中，Vue.observable 是一个用于创建可观察对象的方法。可观察对象是一个能够让你监听其变化并触发相应操作的对象。

以下是一个使用 Vue.observable 的示例：

import Vue from 'vue';

// 创建一个可观察对象
const data = Vue.observable({
  message: 'Hello, Vue!'
});

// 在组件中使用可观察对象的属性
const app = new Vue({
  data: {
    sharedData: data
  },
  created() {
    console.log(this.sharedData.message); // 输出: "Hello, Vue!"
  }
});

// 修改可观察对象的属性
data.message = 'Hello, Vue 2!';

// 组件中的属性也会自动更新
console.log(app.sharedData.message); // 输出: "Hello, Vue 2!"

在上面的示例中，我们使用 Vue.observable 方法创建了一个名为 data 的可观察对象，其中包含一个属性 message。然后，我们创建了一个Vue实例 app，将 data 对象赋值给 sharedData 属性。在Vue实例的 created 钩子函数中，我们打印了 sharedData.message 的值。

当我们修改 data.message 的值时，app.sharedData.message 的值也会自动更新，因为它们引用同一个可观察对象。

这就是在Vue.js 2中使用 Vue.observable 的基本用法。它使我们能够创建共享的可观察对象，使数据在不同组件之间保持同步，并在数据变化时触发相应的更新。

使用场景

在非父子组件通信时，可以使用通常的bus或者使用vuex，但是实现的功能不是太复杂，而使用上面两个又有点繁琐。这时，observable就是一个很好的选择

创建一个js文件

// 引入vue
import Vue from 'vue
// 创建state对象，使用observable让state对象可响应
export let state = Vue.observable({
  name: '张三',
  'age': 38
})
// 创建对应的方法
export let mutations = {
  changeName(name) {
    state.name = name
  },
  setAge(age) {
    state.age = age
  }
}

在.vue文件中直接使用即可

<template>
  <div>
    姓名：{
   
   { name }}
    年龄：{
   
   { age }}
    <button @click="changeName('李四')">改变姓名</button>
    <button @click="setAge(18)">改变年龄</button>
  </div>
</template>
import { state, mutations } from '@/store
export default {
  // 在计算属性中拿到值
  computed: {
    name() {
      return state.name
    },
    age() {
      return state.age
    }
  },
  // 调用mutations里面的方法，更新数据
  methods: {
    changeName: mutations.changeName,
    setAge: mutations.setAge
  }
}