html 自定义标签 组件化,组件化内部详解（推荐阅读）

组件化内部详解

本文将要展示Vue.extend和Vue.component的区别和联系

Vue.extend(options)

Vue.js官网介绍：

Vue.extend将会创建一个Vue构造函数的子类，参数是包含组建选项的对象。

组建选项(options)中的data必须是一个函数。

为什么data必须是一个函数呢？

因为Vue的每一个组件都需要有一个自己独立的作用域，如果不是一个函数，而是一个对象，将会暴露在全局的作用域下面，其他组件也可以改变里面的data数据，从而改变视图，这不是我们想要的，所以通过data是一个函数，形成一个独立的作用域，方便组件管理内部的数据和视图。

总结： 这里可以简单的理解为，Vue.extend就像一个组件暂存器，之后可以通过new，Vue.component()，实例化组件components，来渲染成对应的模板。

Vue.extend和Vue.component

我们使用Vue.extend()实现一个子类构造函数，Vue构造函数可接受的大部分选项都能在Vue.extend()中使用，除了我们上面提到的data 和 el，因为每一个Vue的实例都应该有自己绑定了dom和数据data，所以我们必须在实例化的时候再去绑定元素el，让其具有唯一性。data必须是一个函数，让其拥有独立的作用域。

let myChild = Vue.extend({

data() {

return {

text: 'This is a test'

}

}

})

接下来我们通过Vue.component注册这个构造函数，从而生产全局组件。

Vue.component('my-component', myChild)

但是通常为了方便，我们都会省去Vue.extend的部分，Vue官方也是提倡这种写法。

Vue.component('my-component', {

data() {

return {

text: 'This is a test'

}

},

template: '

})

这里我们直接调用Vue.component定义组件，并传递一个对象参数(options)， 实际Vue内部还是会隐式调用Vue.extend(options)，通过对应的name(my-component), 来绑定对应的组件名。

当我们在模板中是使用对应的自定义标签名(my-component)的时候。

Vue内部会调用更加自定义标签名，给Vue.extend实例化, 并绑定自定义的标签名dom，这样就把自定义标签名替换成了我们的template内容，从而实现了自定义标签和组件化之间的联系。

所以我们也可以直接Vue.extend生成构造函数子类后，然后实例化，并绑定自定义标签，这样也可以实现组件化。

//html

// js

let myChild = Vue.extend({

data() {

return {

name: 'hhhh'

}

},

template: '#my',

methods: {

show() {

console.log(this.name)

}

}

})

// 实例化并绑定自定义元素

new myChild({

data: {

a: 'hcc'

}

}).$mount('my-component')

总结： Vue.component和Vue.extend的区别是，Vue.extend()可以理解为拓展Vue的构造函数，提供的参数对象options为之后的组件或自定义标签提供模板和数据。而Vue.component实际就是给组件绑定一个id,让模板中遇到该id为名称的自定义标签的时候，会自动调用类似于new myChild()的Vue.extend拓展后的实例化，并通过实例化的$mount绑定自定义标签。

Vue.extend 和 组件内部components

向上面提到了Vue.components的本质，我们也可以通过实例化的内部的components属性，自定义内部组件，而不是全局注册组件。

内部组件：

// html

// 模板

// Vue.extend 暂存组件

let a = Vue.extend({

data() {

return {

name: 'hhhh'

}

},

template: '#my',

methods: {

show() {

console.log(this.name)

}

}

})

// Vue实例化

new Vue({

el: '#app',

data: {

a: 'hcc'

},

components: {

'my-child': a,

hh: {

template: '

}

}

})

// 输出

app

This is my child hhhh

This is my child

组件的自动销毁机制

在文档中有这样一句话，v-if会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

实例：

Vue.config.devtools = true;

let child = Vue.extend({

template: '

data() {

return {

name: 'hcc'

}

},

created() {

console.log('created')

},

mounted() {

console.log('mounted')

console.log(this.$el)

},

beforeDestroy() {

console.log('beforeDestoryed');

console.log(this.$el)

},

destroyed() {

console.log('destroyed');

console.log(this.$el)

}

})

new Vue({

el: '#app',

data() {

return {

showChild: true,

type: null

}

},

methods: {

destroyChild() {

this.showChild = !this.showChild;

}

},

components: {

child

}

})

// 在点击按钮的时候，可以观察到在v-if进行代码切换的时候，组件的摧毁和创建。注意v-if 和 v-show 的区别。

Vue-loader的本质

我们知道通过vue.js官方提供的脚手架vue-cli可以快速的搭建一个单页面运用，通过Vue-loader来处理单个的.vue后缀文件，下面我们来探讨为什么可以单独的创建.vue文件，Vue-loader到底进行了什么样的转换。

一个.vue文件有三个部分组成，分别代表了组件的模板template，组件的数据和逻辑js，组件的样式内容css。

// html模板字符串

// js

export default {

...options内容

}

//css

Vue-loader其实本质上面都不会做，它只会把 .vue文件的css部分交给style-loader等css预处理器处理。把template里面的内容变成模板字符串，并把它放入到导出的对象options中的template属性中，如果options里面有template属性，里面的内容会被模板字符串替代。这样导出后，就相当于一个组件的对象，然后通过引入和注册组件来使用。

// 1. 定义子组件内容 child.vue

export default {

data() {

return {

name : 'child'

}

}

}

// 2. 父组件的script中引入导出的内容

import child from './child.vue'

// 3. 注册组件

export default {

data() {

return {

name: 'parent'

}

},

components : {

child

}

}