詳解Vue的options

Posted on by

1. options 是什麼

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

而 Vue.js 在此基礎上更近一步，封裝瞭對視圖的所有操作，包括數據的讀寫、數據變化的監聽、DOM元素的更新等等，通過 new Vue(options) 來創建出一個 Vue實例 ，也稱為 Vue對象 ，該 Vue實例 封裝瞭操作元素視圖的所有操作，可通過 Vue實例 來輕松操作對應區域的視圖。

2. 包含哪些屬性

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

3.入門屬性

el

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

掛載點的定義有兩種方式，mount 就是掛載的意思

1. 設置 el 屬性

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

2. 使用 $mount 接口

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

data

data 屬性又稱內部數據，該屬性值可以是對象，也可以是函數，但優先推薦使用函數，對象裡的函數又稱方法。並且若是組件中的 data 則必須使用函數。

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

而當 data 屬性值為函數時，Vue 創建實例時是會執行該 data() 函數，並將函數執行的結果返回的對象賦值給 Vue實例.data 屬性，每次函數執行返回的對象都是不同的對象，因此多個實例的 data 屬性值對應的是不同的對象，一個改變不會影響另外一個，各自獨立不影響。

1. 使用對象

data:{
    n: 0
}

2. 使用函數

data(){
    return{
      n: 0
    }
}

methods

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

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

components

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

1. 全局註冊

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

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

    // ... 選項 ... 該部分和創建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一樣的內容，但data必須是函數
        }
    } 
})
<div  id="app">
    <component-a></component-a>
</div>

3. 模塊系統

通過將組件單獨為一個 *.vue 文件，然後通過 import 導入並引用，如下
main.js

import ComponentA from  './ComponentA.vue'
new Vue({ 
    el: '#app',
    components:{
        ComponentA: ComponentA
        //在ES6語法中，當屬性和屬性值相同時可隻寫一個
        //ComponentA
    }
})
<div  id="app">
    <ComponentA></ComponentA>
</div>

總結

推薦使用最後的模塊系統組件，更加模塊化，結構更清晰。
完整版介紹請看vuejs官網-components

props

props 又稱外部數據，一般用於組件中接受外來傳遞的數據，在組件使用時，通過標簽全局屬性的方式進行傳參。以下以引入完整版 vue.js 為例

HelloWorld.vue

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

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

數據的傳遞

main.js

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

生命周期鉤子

在 Vue 中，將每個狀態轉變點稱之為鉤子，如實例創建後，和實例創建前，則實例創建就是個鉤子，對應前後兩個階段，即是 beforeCreate 實例創建前，和 created 實例創建後，以下都是成對出現的，因此隻需記一個就行。

該屬性是一個函數，在其對應的時期被調用。

  • created 實例出現在內存中
  • mounted（該鉤子處可進行數據請求） 實例出現在頁面中
  • updated 實例更新瞭
  • destroyed 實例從頁面和內存中消亡瞭

以上就是詳解Vue的options的詳細內容，更多關於Vue的options的資料請關註WalkonNet其它相關文章！

推薦閱讀：