vue.extend和vue.component

原文链接https://blog.csdn.net/dkr380205984/article/details/80116024

   （1）extend组件构建器

    个人描述：暂时还没有挂载到dom文档流中的一个组件说明

   （2）component 组件注册器

    个人描述：我也不需要挂载到dom文档流中，我也还是一个说明

<div id="mount-point"></div>                 //extend
<div id="mount-point"><hello></hello></div> //component
两者效果一样

1. // 创建构造器
   
   var Profile = Vue.extend({
   
   template: '<p>{{firstName}}</p>',
   
   data: function () {
   
   return {
   
   firstName: 'Walter',
   
   }
   
   }
   
   })
   
   // 创建 Profile 实例，并挂载到一个元素上（坑！！！！！！！！！！）
   
   new Profile().$mount('#mount-point')

    

2. Vue.component('hello',
   
   template: '<p>{{firstName}}</p>',
   
   data: function () {
   
   return {
   
   firstName: 'Walter',
   
   }
   
   })
   

   看起来，extend写法还更恶心一点不但要创建构造器，还要new一个实例，还要挂载到特定的元素上，这个特定元素最终还被完全替换了，不像component用起来那么舒服，注册好特定的名字之后，想在哪里用，就在哪里写组件名，程序还更易读。那不用看下去了，以后都用component了。所以说extend到底有什么优势呢？只要绕开官网的坑就明白了，生成的实例并不一定要"挂载到一个元素上"。也就是new 实例().$mount() 的 $mount()$mount()$mount()$mount()$mount()......（重要的坑要提醒一百遍）的参数可以为空，但他依旧能生成一个实例。那么问题来了，生成的实例不挂载到dom文档流里面，有什么用？木有关系！生成的实例里面有$el这个参数，记录了生成的dom啊，这个dom你想插哪里插哪里。（document.body.appendChild( 实例.$el）)

    总结：component是extend的亲民版，但在实现某些特殊需求的时候，就需要用到extend，如alert组件，你肯定希望alert可以动态插入到body中，而不需要在dom文档流中放一个莫名其妙的alert，大部分时间他还是隐藏的。（你能用component实现我服你）你肯定以为我会实现一下本文的目标，然而我只打算提供一个思路，有时间会详细说明两种类型的组件的实现，以及如何用Vue.use（）方法加载个人组件插件。