options裏有什麼

1. options 是什麼

options 顧名思義是選項的意思，或稱爲構造選項。是在建立 vue 實例時傳入的參數，是一個對象。
const vm = new Vue(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 官網查看到，以下：

詳細介紹可參考 vuejs官網-選項

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

實例從頁面和內存中消亡了