refactor(directives): remove binding.instance
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.
This commit is contained in:
parent
3eab143843
commit
52cc7e8231
@ -9,7 +9,6 @@ import {
|
||||
DirectiveBinding,
|
||||
nextTick
|
||||
} from '@vue/runtime-test'
|
||||
import { currentInstance, ComponentInternalInstance } from '../src/component'
|
||||
|
||||
describe('directives', () => {
|
||||
it('should work', async () => {
|
||||
@ -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)
|
||||
}
|
||||
|
||||
@ -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), [
|
||||
@ -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)
|
||||
}
|
||||
|
||||
@ -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), [
|
||||
@ -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)
|
||||
}
|
||||
|
||||
@ -296,7 +284,6 @@ describe('directives', () => {
|
||||
unmounted
|
||||
}
|
||||
|
||||
let _instance: ComponentInternalInstance | null = null
|
||||
let _vnode: VNode | null = null
|
||||
let _prevVnode: VNode | null = null
|
||||
|
||||
@ -307,9 +294,6 @@ describe('directives', () => {
|
||||
}
|
||||
|
||||
const Comp = {
|
||||
setup() {
|
||||
_instance = currentInstance
|
||||
},
|
||||
render() {
|
||||
return withDirectives(h(Child, { count: count.value }), [
|
||||
[
|
||||
|
||||
@ -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
|
||||
@ -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]
|
||||
@ -127,7 +119,6 @@ export function withDirectives<T extends VNode>(
|
||||
}
|
||||
bindings[i] = {
|
||||
dir,
|
||||
instance,
|
||||
value,
|
||||
oldValue: void 0,
|
||||
arg,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user