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

fix(compiler-core): should not generate CLASS/STYLE patch flags on components

Browse Source 
ref #677
This commit is contained in:
Evan You 2020-04-10 10:19:11 -04:00
parent cda50ea788
commit a6e2b1052a
3 changed files with 17 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/compiler-core/__tests__/transforms/transformElement.spec.ts
View File

@ -739,6 +739,15 @@ describe('compiler: element transform', () => {
expect(node.dynamicProps).toBe(`["foo", "baz"]`) expect(node.dynamicProps).toBe(`["foo", "baz"]`)
}) })
// should treat `class` and `style` as PROPS
test('PROPS on component', () => {
const { node } = parseWithBind(
`<Foo :id="foo" :class="cls" :style="styl" />`
)
expect(node.patchFlag).toBe(genFlagText(PatchFlags.PROPS))
expect(node.dynamicProps).toBe(`["id", "class", "style"]`)
})
test('FULL_PROPS (v-bind)', () => { test('FULL_PROPS (v-bind)', () => {
const { node } = parseWithBind(`<div v-bind="foo" />`) const { node } = parseWithBind(`<div v-bind="foo" />`)
expect(node.patchFlag).toBe(genFlagText(PatchFlags.FULL_PROPS)) expect(node.patchFlag).toBe(genFlagText(PatchFlags.FULL_PROPS))

4
packages/compiler-core/src/transforms/transformElement.ts
View File

@ -289,9 +289,9 @@ export function buildProps(
} }
if (name === 'ref') { if (name === 'ref') {
hasRef = true hasRef = true
} else if (name === 'class') { } else if (name === 'class' && !isComponent) {
hasClassBinding = true hasClassBinding = true
} else if (name === 'style') { } else if (name === 'style' && !isComponent) {
hasStyleBinding = true hasStyleBinding = true
} else if (name !== 'key' && !dynamicPropNames.includes(name)) { } else if (name !== 'key' && !dynamicPropNames.includes(name)) {
dynamicPropNames.push(name) dynamicPropNames.push(name)

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

@ -236,20 +236,12 @@ export function shouldUpdateComponent(
if (patchFlag & PatchFlags.FULL_PROPS) { if (patchFlag & PatchFlags.FULL_PROPS) {
// presence of this flag indicates props are always non-null // presence of this flag indicates props are always non-null
return hasPropsChanged(prevProps!, nextProps!) return hasPropsChanged(prevProps!, nextProps!)
} else { } else if (patchFlag & PatchFlags.PROPS) {
if (patchFlag & PatchFlags.CLASS) { const dynamicProps = nextVNode.dynamicProps!
return prevProps!.class !== nextProps!.class for (let i = 0; i < dynamicProps.length; i++) {
} const key = dynamicProps[i]
if (patchFlag & PatchFlags.STYLE) { if (nextProps![key] !== prevProps![key]) {
return hasPropsChanged(prevProps!.style, nextProps!.style) return true
}
if (patchFlag & PatchFlags.PROPS) {
const dynamicProps = nextVNode.dynamicProps!
for (let i = 0; i < dynamicProps.length; i++) {
const key = dynamicProps[i]
if (nextProps![key] !== prevProps![key]) {
return true
}
} }
} }
} }