perf: improve scoped slots change detection accuracy (#9371)

Ensure that state mutations that only affect parent scope only trigger parent update and does not affect child components with only scoped slots.

flow/compiler.js

@@ -119,6 +119,7 @@ declare type ASTElement = {
   transitionMode?: string | null;
   slotName?: ?string;
   slotTarget?: ?string;
+  slotTargetDynamic?: boolean;
   slotScope?: ?string;
   scopedSlots?: { [name: string]: ASTElement };
 

src/compiler/codegen/index.js

@@ -354,11 +354,12 @@ function genScopedSlots (
   slots: { [key: string]: ASTElement },
   state: CodegenState
 ): string {
+  const hasDynamicKeys = Object.keys(slots).some(key => slots[key].slotTargetDynamic)
   return `scopedSlots:_u([${
     Object.keys(slots).map(key => {
       return genScopedSlot(key, slots[key], state)
     }).join(',')
-  }])`
+  }]${hasDynamicKeys ? `,true` : ``})`
 }
 
 function genScopedSlot (

src/compiler/parser/index.js

@@ -586,6 +586,7 @@ function processSlotContent (el) {
   const slotTarget = getBindingAttr(el, 'slot')
   if (slotTarget) {
     el.slotTarget = slotTarget === '""' ? '"default"' : slotTarget
+    el.slotTargetDynamic = !!(el.attrsMap[':slot'] || el.attrsMap['v-bind:slot'])
     // preserve slot as an attribute for native shadow DOM compat
     // only for non-scoped slots.
     if (el.tag !== 'template' && !el.slotScope) {
@@ -607,8 +608,10 @@ function processSlotContent (el) {
             )
           }
         }
-        el.slotTarget = getSlotName(slotBinding)
-        el.slotScope = slotBinding.value
+        const { name, dynamic } = getSlotName(slotBinding)
+        el.slotTarget = name
+        el.slotTargetDynamic = dynamic
+        el.slotScope = slotBinding.value || `_` // force it into a scoped slot for perf
       }
     } else {
       // v-slot on component, denotes default slot
@@ -637,10 +640,11 @@ function processSlotContent (el) {
         }
         // add the component's children to its default slot
         const slots = el.scopedSlots || (el.scopedSlots = {})
-        const target = getSlotName(slotBinding)
-        const slotContainer = slots[target] = createASTElement('template', [], el)
+        const { name, dynamic } = getSlotName(slotBinding)
+        const slotContainer = slots[name] = createASTElement('template', [], el)
+        slotContainer.slotTargetDynamic = dynamic
         slotContainer.children = el.children
-        slotContainer.slotScope = slotBinding.value
+        slotContainer.slotScope = slotBinding.value || `_`
         // remove children as they are returned from scopedSlots now
         el.children = []
         // mark el non-plain so data gets generated
@@ -664,9 +668,9 @@ function getSlotName (binding) {
   }
   return dynamicKeyRE.test(name)
     // dynamic [name]
-    ? name.slice(1, -1)
+    ? { name: name.slice(1, -1), dynamic: true }
     // static name
-    : `"${name}"`
+    : { name: `"${name}"`, dynamic: false }
 }
 
 // handle <slot/> outlets

src/core/instance/lifecycle.js

@@ -224,12 +224,22 @@ export function updateChildComponent (
   }
 
   // determine whether component has slot children
-  // we need to do this before overwriting $options._renderChildren
-  const hasChildren = !!(
+  // we need to do this before overwriting $options._renderChildren.
+
+  // check if there are dynamic scopedSlots (hand-written or compiled but with
+  // dynamic slot names). Static scoped slots compiled from template has the
+  // "$stable" marker.
+  const hasDynamicScopedSlot = !!(
+    (parentVnode.data.scopedSlots && !parentVnode.data.scopedSlots.$stable) ||
+    (vm.$scopedSlots !== emptyObject && !vm.$scopedSlots.$stable)
+  )
+  // Any static slot children from the parent may have changed during parent's
+  // update. Dynamic scoped slots may also have changed. In such cases, a forced
+  // update is necessary to ensure correctness.
+  const needsForceUpdate = !!(
     renderChildren ||               // has new static slots
     vm.$options._renderChildren ||  // has old static slots
-    parentVnode.data.scopedSlots || // has new scoped slots
-    vm.$scopedSlots !== emptyObject // has old scoped slots
+    hasDynamicScopedSlot
   )
 
   vm.$options._parentVnode = parentVnode
@@ -268,7 +278,7 @@ export function updateChildComponent (
   updateComponentListeners(vm, listeners, oldListeners)
 
   // resolve slots + force update if has children
-  if (hasChildren) {
+  if (needsForceUpdate) {
     vm.$slots = resolveSlots(renderChildren, parentVnode.context)
     vm.$forceUpdate()
   }

src/core/instance/render-helpers/resolve-slots.js

@@ -51,13 +51,14 @@ function isWhitespace (node: VNode): boolean {
 
 export function resolveScopedSlots (
   fns: ScopedSlotsData, // see flow/vnode
+  hasDynamicKeys?: boolean,
   res?: Object
-): { [key: string]: Function } {
-  res = res || {}
+): { [key: string]: Function, $stable: boolean } {
+  res = res || { $stable: !hasDynamicKeys }
   for (let i = 0; i < fns.length; i++) {
     const slot = fns[i]
     if (Array.isArray(slot)) {
-      resolveScopedSlots(slot, res)
+      resolveScopedSlots(slot, hasDynamicKeys, res)
     } else {
       res[slot.key] = slot.fn
     }

src/core/vdom/helpers/normalize-scoped-slots.js

@@ -14,7 +14,7 @@ export function normalizeScopedSlots (
   } else {
     res = {}
     for (const key in slots) {
-      if (slots[key]) {
+      if (slots[key] && key[0] !== '$') {
         res[key] = normalizeScopedSlot(slots[key])
       }
     }
@@ -26,6 +26,7 @@ export function normalizeScopedSlots (
     }
   }
   res._normalized = true
+  res.$stable = slots && slots.$stable
   return res
 }
 

test/unit/features/component/component-scoped-slot.spec.js

@@ -633,7 +633,6 @@ describe('Component scoped slot', () => {
   })
 
   // 2.6 new slot syntax
-  if (process.env.NEW_SLOT_SYNTAX) {
   describe('v-slot syntax', () => {
     const Foo = {
       render(h) {
@@ -807,7 +806,7 @@ describe('Component scoped slot', () => {
       expect(vm.$el.innerHTML.replace(/\s+/g, ' ')).toMatch(`from foo one`)
     })
 
-      it('dynamic slot name', () => {
+    it('dynamic slot name', done => {
       const vm = new Vue({
         data: {
           a: 'one',
@@ -815,14 +814,56 @@ describe('Component scoped slot', () => {
         },
         template: `
           <foo>
-              <template #[a]="one">{{ one }} </template>
-              <template v-slot:[b]="two">{{ two }}</template>
+            <template #[a]="one">a {{ one }} </template>
+            <template v-slot:[b]="two">b {{ two }} </template>
           </foo>
         `,
         components: { Foo }
       }).$mount()
-        expect(vm.$el.innerHTML.replace(/\s+/g, ' ')).toMatch(`from foo one from foo two`)
+      expect(vm.$el.innerHTML.replace(/\s+/g, ' ')).toMatch(`a from foo one b from foo two`)
+      vm.a = 'two'
+      vm.b = 'one'
+      waitForUpdate(() => {
+        expect(vm.$el.innerHTML.replace(/\s+/g, ' ')).toMatch(`b from foo one a from foo two `)
+      }).then(done)
     })
   })
+
+  // 2.6 scoped slot perf optimization
+  it('should have accurate tracking for scoped slots', done => {
+    const parentUpdate = jasmine.createSpy()
+    const childUpdate = jasmine.createSpy()
+    const vm = new Vue({
+      template: `
+        <div>{{ parentCount }}<foo #default>{{ childCount }}</foo></div>
+      `,
+      data: {
+        parentCount: 0,
+        childCount: 0
+      },
+      updated: parentUpdate,
+      components: {
+        foo: {
+          template: `<div><slot/></div>`,
+          updated: childUpdate
         }
+      }
+    }).$mount()
+    expect(vm.$el.innerHTML).toMatch(`0<div>0</div>`)
+
+    vm.parentCount++
+    waitForUpdate(() => {
+      expect(vm.$el.innerHTML).toMatch(`1<div>0</div>`)
+      // should only trigger parent update
+      expect(parentUpdate.calls.count()).toBe(1)
+      expect(childUpdate.calls.count()).toBe(0)
+
+      vm.childCount++
+    }).then(() => {
+      expect(vm.$el.innerHTML).toMatch(`1<div>1</div>`)
+      // should only trigger child update
+      expect(parentUpdate.calls.count()).toBe(1)
+      expect(childUpdate.calls.count()).toBe(1)
+    }).then(done)
+  })
 })

test/unit/modules/compiler/codegen.spec.js

@@ -229,6 +229,13 @@ describe('codegen', () => {
     )
   })
 
+  it('generate dynamic scoped slot', () => {
+    assertCodegen(
+      '<foo><template :slot="foo" slot-scope="bar">{{ bar }}</template></foo>',
+      `with(this){return _c('foo',{scopedSlots:_u([{key:foo,fn:function(bar){return [_v(_s(bar))]}}],true)})}`
+    )
+  })
+
   it('generate scoped slot with multiline v-if', () => {
     assertCodegen(
       '<foo><template v-if="\nshow\n" slot-scope="bar">{{ bar }}</template></foo>',