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

refactor: remove implicit reactive() call on renderContext

Browse Source 
reference: https://github.com/vuejs/rfcs/issues/121

BREAKING CHANGE: object returned from `setup()` are no longer implicitly
passed to `reactive()`.

  The renderContext is the object returned by `setup()` (or a new object
  if no setup() is present). Before this change, it was implicitly passed
  to `reactive()` for ref unwrapping. But this has the side effect of
  unnecessary deep reactive conversion on properties that should not be
  made reactive (e.g. computed return values and injected non-reactive
  objects), and can lead to performance issues.

  This change removes the `reactive()` call and instead performs a
  shallow ref unwrapping at the render proxy level. The breaking part is
  when the user returns an object with a plain property from `setup()`,
  e.g. `return { count: 0 }`, this property will no longer trigger
  updates when mutated by a in-template event handler. Instead, explicit
  refs are required.

  This also means that any objects not explicitly made reactive in
  `setup()` will remain non-reactive. This can be desirable when
  exposing heavy external stateful objects on `this`.
This commit is contained in:
Evan You
2020-01-27 15:15:22 -05:00
parent 763faac182
commit 6b10f0cd1d
3 changed files with 25 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,7 +8,7 @@ import {
ComputedOptions,
MethodOptions
} from './apiOptions'
import { UnwrapRef, ReactiveEffect } from '@vue/reactivity'
import { UnwrapRef, ReactiveEffect, isRef, toRaw } from '@vue/reactivity'
import { warn } from './warning'
import { Slots } from './componentSlots'
import {
@@ -73,6 +73,8 @@ const enum AccessTypes {
OTHER
}
const unwrapRef = (val: unknown) => (isRef(val) ? val.value : val)
export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
get(target: ComponentInternalInstance, key: string) {
// fast path for unscopables when using `with` block
@@ -102,7 +104,7 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
case AccessTypes.DATA:
return data[key]
case AccessTypes.CONTEXT:
return renderContext[key]
return unwrapRef(renderContext[key])
case AccessTypes.PROPS:
return propsProxy![key]
// default: just fallthrough
@@ -112,7 +114,7 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
return data[key]
} else if (hasOwn(renderContext, key)) {
accessCache![key] = AccessTypes.CONTEXT
return renderContext[key]
return unwrapRef(renderContext[key])
} else if (type.props != null) {
// only cache other properties when instance has declared (this stable)
// props
@@ -167,7 +169,13 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
if (data !== EMPTY_OBJ && hasOwn(data, key)) {
data[key] = value
} else if (hasOwn(renderContext, key)) {
renderContext[key] = value
const oldValue = renderContext[key]
value = toRaw(value)
if (isRef(oldValue) && !isRef(value)) {
oldValue.value = value
} else {
renderContext[key] = value
}
} else if (key[0] === '$' && key.slice(1) in target) {
__DEV__ &&
warn(