凡科做网站,liunix下搭建wordpress,上海专业的网络推广,wordpress影视主题下载Observable 翻译过来我们可以理解成可观察的 Vue.js2.6 新增 Vue.observable#xff0c;让一个对象变成响应式数据。Vue 内部会用它来处理 data 函数返回的对象 。 返回的对象可以直接用于渲染函数和计算属性内#xff0c;并且会在发生变更时触发相应的更新。也可以作为最小化…Observable 翻译过来我们可以理解成可观察的 Vue.js2.6 新增 Vue.observable让一个对象变成响应式数据。Vue 内部会用它来处理 data 函数返回的对象 。 返回的对象可以直接用于渲染函数和计算属性内并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器
Vue.observable({ count : 1})
其作用等同于
new vue({ count : 1}) 在 Vue 2.x 中被传入的对象会直接被 Vue.observable 变更它和被返回的对象是同一个对象
在 Vue 3.x 中则会返回一个可响应的代理而对源对象直接进行变更仍然是不可响应的
Observable 是什么
Vue.observable 是 Vue.js 提供的一个 API它可以将一个普通的 JavaScript 对象转换为响应式对象。通过使用 Vue.observable可以在任何地方创建一个响应式对象而不仅仅是在 Vue 实例中使用。它在 Vue.js 的响应式系统中扮演了很重要的角色可以用于管理状态、状态共享等场景。
Observable 作用
使用 Vue.observable 可以将一个普通对象转换为响应式对象从而使其成为 Vue.js 的响应式系统的一部分。在转换之后可以对该对象进行读取、修改等操作并且在修改后Vue.js 会自动进行重新渲染。
解决了什么问题
Vue.observable 的出现解决了在 Vue.js 中管理状态的问题。在 Vue.js 中通过将状态保存在 Vue 实例的 data 属性中可以实现状态管理但是这种方式只能在 Vue 实例中使用无法在其他地方使用。通过使用 Vue.observable我们可以在任何地方创建一个响应式对象从而更加灵活地管理状态。
适用场景
在非父子组件通信时可以使用通常的bus或者使用vuex但是实现的功能不是太复杂而使用上面两个又有点繁琐。这时observable就是一个很好的选择。
举个例子
// utils.js 文件
import Vue from vue
// 创建响应式对象
export const state Vue.observable({count: 1
})export const mutations Vue.observable({increase() {state.count}
})// 在 vue 文件中使用
templatediv idappbutton clickincreaseCount/button{{ num }}/div
/templatescript
import { state, mutations } from /utils/index
export default {name: App,computed: {num() {return state.count}},methods: {increaseCount: mutations.increase}
}
/script原理分析
源码位置src\core\observer\index.js
export function observe (value: any, asRootData: ?boolean): Observer | void {if (!isObject(value) || value instanceof VNode) {return}let ob: Observer | void// 判断是否存在__ob__响应式属性if (hasOwn(value, __ob__) value.__ob__ instanceof Observer) {ob value.__ob__} else if (shouldObserve !isServerRendering() (Array.isArray(value) || isPlainObject(value)) Object.isExtensible(value) !value._isVue) {// 实例化Observer响应式对象ob new Observer(value)}if (asRootData ob) {ob.vmCount}return ob
}
Observer类
export class Observer {value: any;dep: Dep;vmCount: number; // number of vms that have this object as root $dataconstructor (value: any) {this.value valuethis.dep new Dep()this.vmCount 0def(value, __ob__, this)if (Array.isArray(value)) {if (hasProto) {protoAugment(value, arrayMethods)} else {copyAugment(value, arrayMethods, arrayKeys)}this.observeArray(value)} else {// 实例化对象是一个对象进入walk方法this.walk(value)}
}walk函数
walk (obj: Object) {const keys Object.keys(obj)// 遍历key通过defineReactive创建响应式对象for (let i 0; i keys.length; i) {defineReactive(obj, keys[i])}
}
defineReactive方法
export function defineReactive (obj: Object,key: string,val: any,customSetter?: ?Function,shallow?: boolean
) {const dep new Dep()const property Object.getOwnPropertyDescriptor(obj, key)if (property property.configurable false) {return}// cater for pre-defined getter/settersconst getter property property.getconst setter property property.setif ((!getter || setter) arguments.length 2) {val obj[key]}let childOb !shallow observe(val)// 接下来调用Object.defineProperty()给对象定义响应式属性Object.defineProperty(obj, key, {enumerable: true,configurable: true,get: function reactiveGetter () {const value getter ? getter.call(obj) : valif (Dep.target) {dep.depend()if (childOb) {childOb.dep.depend()if (Array.isArray(value)) {dependArray(value)}}}return value},set: function reactiveSetter (newVal) {const value getter ? getter.call(obj) : val/* eslint-disable no-self-compare */if (newVal value || (newVal ! newVal value ! value)) {return}/* eslint-enable no-self-compare */if (process.env.NODE_ENV ! production customSetter) {customSetter()}// #7981: for accessor properties without setterif (getter !setter) returnif (setter) {setter.call(obj, newVal)} else {val newVal}childOb !shallow observe(newVal)// 对观察者watchers进行通知,state就成了全局响应式对象dep.notify()}})
}
