快捷導(dǎo)航

詳解Vue的options

更新時(shí)間：2021年05月15日 10:32:26 作者：lovin

options顧名思義是選項(xiàng)的意思，或稱為構(gòu)造選項(xiàng)。是在創(chuàng)建vue實(shí)例時(shí)傳入的參數(shù)，是一個(gè)對(duì)象。該對(duì)象包含哪些屬性？每個(gè)屬性都是什么含義？本篇文章就來(lái)帶大家詳細(xì)了解其中的奧秘

1. options 是什么

無(wú)論是 jQuery.js 還是 Vue.js，都是在 js 的基礎(chǔ)上再次封裝的庫(kù)，都需要?jiǎng)?chuàng)建對(duì)應(yīng)的實(shí)例來(lái)封裝對(duì)應(yīng)的操作。如通過(guò) $('div') 獲得一個(gè) jQuery 的 div元素實(shí)例，也稱為 jQuery 對(duì)象，jQuery 對(duì)象包含了對(duì)選中的 div元素的各種操作API，因此 jQuery 實(shí)例封裝的是對(duì)選中元素的各種操作。

而 Vue.js 在此基礎(chǔ)上更近一步，封裝了對(duì)視圖的所有操作，包括數(shù)據(jù)的讀寫、數(shù)據(jù)變化的監(jiān)聽(tīng)、DOM元素的更新等等，通過(guò) new Vue(options) 來(lái)創(chuàng)建出一個(gè) Vue實(shí)例，也稱為 Vue對(duì)象，該 Vue實(shí)例封裝了操作元素視圖的所有操作，可通過(guò) Vue實(shí)例來(lái)輕松操作對(duì)應(yīng)區(qū)域的視圖。

2. 包含哪些屬性

options 對(duì)象的具體可選屬性有很多，具體可分為五大類，可在 vue.js 官網(wǎng)查看到，如下：

3.入門屬性

el

el 屬性又稱掛載點(diǎn)，可認(rèn)為是 element 的簡(jiǎn)寫，創(chuàng)建一個(gè) vue實(shí)例得知道是在哪一塊元素上創(chuàng)建 Vue實(shí)例，對(duì)哪一塊視圖進(jìn)行操作。

掛載點(diǎn)的定義有兩種方式，mount 就是掛載的意思

1. 設(shè)置 el 屬性

new Vue({
  el: "#app",
  render: h => h(App)
})

2. 使用 $mount 接口

new Vue({
  render: h => h(App)
}).$mount("#app");

data

data 屬性又稱內(nèi)部數(shù)據(jù)，該屬性值可以是對(duì)象，也可以是函數(shù)，但優(yōu)先推薦使用函數(shù)，對(duì)象里的函數(shù)又稱方法。并且若是組件中的 data 則必須使用函數(shù)。

優(yōu)先推薦使用函數(shù)的原因是在使用同一個(gè) options 對(duì)象作為參數(shù)創(chuàng)建多個(gè) Vue實(shí)例時(shí)，若 data 屬性值為對(duì)象，在使用 new Vue(options) 創(chuàng)建 Vue實(shí)例時(shí)會(huì)將 options.data 屬性值直接賦值給 Vue實(shí)例.data的屬性，由于對(duì)象的賦值是復(fù)制的地址，因此多個(gè)實(shí)例的 data 屬性值都是指向同一個(gè)對(duì)象的地址，則多個(gè)實(shí)例會(huì)共用一個(gè) data對(duì)象，當(dāng)一個(gè)實(shí)例改變 data對(duì)象時(shí)，另一個(gè)實(shí)例的 data對(duì)象也會(huì)被改變。

而當(dāng) data 屬性值為函數(shù)時(shí)，Vue 創(chuàng)建實(shí)例時(shí)是會(huì)執(zhí)行該 data() 函數(shù)，并將函數(shù)執(zhí)行的結(jié)果返回的對(duì)象賦值給 Vue實(shí)例.data 屬性，每次函數(shù)執(zhí)行返回的對(duì)象都是不同的對(duì)象，因此多個(gè)實(shí)例的 data 屬性值對(duì)應(yīng)的是不同的對(duì)象，一個(gè)改變不會(huì)影響另外一個(gè)，各自獨(dú)立不影響。

1. 使用對(duì)象

data:{
    n: 0
}

2. 使用函數(shù)

data(){
    return{
      n: 0
    }
}

methods

methods 屬性又稱方法，屬性值是一個(gè)對(duì)象，對(duì)象里面的屬性都是函數(shù)，這些函數(shù)可以是事件處理的回調(diào)函數(shù)，也可以是普通函數(shù)。特點(diǎn)是每次頁(yè)面渲染 methods 都會(huì)執(zhí)行，如下：

methods:{
    add(){
      this.n +=1
    }
}

components

components 即組件的意思，也是基于模塊化的概念設(shè)計(jì)的便于復(fù)用的 Vue實(shí)例，使用方法有三種，如下：

1. 全局注冊(cè)

全局定義一個(gè)組件，就可以在整個(gè)項(xiàng)目中隨時(shí)使用，定義方法如下

Vue.component('my-component-name', {  

    // ... 選項(xiàng) ... 該部分和創(chuàng)建vue實(shí)例的options是一樣的，畢竟組件就是vue實(shí)例
    
})
new Vue({ el: '#app' })

<div  id="app">
    <my-component-name></my-component-name>
</div>

2. 局部注冊(cè)

//通過(guò)一個(gè)普通的 JavaScript 對(duì)象來(lái)定義組件
var ComponentA = { options }

//然后在 components 選項(xiàng)中定義你想要使用的組件
new Vue({ 
    el: '#app',
    components: {
        component-a: ComponentA //或直接在里面定義對(duì)象
        component-b: {
            //和options一樣的內(nèi)容，但data必須是函數(shù)
        }
    } 
})

<div  id="app">
    <component-a></component-a>
</div>

3. 模塊系統(tǒng)

通過(guò)將組件單獨(dú)為一個(gè) *.vue 文件，然后通過(guò) import 導(dǎo)入并引用，如下
main.js

import ComponentA from  './ComponentA.vue'
new Vue({ 
    el: '#app',
    components:{
        ComponentA: ComponentA
        //在ES6語(yǔ)法中，當(dāng)屬性和屬性值相同時(shí)可只寫一個(gè)
        //ComponentA
    }
})

<div  id="app">
    <ComponentA></ComponentA>
</div>

總結(jié)

推薦使用最后的模塊系統(tǒng)組件，更加模塊化，結(jié)構(gòu)更清晰。
完整版介紹請(qǐng)看vuejs官網(wǎng)-components

props

props 又稱外部數(shù)據(jù)，一般用于組件中接受外來(lái)傳遞的數(shù)據(jù)，在組件使用時(shí)，通過(guò)標(biāo)簽全局屬性的方式進(jìn)行傳參。以下以引入完整版 vue.js 為例

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  }
};
</script>

數(shù)據(jù)的傳遞

main.js

import HelloWorld from ./HelloWorld.vue
new Vue({
    template:`
        <HelloWorld msg="hello my world"/> //這樣只能傳遞字符串
        <HelloWorld :msg="ms"/> //這樣是傳遞變量，即 this.ms
        //也可用:傳遞函數(shù)名<HelloWorld :msg="fn"/>
    `，
    data:{
        ms: 'hello my world'
    },
    methods:{
        fn(){
            ...
        }
    }
})

生命周期鉤子

在 Vue 中，將每個(gè)狀態(tài)轉(zhuǎn)變點(diǎn)稱之為鉤子，如實(shí)例創(chuàng)建后，和實(shí)例創(chuàng)建前，則實(shí)例創(chuàng)建就是個(gè)鉤子，對(duì)應(yīng)前后兩個(gè)階段，即是 beforeCreate 實(shí)例創(chuàng)建前，和 created 實(shí)例創(chuàng)建后，以下都是成對(duì)出現(xiàn)的，因此只需記一個(gè)就行。

該屬性是一個(gè)函數(shù)，在其對(duì)應(yīng)的時(shí)期被調(diào)用。