Skip to content

Commit

Permalink
refactor(directives): remove binding.instance
Browse files Browse the repository at this point in the history
BREAKING CHANGE: custom directive bindings no longer expose instance

    This is a rarely used property that creates extra complexity in
    ensuring it points to the correct instance. From a design
    perspective, a custom directive should be scoped to the element and
    data it is bound to and should not have access to the entire
    instance in the first place.
  • Loading branch information
yyx990803 committed Feb 26, 2020
1 parent 3eab143 commit 52cc7e8
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 27 deletions.
16 changes: 0 additions & 16 deletions packages/runtime-core/__tests__/directives.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import {
DirectiveBinding,
nextTick
} from '@vue/runtime-test'
import { currentInstance, ComponentInternalInstance } from '../src/component'

describe('directives', () => {
it('should work', async () => {
Expand All @@ -18,7 +17,6 @@ describe('directives', () => {
function assertBindings(binding: DirectiveBinding) {
expect(binding.value).toBe(count.value)
expect(binding.arg).toBe('foo')
expect(binding.instance).toBe(_instance && _instance.proxy)
expect(binding.modifiers && binding.modifiers.ok).toBe(true)
}

Expand Down Expand Up @@ -107,13 +105,9 @@ describe('directives', () => {
unmounted
}

let _instance: ComponentInternalInstance | null = null
let _vnode: VNode | null = null
let _prevVnode: VNode | null = null
const Comp = {
setup() {
_instance = currentInstance
},
render() {
_prevVnode = _vnode
_vnode = withDirectives(h('div', count.value), [
Expand Down Expand Up @@ -153,7 +147,6 @@ describe('directives', () => {
function assertBindings(binding: DirectiveBinding) {
expect(binding.value).toBe(count.value)
expect(binding.arg).toBe('foo')
expect(binding.instance).toBe(_instance && _instance.proxy)
expect(binding.modifiers && binding.modifiers.ok).toBe(true)
}

Expand All @@ -167,13 +160,9 @@ describe('directives', () => {
expect(prevVNode).toBe(_prevVnode)
}) as DirectiveHook)

let _instance: ComponentInternalInstance | null = null
let _vnode: VNode | null = null
let _prevVnode: VNode | null = null
const Comp = {
setup() {
_instance = currentInstance
},
render() {
_prevVnode = _vnode
_vnode = withDirectives(h('div', count.value), [
Expand Down Expand Up @@ -207,7 +196,6 @@ describe('directives', () => {
function assertBindings(binding: DirectiveBinding) {
expect(binding.value).toBe(count.value)
expect(binding.arg).toBe('foo')
expect(binding.instance).toBe(_instance && _instance.proxy)
expect(binding.modifiers && binding.modifiers.ok).toBe(true)
}

Expand Down Expand Up @@ -296,7 +284,6 @@ describe('directives', () => {
unmounted
}

let _instance: ComponentInternalInstance | null = null
let _vnode: VNode | null = null
let _prevVnode: VNode | null = null

Expand All @@ -307,9 +294,6 @@ describe('directives', () => {
}

const Comp = {
setup() {
_instance = currentInstance
},
render() {
return withDirectives(h(Child, { count: count.value }), [
[
Expand Down
13 changes: 2 additions & 11 deletions packages/runtime-core/src/directives.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,9 @@ import { VNode } from './vnode'
import { isFunction, EMPTY_OBJ, makeMap, EMPTY_ARR } from '@vue/shared'
import { warn } from './warning'
import { ComponentInternalInstance } from './component'
import { currentRenderingInstance } from './componentRenderUtils'
import { callWithAsyncErrorHandling, ErrorCodes } from './errorHandling'
import { ComponentPublicInstance } from './componentProxy'

export interface DirectiveBinding {
instance: ComponentPublicInstance | null
value: any
oldValue: any
arg?: string
Expand Down Expand Up @@ -108,14 +105,9 @@ export function withDirectives<T extends VNode>(
vnode: T,
directives: DirectiveArguments
): T {
const internalInstance = currentRenderingInstance
if (internalInstance === null) {
__DEV__ && warn(`withDirectives can only be used inside render functions.`)
return vnode
}
const instance = internalInstance.proxy
const props = vnode.props || (vnode.props = {})
const bindings = vnode.dirs || (vnode.dirs = new Array(directives.length))
const bindings: DirectiveBinding[] =
vnode.dirs || (vnode.dirs = new Array(directives.length))
const injected: Record<string, true> = {}
for (let i = 0; i < directives.length; i++) {
let [dir, value, arg, modifiers = EMPTY_OBJ] = directives[i]
Expand All @@ -127,7 +119,6 @@ export function withDirectives<T extends VNode>(
}
bindings[i] = {
dir,
instance,
value,
oldValue: void 0,
arg,
Expand Down

0 comments on commit 52cc7e8

Please sign in to comment.