詳解Vue的options

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

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

1. options 是什么

無論是 jQuery.js 還是 Vue.js，都是在 js 的基礎(chǔ)上再次封裝的庫，都需要創(chuàng)建對應(yīng)的實例來封裝對應(yīng)的操作。如通過 $('div') 獲得一個 jQuery 的 div元素實例，也稱為 jQuery 對象，jQuery 對象包含了對選中的 div元素的各種操作API，因此 jQuery 實例封裝的是對選中元素的各種操作。

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

2. 包含哪些屬性

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

3.入門屬性

el

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

掛載點的定義有兩種方式，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ù)，該屬性值可以是對象，也可以是函數(shù)，但優(yōu)先推薦使用函數(shù)，對象里的函數(shù)又稱方法。并且若是組件中的 data 則必須使用函數(shù)。

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

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

1. 使用對象

data:{
    n: 0
}

2. 使用函數(shù)

data(){
    return{
      n: 0
    }
}

methods

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

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

components

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

1. 全局注冊

全局定義一個組件，就可以在整個項目中隨時使用，定義方法如下

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

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

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

2. 局部注冊

//通過一個普通的 JavaScript 對象來定義組件
var ComponentA = { options }

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

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

3. 模塊系統(tǒng)

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

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

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

總結(jié)

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

props

props 又稱外部數(shù)據(jù)，一般用于組件中接受外來傳遞的數(shù)據(jù)，在組件使用時，通過標(biāo)簽全局屬性的方式進行傳參。以下以引入完整版 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 中，將每個狀態(tài)轉(zhuǎn)變點稱之為鉤子，如實例創(chuàng)建后，和實例創(chuàng)建前，則實例創(chuàng)建就是個鉤子，對應(yīng)前后兩個階段，即是 beforeCreate 實例創(chuàng)建前，和 created 實例創(chuàng)建后，以下都是成對出現(xiàn)的，因此只需記一個就行。

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