【前端知识之Vue】对Vue.observable的了解

前言

本系列主要整理前端面试中需要掌握的知识点。本节介绍对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,
}