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

fix(sfc): allow variables that start with _ or $ in <script setup>

Browse Source
This commit is contained in:
Evan You 2021-06-23 10:13:23 -04:00
parent 63e9e2e9aa
commit 0b8b576428
4 changed files with 65 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
View File

@ -33,27 +33,6 @@ return { x }
export const n = 1"
`;
exports[`SFC compile <script setup> <template inherit-attrs="false"> 1`] = `
"
const __default__ = {}
__default__.inheritAttrs = false
export default __default__"
`;
exports[`SFC compile <script setup> <template inherit-attrs="false"> 2`] = `
"export default {
expose: [],
inheritAttrs: false,
setup(__props) {
const a = 1
return { a }
}
}"
`;
exports[`SFC compile <script setup> defineEmit() (deprecated) 1`] = `
"export default {
expose: [],

4
packages/compiler-sfc/src/compileScript.ts
View File

@ -946,7 +946,9 @@ export function compileScript(
allBindings[key] = true
}
}
returned = `{ ${Object.keys(allBindings).join(', ')} }`
returned = `{ ${Object.keys(allBindings).join(', ')}${
__TEST__ ? `` : `, __isScriptSetup: true`
} }`
}
s.appendRight(endOffset, `\nreturn ${returned}\n}\n\n`)

15
packages/runtime-core/src/componentPublicInstance.ts
View File

@ -272,6 +272,19 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
return true
}
// prioritize <script setup> bindings during dev.
// this allows even properties that start with _ or $ to be used - so that
// it aligns with the production behavior where the render fn is inlined and
// indeed has access to all declared variables.
if (
__DEV__ &&
setupState !== EMPTY_OBJ &&
setupState.__isScriptSetup &&
hasOwn(setupState, key)
) {
return setupState[key]
}
// data / props / ctx
// This getter gets called for every property access on the render context
// during render and is a major hotspot. The most expensive part of this
@ -526,7 +539,7 @@ export function exposeSetupStateOnRenderContext(
) {
const { ctx, setupState } = instance
Object.keys(toRaw(setupState)).forEach(key => {
if (key[0] === '$' || key[0] === '_') {
if (!setupState.__isScriptSetup && (key[0] === '$' || key[0] === '_')) {
warn(
`setup() return property ${JSON.stringify(
key

95
packages/sfc-playground/src/Header.vue
View File

@ -1,50 +1,3 @@
<template>
<nav>
<h1>
<img alt="logo" src="/logo.svg">
<span>Vue SFC Playground</span>
</h1>
<div class="links">
<div class="version" @click.stop>
<span class="active-version" @click="toggle">
Version: {{ activeVersion }}
</span>
<ul class="versions" :class="{ expanded }">
<li v-if="!publishedVersions"><a>loading versions...</a></li>
<li v-for="version of publishedVersions">
<a @click="setVueVersion(version)">v{{ version }}</a>
</li>
<li><a @click="resetVueVersion">This Commit ({{ currentCommit }})</a></li>
<li>
<a href="https://app.netlify.com/sites/vue-sfc-playground/deploys" target="_blank">Commits History</a>
</li>
</ul>
</div>
<button class="share" @click="copyLink">
<svg width="1.4em" height="1.4em" viewBox="0 0 24 24">
<g fill="none" stroke="#626262" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="18" cy="5" r="3"/>
<circle cx="6" cy="12" r="3"/>
<circle cx="18" cy="19" r="3"/>
<path d="M8.59 13.51l6.83 3.98"/>
<path d="M15.41 6.51l-6.82 3.98"/>
</g>
</svg>
</button>
<button class="download" @click="downloadProject">
<svg width="1.7em" height="1.7em" viewBox="0 0 24 24">
<g fill="#626262">
<rect x="4" y="18" width="16" height="2" rx="1" ry="1"/>
<rect x="3" y="17" width="4" height="2" rx="1" ry="1" transform="rotate(-90 5 18)"/>
<rect x="17" y="17" width="4" height="2" rx="1" ry="1" transform="rotate(-90 19 18)"/>
<path d="M12 15a1 1 0 0 1-.58-.18l-4-2.82a1 1 0 0 1-.24-1.39a1 1 0 0 1 1.4-.24L12 12.76l3.4-2.56a1 1 0 0 1 1.2 1.6l-4 3a1 1 0 0 1-.6.2z"/>
<path d="M12 13a1 1 0 0 1-1-1V4a1 1 0 0 1 2 0v8a1 1 0 0 1-1 1z"/>
</g>
</svg>
</button>
</div>
</nav>
</template>
<script setup lang="ts">
import { downloadProject } from './download/download'
@ -100,6 +53,54 @@ async function fetchVersions(): Promise<string[]> {
}
</script>
<template>
<nav>
<h1>
<img alt="logo" src="/logo.svg">
<span>Vue SFC Playground</span>
</h1>
<div class="links">
<div class="version" @click.stop>
<span class="active-version" @click="toggle">
Version: {{ activeVersion }}
</span>
<ul class="versions" :class="{ expanded }">
<li v-if="!publishedVersions"><a>loading versions...</a></li>
<li v-for="version of publishedVersions">
<a @click="setVueVersion(version)">v{{ version }}</a>
</li>
<li><a @click="resetVueVersion">This Commit ({{ currentCommit }})</a></li>
<li>
<a href="https://app.netlify.com/sites/vue-sfc-playground/deploys" target="_blank">Commits History</a>
</li>
</ul>
</div>
<button class="share" @click="copyLink">
<svg width="1.4em" height="1.4em" viewBox="0 0 24 24">
<g fill="none" stroke="#626262" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="18" cy="5" r="3"/>
<circle cx="6" cy="12" r="3"/>
<circle cx="18" cy="19" r="3"/>
<path d="M8.59 13.51l6.83 3.98"/>
<path d="M15.41 6.51l-6.82 3.98"/>
</g>
</svg>
</button>
<button class="download" @click="downloadProject">
<svg width="1.7em" height="1.7em" viewBox="0 0 24 24">
<g fill="#626262">
<rect x="4" y="18" width="16" height="2" rx="1" ry="1"/>
<rect x="3" y="17" width="4" height="2" rx="1" ry="1" transform="rotate(-90 5 18)"/>
<rect x="17" y="17" width="4" height="2" rx="1" ry="1" transform="rotate(-90 19 18)"/>
<path d="M12 15a1 1 0 0 1-.58-.18l-4-2.82a1 1 0 0 1-.24-1.39a1 1 0 0 1 1.4-.24L12 12.76l3.4-2.56a1 1 0 0 1 1.2 1.6l-4 3a1 1 0 0 1-.6.2z"/>
<path d="M12 13a1 1 0 0 1-1-1V4a1 1 0 0 1 2 0v8a1 1 0 0 1-1 1z"/>
</g>
</svg>
</button>
</div>
</nav>
</template>
<style>
nav {
height: var(--nav-height);