Permalink
Browse files

feat: add Vue.observable() for explicitly creating observable objects

  • Loading branch information...
yyx990803 committed Jan 10, 2019
1 parent ce7ca7b commit c50bbde41c4a1868a8a0b33df3238346840bd37c
Showing with 37 additions and 0 deletions.
  1. +7 −0 src/core/global-api/index.js
  2. +30 −0 test/unit/features/global-api/observable.spec.js
@@ -8,6 +8,7 @@ import { initAssetRegisters } from './assets'
import { set, del } from '../observer/index'
import { ASSET_TYPES } from 'shared/constants'
import builtInComponents from '../components/index'
import { observe } from 'core/observer/index'

import {
warn,
@@ -44,6 +45,12 @@ export function initGlobalAPI (Vue: GlobalAPI) {
Vue.delete = del
Vue.nextTick = nextTick

// 2.6 explicit observable API
Vue.observable = (obj: any): any => {
observe(obj)
return obj
}

Vue.options = Object.create(null)
ASSET_TYPES.forEach(type => {
Vue.options[type + 's'] = Object.create(null)
@@ -0,0 +1,30 @@
import Vue from 'vue'

describe('Global API: observable', () => {
it('should work', done => {
const state = Vue.observable({
count: 0
})

const app = new Vue({
render(h) {
return h('div', [
h('span', state.count),
h('button', {
on: {
click: () => {
state.count++
}
}
}, '+')
])
}
}).$mount()

expect(app.$el.querySelector('span').textContent).toBe('0')
app.$el.querySelector('button').click()
waitForUpdate(() => {
expect(app.$el.querySelector('span').textContent).toBe('1')
}).then(done)
})
})

2 comments on commit c50bbde

@oceangravity

This comment has been minimized.

Copy link

oceangravity replied Jan 16, 2019

+1

@syntacticsolutions

This comment has been minimized.

Copy link

syntacticsolutions replied Jan 22, 2019

nice

Please sign in to comment.