fix(v-pre): skip compiling custom component tags in v-pre blocks (fix #8286) (#8376)

Author: haoqunjiang

src/compiler/codegen/index.js

@@ -52,6 +52,10 @@ export function generate (
 }
 
 export function genElement (el: ASTElement, state: CodegenState): string {
+  if (el.parent) {
+    el.pre = el.pre || el.parent.pre
+  }
+
   if (el.staticRoot && !el.staticProcessed) {
     return genStatic(el, state)
   } else if (el.once && !el.onceProcessed) {
@@ -70,7 +74,10 @@ export function genElement (el: ASTElement, state: CodegenState): string {
     if (el.component) {
       code = genComponent(el.component, el, state)
     } else {
-      const data = el.plain ? undefined : genData(el, state)
+      let data
+      if (!el.plain || el.pre) {
+        data = genData(el, state)
+      }
 
       const children = el.inlineTemplate ? null : genChildren(el, state, true)
       code = `_c('${el.tag}'${

src/core/vdom/create-element.js

@@ -102,7 +102,7 @@ export function _createElement (
         config.parsePlatformTagName(tag), data, children,
         undefined, undefined, context
       )
-    } else if (isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
+    } else if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
       // component
       vnode = createComponent(Ctor, data, context, children, tag)
     } else {

test/unit/features/directives/pre.spec.js

@@ -7,7 +7,7 @@ describe('Directive v-pre', function () {
         <div v-pre>{{ a }}</div>
         <div>{{ a }}</div>
         <div v-pre>
-          <component></component>
+          <component is="div"></component>
         </div>
       </div>`,
       data: {
@@ -17,7 +17,7 @@ describe('Directive v-pre', function () {
     vm.$mount()
     expect(vm.$el.firstChild.textContent).toBe('{{ a }}')
     expect(vm.$el.children[1].textContent).toBe('123')
-    expect(vm.$el.lastChild.innerHTML).toBe('<component></component>')
+    expect(vm.$el.lastChild.innerHTML).toBe('<component is="div"></component>')
   })
 
   it('should not compile on root node', function () {
@@ -31,4 +31,15 @@ describe('Directive v-pre', function () {
     vm.$mount()
     expect(vm.$el.firstChild.textContent).toBe('{{ a }}')
   })
+
+  // #8286
+  it('should not compile custom component tags', function () {
+    Vue.component('vtest', { template: ` <div>Hello World</div>` })
+    const vm = new Vue({
+      template: '<div v-pre><vtest></vtest></div>',
+      replace: true
+    })
+    vm.$mount()
+    expect(vm.$el.firstChild.tagName).toBe('VTEST')
+  })
 })