前言

本系列主要整理前端面试中需要掌握的知识点。本节介绍对Vue.observable的了解。

---

一、Observable是什么

• 定义：让一个对象变成响应式数据，Vue内部会用它来处理data函数返回的对象。
• 返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器。
• Vue.observable({count:1})其作用等同于new Vue({count:1})。
• 在Vue2中，被传入的对象会直接被Vue.observable变更，它和被返回的对象是同一个对象；Vue3中，会返回一个可响应的代理，而对源对象直接进行变更仍然是不可响应的。

二、使用场景

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

• 创建一个js文件

import Vue from 'vue'

export let state = Vue.observable({
    name: '张三',
    age:38,
})

export let mutations = {
    changeName(name) {
        state.name = name
        console.log(state.name)
    },
    setAge(age) {
        state.age = age
        console.log(state.age)
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

• 在.vue文件中使用

<template>
  <div>
    {{name}},{{age}}
    <button @click="changeName('李四')">changeName</button>
    <button @click="setAge(18)">setAge</button>
  </div>
</template>

<script>
import {state,mutations} from './test.js'
export default {
    computed:{
        name(){
            return state.name
        },
        age() { 
            return state.age
        }
    },
    methods: {
        changeName: mutations.changeName,
        setAge:mutations.setAge,
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

三、面试官：介绍一下Observable

回答：Observable可以定义一些数据，并使其变成响应式数据。如果在js中写observable，这里面的数据vue文件中可以直接使用。