Просмотр исходного кода

perf: v-for fragments do not need to track dynamicChildren

Evan You 6 лет назад
Родитель
Сommit
1b9bd6912e

+ 3 - 3
packages/compiler-core/__tests__/__snapshots__/compile.spec.ts.snap

@@ -15,7 +15,7 @@ return function render() {
       (_openBlock(), ok
         ? _createBlock(\\"div\\", { key: 0 }, \\"yes\\")
         : _createBlock(_Fragment, { key: 1 }, [\\"no\\"])),
-      (_openBlock(), _createBlock(_Fragment, null, _renderList(list, (value, index) => {
+      (_openBlock(false), _createBlock(_Fragment, null, _renderList(list, (value, index) => {
         return (_openBlock(), _createBlock(\\"div\\", null, [
           _createVNode(\\"span\\", null, _toString(value + index), 1 /* TEXT */)
         ]))
@@ -38,7 +38,7 @@ return function render() {
     (openBlock(), (_ctx.ok)
       ? createBlock(\\"div\\", { key: 0 }, \\"yes\\")
       : createBlock(Fragment, { key: 1 }, [\\"no\\"])),
-    (openBlock(), createBlock(Fragment, null, renderList(_ctx.list, (value, index) => {
+    (openBlock(false), createBlock(Fragment, null, renderList(_ctx.list, (value, index) => {
       return (openBlock(), createBlock(\\"div\\", null, [
         createVNode(\\"span\\", null, toString(value + index), 1 /* TEXT */)
       ]))
@@ -60,7 +60,7 @@ export default function render() {
     (openBlock(), (_ctx.ok)
       ? createBlock(\\"div\\", { key: 0 }, \\"yes\\")
       : createBlock(Fragment, { key: 1 }, [\\"no\\"])),
-    (openBlock(), createBlock(Fragment, null, renderList(_ctx.list, (value, index) => {
+    (openBlock(false), createBlock(Fragment, null, renderList(_ctx.list, (value, index) => {
       return (openBlock(), createBlock(\\"div\\", null, [
         createVNode(\\"span\\", null, toString(value + index), 1 /* TEXT */)
       ]))

+ 3 - 3
packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap

@@ -227,7 +227,7 @@ return function render() {
     const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, toString: _toString, createVNode: _createVNode } = _Vue
     
     return (_openBlock(), _createBlock(\\"div\\", null, [
-      (_openBlock(), _createBlock(_Fragment, null, _renderList(_ctx.list, (o) => {
+      (_openBlock(false), _createBlock(_Fragment, null, _renderList(_ctx.list, (o) => {
         return (_openBlock(), _createBlock(\\"p\\", null, [
           _createVNode(\\"span\\", null, _toString(o + 'foo'), 1 /* TEXT */)
         ]))
@@ -262,7 +262,7 @@ return function render() {
     const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, toString: _toString, createVNode: _createVNode } = _Vue
     
     return (_openBlock(), _createBlock(\\"div\\", null, [
-      (_openBlock(), _createBlock(_Fragment, null, _renderList(_ctx.list, (o) => {
+      (_openBlock(false), _createBlock(_Fragment, null, _renderList(_ctx.list, (o) => {
         return (_openBlock(), _createBlock(\\"p\\", null, [
           _createVNode(\\"span\\", null, _toString(o), 1 /* TEXT */)
         ]))
@@ -354,7 +354,7 @@ return function render() {
     const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, createVNode: _createVNode } = _Vue
     
     return (_openBlock(), _createBlock(\\"div\\", null, [
-      (_openBlock(), _createBlock(_Fragment, null, _renderList(list, (i) => {
+      (_openBlock(false), _createBlock(_Fragment, null, _renderList(list, (i) => {
         return (_openBlock(), _createBlock(\\"div\\", _hoisted_1, [
           _hoisted_2
         ]))

+ 11 - 11
packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap

@@ -7,7 +7,7 @@ return function render() {
   with (this) {
     const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, createVNode: _createVNode } = _Vue
     
-    return (_openBlock(), _createBlock(_Fragment, null, _renderList(items, (item) => {
+    return (_openBlock(false), _createBlock(_Fragment, null, _renderList(items, (item) => {
       return (_openBlock(), _createBlock(\\"span\\"))
     }), 128 /* UNKEYED_FRAGMENT */))
   }
@@ -21,7 +21,7 @@ return function render() {
   with (this) {
     const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, createVNode: _createVNode } = _Vue
     
-    return (_openBlock(), _createBlock(_Fragment, null, _renderList(items, (item) => {
+    return (_openBlock(false), _createBlock(_Fragment, null, _renderList(items, (item) => {
       return (_openBlock(), _createBlock(_Fragment, { key: item }, [
         \\"hello\\",
         _createVNode(\\"span\\")
@@ -38,7 +38,7 @@ return function render() {
   with (this) {
     const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, createVNode: _createVNode } = _Vue
     
-    return (_openBlock(), _createBlock(_Fragment, null, _renderList(items, (item) => {
+    return (_openBlock(false), _createBlock(_Fragment, null, _renderList(items, (item) => {
       return (_openBlock(), _createBlock(\\"span\\", { key: item }))
     }), 64 /* KEYED_FRAGMENT */))
   }
@@ -52,7 +52,7 @@ return function render() {
   with (this) {
     const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, createVNode: _createVNode } = _Vue
     
-    return (_openBlock(), _createBlock(_Fragment, null, _renderList(items, (item, __, index) => {
+    return (_openBlock(false), _createBlock(_Fragment, null, _renderList(items, (item, __, index) => {
       return (_openBlock(), _createBlock(\\"span\\"))
     }), 128 /* UNKEYED_FRAGMENT */))
   }
@@ -66,7 +66,7 @@ return function render() {
   with (this) {
     const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, createVNode: _createVNode } = _Vue
     
-    return (_openBlock(), _createBlock(_Fragment, null, _renderList(items, (_, __, index) => {
+    return (_openBlock(false), _createBlock(_Fragment, null, _renderList(items, (_, __, index) => {
       return (_openBlock(), _createBlock(\\"span\\"))
     }), 128 /* UNKEYED_FRAGMENT */))
   }
@@ -80,7 +80,7 @@ return function render() {
   with (this) {
     const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, createVNode: _createVNode } = _Vue
     
-    return (_openBlock(), _createBlock(_Fragment, null, _renderList(items, (_, key, index) => {
+    return (_openBlock(false), _createBlock(_Fragment, null, _renderList(items, (_, key, index) => {
       return (_openBlock(), _createBlock(\\"span\\"))
     }), 128 /* UNKEYED_FRAGMENT */))
   }
@@ -94,7 +94,7 @@ return function render() {
   with (this) {
     const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, createVNode: _createVNode } = _Vue
     
-    return (_openBlock(), _createBlock(_Fragment, null, _renderList(items, (item) => {
+    return (_openBlock(false), _createBlock(_Fragment, null, _renderList(items, (item) => {
       return (_openBlock(), _createBlock(_Fragment, null, [
         \\"hello\\",
         _createVNode(\\"span\\")
@@ -111,7 +111,7 @@ return function render() {
   with (this) {
     const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, renderSlot: _renderSlot } = _Vue
     
-    return (_openBlock(), _createBlock(_Fragment, null, _renderList(items, (item) => {
+    return (_openBlock(false), _createBlock(_Fragment, null, _renderList(items, (item) => {
       return _renderSlot($slots, \\"default\\")
     }), 128 /* UNKEYED_FRAGMENT */))
   }
@@ -125,7 +125,7 @@ return function render() {
   with (this) {
     const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, renderSlot: _renderSlot } = _Vue
     
-    return (_openBlock(), _createBlock(_Fragment, null, _renderList(items, (item) => {
+    return (_openBlock(false), _createBlock(_Fragment, null, _renderList(items, (item) => {
       return _renderSlot($slots, \\"default\\")
     }), 128 /* UNKEYED_FRAGMENT */))
   }
@@ -141,7 +141,7 @@ return function render() {
     
     const _directive_foo = _resolveDirective(\\"foo\\")
     
-    return (_openBlock(), _createBlock(_Fragment, null, _renderList(list, (i) => {
+    return (_openBlock(false), _createBlock(_Fragment, null, _renderList(list, (i) => {
       return (_openBlock(), _withDirectives(_createBlock(\\"div\\", null, null, 32 /* NEED_PATCH */), [
         [_directive_foo]
       ]))
@@ -173,7 +173,7 @@ return function render() {
   with (this) {
     const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, createVNode: _createVNode } = _Vue
     
-    return (_openBlock(), _createBlock(_Fragment, null, _renderList(items, (item, key, index) => {
+    return (_openBlock(false), _createBlock(_Fragment, null, _renderList(items, (item, key, index) => {
       return (_openBlock(), _createBlock(\\"span\\"))
     }), 128 /* UNKEYED_FRAGMENT */))
   }

+ 2 - 1
packages/compiler-core/src/transforms/vFor.ts

@@ -71,7 +71,8 @@ export const transformFor = createStructuralDirectiveTransform(
       ? PatchFlags.KEYED_FRAGMENT
       : PatchFlags.UNKEYED_FRAGMENT
     const codegenNode = createSequenceExpression([
-      createCallExpression(helper(OPEN_BLOCK)),
+      // fragment blocks disable tracking since they always diff their children
+      createCallExpression(helper(OPEN_BLOCK), [`false`]),
       createCallExpression(helper(CREATE_BLOCK), [
         helper(FRAGMENT),
         `null`,