theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: remove experimental hooks

Browse Source
This commit is contained in:
Evan You 2019-02-26 18:10:08 -05:00
parent 77dae71062
commit 2f165c1e87
8 changed files with 3 additions and 362 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
packages/runtime-core/__tests__/hooks.spec.ts
View File

@ -1,111 +0,0 @@
import { useState, h, nextTick, useEffect, Component } from '../src'
import { renderInstance, serialize, triggerEvent } from '@vue/runtime-test'
describe('hooks', () => {
it('useState', async () => {
class Counter extends Component {
render() {
const [count, setCount] = useState(0)
return h(
'div',
{
onClick: () => {
setCount(count + 1)
}
},
count
)
}
}
const counter = await renderInstance(Counter)
expect(serialize(counter.$el)).toBe(`<div>0</div>`)
triggerEvent(counter.$el, 'click')
await nextTick()
expect(serialize(counter.$el)).toBe(`<div>1</div>`)
})
it('should be usable via hooks() method', async () => {
class Counter extends Component {
hooks() {
const [count, setCount] = useState(0)
return {
count,
setCount
}
}
render() {
const { count, setCount } = this as any
return h(
'div',
{
onClick: () => {
setCount(count + 1)
}
},
count
)
}
}
const counter = await renderInstance(Counter)
expect(serialize(counter.$el)).toBe(`<div>0</div>`)
triggerEvent(counter.$el, 'click')
await nextTick()
expect(serialize(counter.$el)).toBe(`<div>1</div>`)
})
it('useEffect', async () => {
let effect = -1
class Counter extends Component {
render() {
const [count, setCount] = useState(0)
useEffect(() => {
effect = count
})
return h(
'div',
{
onClick: () => {
setCount(count + 1)
}
},
count
)
}
}
const counter = await renderInstance(Counter)
expect(effect).toBe(0)
triggerEvent(counter.$el, 'click')
await nextTick()
expect(effect).toBe(1)
})
it('useEffect with empty keys', async () => {
// TODO
})
it('useEffect with keys', async () => {
// TODO
})
it('useData', () => {
// TODO
})
it('useMounted/useUnmounted/useUpdated', () => {
// TODO
})
it('useWatch', () => {
// TODO
})
it('useComputed', () => {
// TODO
})
})

2
packages/runtime-core/src/component.ts
View File

@ -45,7 +45,6 @@ interface PublicInstanceMethods {
export interface APIMethods<P = {}, D = {}> {
data(): Partial<D>
hooks(): any
render(props: Readonly<P>, slots: Slots, attrs: Data, parentVNode: VNode): any
}
@ -136,7 +135,6 @@ class InternalComponent implements PublicInstanceMethods {
_queueJob: ((fn: () => void) => void) | null = null
_isVue: boolean = true
_inactiveRoot: boolean = false
_hookProps: any = null
constructor(props?: object) {
if (props === void 0) {

1
packages/runtime-core/src/componentOptions.ts
View File

@ -90,7 +90,6 @@ type ReservedKeys = { [K in keyof (APIMethods & LifecycleMethods)]: 1 }
export const reservedMethods: ReservedKeys = {
data: 1,
render: 1,
hooks: 1,
beforeCreate: 1,
created: 1,
beforeMount: 1,

16
packages/runtime-core/src/componentProxy.ts
View File

@ -1,9 +1,8 @@
import { ComponentInstance } from './component'
import { isFunction, isReservedKey } from '@vue/shared'
import { warn } from './warning'
import { isRendering } from './componentRenderUtils'
import { isObservable } from '@vue/observer'
import { reservedMethods } from './componentOptions'
import { warn } from './warning'
const bindCache = new WeakMap()
@ -37,9 +36,6 @@ const renderProxyHandlers = {
) {
// computed
return i[key]()
} else if ((i = target._hookProps) !== null && i.hasOwnProperty(key)) {
// hooks injections
return i[key]
} else if (key[0] !== '_') {
if (
__DEV__ &&
@ -81,16 +77,6 @@ const renderProxyHandlers = {
if ((i = target._rawData) !== null && i.hasOwnProperty(key)) {
target.$data[key] = value
return true
} else if ((i = target._hookProps) !== null && i.hasOwnProperty(key)) {
if (__DEV__ && !isObservable(i)) {
warn(
`attempting to mutate a property returned from hooks(), but the ` +
`value is not observable.`
)
}
// this enables returning observable objects from hooks()
i[key] = value
return true
} else {
return Reflect.set(target, key, value, receiver)
}

16
packages/runtime-core/src/componentRenderUtils.ts
View File

@ -4,26 +4,13 @@ import { resolveProps } from './componentProps'
import { handleError, ErrorTypes } from './errorHandling'
import { VNodeFlags, ChildrenFlags } from './flags'
import { EMPTY_OBJ, isArray, isObject } from '@vue/shared'
import { setCurrentInstance, unsetCurrentInstance } from './experimental/hooks'
export let isRendering = false
export function renderInstanceRoot(instance: ComponentInstance): VNode {
let vnode
const {
$options: { hooks },
render,
$proxy,
$props,
$slots,
$attrs,
$parentVNode
} = instance
const { render, $proxy, $props, $slots, $attrs, $parentVNode } = instance
try {
setCurrentInstance(instance)
if (hooks) {
instance._hookProps = hooks.call($proxy, $props) || null
}
if (__DEV__) {
isRendering = true
}
@ -31,7 +18,6 @@ export function renderInstanceRoot(instance: ComponentInstance): VNode {
if (__DEV__) {
isRendering = false
}
unsetCurrentInstance()
} catch (err) {
handleError(err, instance, ErrorTypes.RENDER)
}

5
packages/runtime-core/src/createRenderer.ts
View File

@ -1258,7 +1258,7 @@ export function createRenderer(options: RendererOptions) {
const {
$proxy,
$options: { beforeMount, renderTracked, renderTriggered }
$options: { beforeMount, mounted, renderTracked, renderTriggered }
} = instance
instance.$forceUpdate = () => {
@ -1318,9 +1318,6 @@ export function createRenderer(options: RendererOptions) {
if (vnode.ref) {
vnode.ref($proxy)
}
// retrieve mounted value after initial render so that we get
// to inject effects in hooks
const { mounted } = instance.$options
if (mounted) {
callLifecycleHookWithHandler(mounted, $proxy, ErrorTypes.MOUNTED)
}

201
packages/runtime-core/src/experimental/hooks.ts
View File

@ -1,201 +0,0 @@
import { ComponentInstance } from '../component'
import { mergeLifecycleHooks, WatchOptions } from '../componentOptions'
import { observable, computed } from '@vue/observer'
import { setupWatcher } from '../componentWatch'
type RawEffect = () => (() => void) | void
type Effect = RawEffect & {
current?: RawEffect | null | void
}
type EffectRecord = {
effect: Effect
cleanup: Effect
deps: any[] | void
}
type Ref<T> = { current: T }
type HookState = {
state: any
effects: Record<number, EffectRecord>
refs: Record<number, Ref<any>>
}
let currentInstance: ComponentInstance | null = null
let isMounting: boolean = false
let callIndex: number = 0
const hooksStateMap = new WeakMap<ComponentInstance, HookState>()
export function setCurrentInstance(instance: ComponentInstance) {
currentInstance = instance
isMounting = !currentInstance._mounted
callIndex = 0
}
export function unsetCurrentInstance() {
currentInstance = null
}
function ensureCurrentInstance() {
if (!currentInstance) {
throw new Error(
`invalid hooks call` +
(__DEV__
? `. Hooks can only be called in one of the following: ` +
`render(), hooks(), or withHooks().`
: ``)
)
}
}
function getCurrentHookState(): HookState {
ensureCurrentInstance()
let hookState = hooksStateMap.get(currentInstance as ComponentInstance)
if (!hookState) {
hookState = {
state: observable({}),
effects: {},
refs: {}
}
hooksStateMap.set(currentInstance as ComponentInstance, hookState)
}
return hookState
}
// React compatible hooks ------------------------------------------------------
export function useState<T>(initial: T): [T, (newValue: T) => void] {
const id = ++callIndex
const { state } = getCurrentHookState()
const set = (newValue: any) => {
state[id] = newValue
}
if (isMounting) {
set(initial)
}
return [state[id], set]
}
export function useEffect(rawEffect: Effect, deps?: any[]) {
const id = ++callIndex
if (isMounting) {
const cleanup: Effect = () => {
const { current } = cleanup
if (current) {
current()
cleanup.current = null
}
}
const effect: Effect = () => {
const { current } = effect
if (current) {
cleanup.current = current()
effect.current = null
}
}
effect.current = rawEffect
getCurrentHookState().effects[id] = {
effect,
cleanup,
deps
}
injectEffect(currentInstance as ComponentInstance, 'mounted', effect)
injectEffect(currentInstance as ComponentInstance, 'unmounted', cleanup)
if (!deps || deps.length !== 0) {
injectEffect(currentInstance as ComponentInstance, 'updated', effect)
}
} else {
const record = getCurrentHookState().effects[id]
const { effect, cleanup, deps: prevDeps = [] } = record
record.deps = deps
if (!deps || hasDepsChanged(deps, prevDeps)) {
cleanup()
effect.current = rawEffect
}
}
}
function hasDepsChanged(deps: any[], prevDeps: any[]): boolean {
if (deps.length !== prevDeps.length) {
return true
}
for (let i = 0; i < deps.length; i++) {
if (deps[i] !== prevDeps[i]) {
return true
}
}
return false
}
function injectEffect(
instance: ComponentInstance,
key: string,
effect: Effect
) {
const existing = instance.$options[key]
;(instance.$options as any)[key] = existing
? mergeLifecycleHooks(existing, effect)
: effect
}
export function useRef<T>(initial?: T): Ref<T> {
const id = ++callIndex
const { refs } = getCurrentHookState()
return isMounting ? (refs[id] = { current: initial }) : refs[id]
}
// Vue API hooks ---------------------------------------------------------------
export function useData<T>(initial: T): T {
const id = ++callIndex
const { state } = getCurrentHookState()
if (isMounting) {
state[id] = initial
}
return state[id]
}
export function useMounted(fn: () => void) {
useEffect(fn, [])
}
export function useUnmounted(fn: () => void) {
useEffect(() => fn, [])
}
export function useUpdated(fn: () => void, deps?: any[]) {
const isMount = useRef(true)
useEffect(() => {
if (isMount.current) {
isMount.current = false
} else {
return fn()
}
}, deps)
}
export function useWatch<T>(
getter: () => T,
cb: (val: T, oldVal: T) => void,
options?: WatchOptions
) {
ensureCurrentInstance()
if (isMounting) {
setupWatcher(currentInstance as ComponentInstance, getter, cb, options)
}
}
export function useComputed<T>(getter: () => T): T {
ensureCurrentInstance()
const id = `__hooksComputed${++callIndex}`
const instance = currentInstance as ComponentInstance
const handles = instance._computedGetters || (instance._computedGetters = {})
if (isMounting) {
handles[id] = computed(getter)
}
return handles[id]()
}

13
packages/runtime-core/src/index.ts
View File

@ -32,19 +32,6 @@ export { mixins } from './optional/mixins'
export { EventEmitter } from './optional/eventEmitter'
export { memoize } from './optional/memoize'
// Experimental APIs
export {
useState,
useEffect,
useRef,
useData,
useWatch,
useComputed,
useMounted,
useUnmounted,
useUpdated
} from './experimental/hooks'
// flags & types
export { ComponentType, ComponentClass, FunctionalComponent } from './component'
export { VNodeFlags, ChildrenFlags } from './flags'