Navigation Menu

Skip to content

Commit

Permalink
fix: remove deprecated lifecycle hooks
Browse files Browse the repository at this point in the history
- rename `onBeforeDestroy` to `onBeforeUnmount`
- remove `onCreated`
- remove `onDestroyed`
  • Loading branch information
liximomo committed Aug 25, 2019
1 parent ae44409 commit 9d8855a
Show file tree
Hide file tree
Showing 4 changed files with 24 additions and 81 deletions.
12 changes: 5 additions & 7 deletions src/apis/lifecycle.ts
Expand Up @@ -27,16 +27,14 @@ function injectHookOption(Vue: VueConstructor, vm: ComponentInstance, hook: stri
options[hook] = mergeFn(options[hook], val); options[hook] = mergeFn(options[hook], val);
} }


export const onCreated = createLifeCycle('created'); // export const onCreated = createLifeCycle('created');
export const onBeforeMount = createLifeCycle('beforeMount'); export const onBeforeMount = createLifeCycle('beforeMount');
export const onMounted = createLifeCycle('mounted'); export const onMounted = createLifeCycle('mounted');
export const onBeforeUpdate = createLifeCycle('beforeUpdate'); export const onBeforeUpdate = createLifeCycle('beforeUpdate');
export const onUpdated = createLifeCycle('updated'); export const onUpdated = createLifeCycle('updated');
export const onActivated = createLifeCycle('activated'); export const onBeforeUnmount = createLifeCycle('beforeDestroy');
export const onDeactivated = createLifeCycle('deactivated');
export const onBeforeDestroy = createLifeCycle('beforeDestroy');
export const onDestroyed = createLifeCycle('destroyed');
export const onErrorCaptured = createLifeCycle('errorCaptured');

// only one event will be fired between destroyed and deactivated when an unmount occurs // only one event will be fired between destroyed and deactivated when an unmount occurs
export const onUnmounted = createLifeCycles(['destroyed', 'deactivated'], genName('unmounted')); export const onUnmounted = createLifeCycles(['destroyed', 'deactivated'], genName('unmounted'));
export const onErrorCaptured = createLifeCycle('errorCaptured');
export const onActivated = createLifeCycle('activated');
export const onDeactivated = createLifeCycle('deactivated');
12 changes: 4 additions & 8 deletions src/setup.ts
Expand Up @@ -2,7 +2,7 @@ import { VueConstructor } from 'vue';
import { ComponentInstance, SetupContext, SetupFunction, Data } from './component'; import { ComponentInstance, SetupContext, SetupFunction, Data } from './component';
import { Ref, isRef, isReactive, nonReactive } from './reactivity'; import { Ref, isRef, isReactive, nonReactive } from './reactivity';
import { getCurrentVM, setCurrentVM } from './runtimeContext'; import { getCurrentVM, setCurrentVM } from './runtimeContext';
import { hasOwn, isPlainObject, assert, proxy, warn, logError, isFunction } from './utils'; import { hasOwn, isPlainObject, assert, proxy, warn, isFunction } from './utils';
import { ref } from './apis/state'; import { ref } from './apis/state';
import vmStateManager from './vmStateManager'; import vmStateManager from './vmStateManager';


Expand Down Expand Up @@ -135,13 +135,9 @@ export function mixin(Vue: VueConstructor) {
const setup = vm.$options.setup!; const setup = vm.$options.setup!;
const ctx = createSetupContext(vm); const ctx = createSetupContext(vm);
let binding: ReturnType<SetupFunction<Data, Data>> | undefined | null; let binding: ReturnType<SetupFunction<Data, Data>> | undefined | null;
activateCurrentInstance( activateCurrentInstance(vm, () => {
vm, binding = setup(props, ctx);
() => { });
binding = setup(props, ctx);
},
err => logError(err, vm, 'setup()')
);


if (!binding) return; if (!binding) return;


Expand Down
75 changes: 12 additions & 63 deletions test/apis/lifecycle.spec.js
@@ -1,64 +1,15 @@
const Vue = require('vue/dist/vue.common.js'); const Vue = require('vue/dist/vue.common.js');
const { const {
onCreated,
onBeforeMount, onBeforeMount,
onMounted, onMounted,
onBeforeUpdate, onBeforeUpdate,
onUpdated, onUpdated,
onBeforeDestroy, onBeforeUnmount,
onDestroyed, onUnmounted,
onErrorCaptured, onErrorCaptured,
} = require('../../src'); } = require('../../src');


describe('Hooks lifecycle', () => { describe('Hooks lifecycle', () => {
describe('created', () => {
it('work with created option', () => {
const spy = jest.fn();
new Vue({
created() {
spy('option');
},
setup() {
onCreated(() => spy('hook'));
},
});
expect(spy.mock.calls.length).toBe(2);
expect(spy).toHaveBeenNthCalledWith(1, 'option');
expect(spy).toHaveBeenNthCalledWith(2, 'hook');
});

it('can register multiple callbacks', () => {
const spy = jest.fn();
new Vue({
setup() {
onCreated(() => spy('first'));
onCreated(() => spy('second'));
},
});
expect(spy.mock.calls.length).toBe(2);
expect(spy).toHaveBeenNthCalledWith(1, 'first');
expect(spy).toHaveBeenNthCalledWith(2, 'second');
});

it('should have completed observation', () => {
const spy = jest.fn();
new Vue({
data() {
return {
a: 1,
};
},
setup(_, { _vm }) {
onCreated(() => {
expect(_vm.a).toBe(1);
spy();
});
},
});
expect(spy).toHaveBeenCalled();
});
});

describe('beforeMount', () => { describe('beforeMount', () => {
it('should not have mounted', () => { it('should not have mounted', () => {
const spy = jest.fn(); const spy = jest.fn();
Expand Down Expand Up @@ -198,7 +149,7 @@ describe('Hooks lifecycle', () => {
props: ['todo'], props: ['todo'],
setup() { setup() {
onBeforeUpdate(beforeUpdate); onBeforeUpdate(beforeUpdate);
onDestroyed(destroyed); onUnmounted(destroyed);
}, },
}); });


Expand Down Expand Up @@ -290,7 +241,7 @@ describe('Hooks lifecycle', () => {
props: ['todo'], props: ['todo'],
setup() { setup() {
onUpdated(updated); onUpdated(updated);
onDestroyed(destroyed); onUnmounted(destroyed);
}, },
}); });


Expand Down Expand Up @@ -320,13 +271,13 @@ describe('Hooks lifecycle', () => {
}); });
}); });


describe('beforeDestroy', () => { describe('beforeUnmount', () => {
it('should be called before destroy', () => { it('should be called before destroy', () => {
const spy = jest.fn(); const spy = jest.fn();
const vm = new Vue({ const vm = new Vue({
render() {}, render() {},
setup(_, { _vm }) { setup(_, { _vm }) {
onBeforeDestroy(() => { onBeforeUnmount(() => {
expect(_vm._isBeingDestroyed).toBe(false); expect(_vm._isBeingDestroyed).toBe(false);
expect(_vm._isDestroyed).toBe(false); expect(_vm._isDestroyed).toBe(false);
spy(); spy();
Expand All @@ -341,13 +292,13 @@ describe('Hooks lifecycle', () => {
}); });
}); });


describe('destroyed', () => { describe('unmounted', () => {
it('should be called after destroy', () => { it('should be called after destroy', () => {
const spy = jest.fn(); const spy = jest.fn();
const vm = new Vue({ const vm = new Vue({
render() {}, render() {},
setup(_, { _vm }) { setup(_, { _vm }) {
onDestroyed(() => { onUnmounted(() => {
expect(_vm._isBeingDestroyed).toBe(true); expect(_vm._isBeingDestroyed).toBe(true);
expect(_vm._isDestroyed).toBe(true); expect(_vm._isDestroyed).toBe(true);
spy(); spy();
Expand Down Expand Up @@ -381,10 +332,8 @@ describe('Hooks lifecycle', () => {
const Child = { const Child = {
setup(_, { _vm }) { setup(_, { _vm }) {
child = _vm; child = _vm;
onCreated(() => { err = new Error('child');
err = new Error('child'); throw err;
throw err;
});
}, },
render() {}, render() {},
}; };
Expand All @@ -396,9 +345,9 @@ describe('Hooks lifecycle', () => {
render: h => h(Child), render: h => h(Child),
}).$mount(); }).$mount();


expect(spy).toHaveBeenCalledWith(err, child, 'created hook'); expect(spy).toHaveBeenCalledWith(err, child, 'data()');
// should propagate by default // should propagate by default
expect(globalSpy).toHaveBeenCalledWith(err, child, 'created hook'); expect(globalSpy).toHaveBeenCalledWith(err, child, 'data()');
}); });
}); });
}); });
6 changes: 3 additions & 3 deletions test/setup.spec.js
@@ -1,5 +1,5 @@
const Vue = require('vue/dist/vue.common.js'); const Vue = require('vue/dist/vue.common.js');
const { ref, computed, onCreated, createElement: h } = require('../src'); const { ref, computed, createElement: h } = require('../src');


describe('setup', () => { describe('setup', () => {
beforeEach(() => { beforeEach(() => {
Expand Down Expand Up @@ -301,11 +301,11 @@ describe('setup', () => {
setup() { setup() {
new Vue({ new Vue({
setup() { setup() {
onCreated(() => spy(1)); spy(1);
}, },
}); });


onCreated(() => spy(2)); spy(2);
}, },
}); });
expect(spy.mock.calls.length).toBe(2); expect(spy.mock.calls.length).toBe(2);
Expand Down

0 comments on commit 9d8855a

Please sign in to comment.