Vue.observable让一个对象变成响应式数据

Vue.observable，让一个对象变成响应式数据。Vue内部会用它来处理data函数返回的对象

返回的对象可以直接用于渲染函数和计算属性内部，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器

使用场景

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

创建一个js文件

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

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

<template>
  <div>
    <p>姓名：{{ name }}</p>
    <p>年龄：{{ age }}</p>
    <button @click="changeName">改变姓名</button>
    <button @click="setAge">改变年龄</button>
  </div>
</template>

<script>
import { state, mutations } from '@/observable'
export default {
  // 在计算属性中拿到值
  computed: {
    name() {
      return state.name
    },
    age() {
      return state.age
    }
  },
  // 调用mutations里面的方法，更新数据
  methods: {
    changeName() {
      mutations.changeName('李四')
      console.log(state);
    },
    setAge() {
      mutations.setAge(18)
      console.log(state);
    }
  }
}
</script>