組件化內(nèi)部詳解
本文將要展示Vue.extend和Vue.component的區(qū)別和聯(lián)系
Vue.extend(options)
Vue.js官網(wǎng)介紹：
Vue.extend將會創(chuàng)建一個Vue構(gòu)造函數(shù)的子類茧妒，參數(shù)是包含組建選項的對象桐筏。-
組建選項(
options)中的data必須是一個函數(shù)梅忌。為什么data必須是一個函數(shù)呢？
因為Vue的每一個組件都需要有一個自己獨立的作用域琼腔，如果不是一個函數(shù)丹莲，而是一個對象尸诽，將會暴露在全局的作用域下面性含，其他組件也可以改變里面的
data數(shù)據(jù)，從而改變視圖叠萍，這不是我們想要的俭令，所以通過data是一個函數(shù)部宿，形成一個獨立的作用域理张，方便組件管理內(nèi)部的數(shù)據(jù)和視圖雾叭。
總結(jié)： 這里可以簡單的理解為，Vue.extend就像一個組件暫存器暂幼，之后可以通過new移迫，Vue.component()厨埋，實例化組件components，來渲染成對應的模板雨效。
Vue.extend和Vue.component
-
我們使用Vue.extend()實現(xiàn)一個子類構(gòu)造函數(shù)徽龟，Vue構(gòu)造函數(shù)可接受的大部分選項都能在
Vue.extend()中使用据悔，除了我們上面提到的data和el渣蜗，因為每一個Vue的實例都應該有自己綁定了dom和數(shù)據(jù)data耕拷，所以我們必須在實例化的時候再去綁定元素el讼昆，讓其具有唯一性。data必須是一個函數(shù)骚烧，讓其擁有獨立的作用域浸赫。let myChild = Vue.extend({ data() { return { text: 'This is a test' } } }) -
接下來我們通過
Vue.component注冊這個構(gòu)造函數(shù)，從而生產(chǎn)全局組件赃绊。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>' })這里我們直接調(diào)用
Vue.component定義組件运敢，并傳遞一個對象參數(shù)（options）校仑， 實際Vue內(nèi)部還是會隱式調(diào)用Vue.extend(options)传惠，通過對應的name（my-component）, 來綁定對應的組件名迄沫。 -
當我們在模板中是使用對應的自定義標簽名(my-component)的時候。
<my-component></my-component>Vue內(nèi)部會調(diào)用更加自定義標簽名卦方，給Vue.extend實例化, 并綁定自定義的標簽名dom羊瘩，這樣就把自定義標簽名替換成了我們的template內(nèi)容，從而實現(xiàn)了自定義標簽和組件化之間的聯(lián)系盼砍。 -
所以我們也可以直接
Vue.extend生成構(gòu)造函數(shù)子類后尘吗，然后實例化，并綁定自定義標簽浇坐，這樣也可以實現(xiàn)組件化睬捶。//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')
總結(jié)： Vue.component和Vue.extend的區(qū)別是，Vue.extend()可以理解為拓展Vue的構(gòu)造函數(shù)吗跋，提供的參數(shù)對象options為之后的組件或自定義標簽提供模板和數(shù)據(jù)侧戴。而Vue.component實際就是給組件綁定一個id,讓模板中遇到該id為名稱的自定義標簽的時候，會自動調(diào)用類似于new myChild()的Vue.extend拓展后的實例化跌宛，并通過實例化的$mount綁定自定義標簽酗宋。
Vue.extend 和 組件內(nèi)部components
向上面提到了Vue.components的本質(zhì)，我們也可以通過實例化的內(nèi)部的components屬性疆拘，自定義內(nèi)部組件蜕猫，而不是全局注冊組件。
內(nèi)部組件：
// 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會確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當?shù)乇讳N毀和重建回右。
實例：
<div id="app">
<button @click="destroyChild">{{ showChild ? '摧毀' : '創(chuàng)建' }}</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進行代碼切換的時候漱挚，組件的摧毀和創(chuàng)建翔烁。注意v-if 和 v-show 的區(qū)別。
Vue-loader的本質(zhì)
我們知道通過vue.js官方提供的腳手架vue-cli可以快速的搭建一個單頁面運用旨涝，通過Vue-loader來處理單個的.vue后綴文件蹬屹，下面我們來探討為什么可以單獨的創(chuàng)建.vue文件，Vue-loader到底進行了什么樣的轉(zhuǎn)換白华。
一個.vue文件有三個部分組成慨默，分別代表了組件的模板template，組件的數(shù)據(jù)和邏輯js弧腥，組件的樣式內(nèi)容css厦取。
// html模板字符串
<template>
<div id="app">
<h4>分頁組件</h4>
</div>
</template>
// js
<script>
export default {
...options內(nèi)容
}
</script>
//css
<style>
</style>
Vue-loader其實本質(zhì)上面都不會做，它只會把 .vue文件的css部分交給style-loader等css預處理器處理管搪。把template里面的內(nèi)容變成模板字符串虾攻，并把它放入到導出的對象options中的template屬性中铡买，如果options里面有template屬性台谢，里面的內(nèi)容會被模板字符串替代。這樣導出后朋沮，就相當于一個組件的對象，然后通過引入和注冊組件來使用樊拓。
// 1. 定義子組件內(nèi)容 child.vue
<template>
<div id="app">
<h4>分頁組件</h4>
</div>
</template>
<script>
export default {
data() {
return {
name : 'child'
}
}
}
</script>
// 2. 父組件的script中引入導出的內(nèi)容
<script>
import child from './child.vue'
// 3. 注冊組件
export default {
data() {
return {
name: 'parent'
}
},
components : {
child
}
}
</script>
