組件化內部詳解
本文將要展示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: '<div>This is my child {{text}}</div>' })這里我們直接調用
Vue.component定義組件，并傳遞一個對象參數（options）， 實際Vue內部還是會隱式調用Vue.extend(options)，通過對應的name（my-component）, 來綁定對應的組件名。 -
當我們在模板中是使用對應的自定義標簽名(my-component)的時候。
<my-component></my-component>Vue內部會調用更加自定義標簽名，給Vue.extend實例化, 并綁定自定義的標簽名dom，這樣就把自定義標簽名替換成了我們的template內容，從而實現了自定義標簽和組件化之間的聯系。 -
所以我們也可以直接
Vue.extend生成構造函數子類后，然后實例化，并綁定自定義標簽，這樣也可以實現組件化。//html <my-component></my-component> // 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
<div id="app">
<div class='hhhh'>app</div>
<my-child></my-child>
<hh></hh>
</div>
// 模板
<template id='my'>
<div>This is my child {{name}}</div>
</template>
// 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: ' <div>This is my child</div>'
}
}
})
// 輸出
app
This is my child hhhh
This is my child
組件的自動銷毀機制
在文檔中有這樣一句話，v-if會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。
實例：
<div id="app">
<button @click="destroyChild">{{ showChild ? '摧毀' : '創建' }}</button>
<child v-if='showChild'></child>
</div>
<script>
Vue.config.devtools = true;
let child = Vue.extend({
template: '<div :name="name">This is a child</div>',
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
}
})
</script>
// 在點擊按鈕的時候，可以觀察到在v-if進行代碼切換的時候，組件的摧毀和創建。注意v-if 和 v-show 的區別。
Vue-loader的本質
我們知道通過vue.js官方提供的腳手架vue-cli可以快速的搭建一個單頁面運用，通過Vue-loader來處理單個的.vue后綴文件，下面我們來探討為什么可以單獨的創建.vue文件，Vue-loader到底進行了什么樣的轉換。
一個.vue文件有三個部分組成，分別代表了組件的模板template，組件的數據和邏輯js，組件的樣式內容css。
// html模板字符串
<template>
<div id="app">
<h4>分頁組件</h4>
</div>
</template>
// js
<script>
export default {
...options內容
}
</script>
//css
<style>
</style>
Vue-loader其實本質上面都不會做，它只會把 .vue文件的css部分交給style-loader等css預處理器處理。把template里面的內容變成模板字符串，并把它放入到導出的對象options中的template屬性中，如果options里面有template屬性，里面的內容會被模板字符串替代。這樣導出后，就相當于一個組件的對象，然后通過引入和注冊組件來使用。
// 1. 定義子組件內容 child.vue
<template>
<div id="app">
<h4>分頁組件</h4>
</div>
</template>
<script>
export default {
data() {
return {
name : 'child'
}
}
}
</script>
// 2. 父組件的script中引入導出的內容
<script>
import child from './child.vue'
// 3. 注冊組件
export default {
data() {
return {
name: 'parent'
}
},
components : {
child
}
}
</script>
