vue-------vue選項

vue api強化學習之-------vue選項（除去聲明週期函數）

vue選項—數據

• data

Vue 實例的數據對象,我理解相當於react組件背部的state對象。Vue 將會遞歸將 data 的屬性轉換爲 getter/setter，從而讓 data 的屬性能夠響應數據變化；
建議在創建實例之前，就聲明全部根級響應式屬性,實例創建之後，vue實例也代理了data對象上所有的屬性，vm.$data.xx 與vm.xx相同 以_和$開頭的自定義屬性，vue爲了防止跟自身的屬性衝突，不會被代理，只能通過vm.$data.xx

• props

用於接收來自父組件的數據,可以是對象或數組，對象時，可以配置高級選項，如類型檢測、自定義驗證和設置默認值；
基於對象，可以使用的選項有個type:此字段表明接受的類型;default:此字段給定默認值;require:此字段定義prop是否爲必須的;validator：此字段定義校驗prop的校驗函數。

• propsData

只用於 new 創建的實例中,創建實例時傳遞 props。主要作用是方便測試。

• computed

計算屬性將被混入到 Vue 實例中。所有 getter 和 setter 的 this 上下文自動地綁定爲 Vue 實例。
若爲一個計算屬性使用了箭頭函數，則 this 不會指向這個組件的實例，不過可以把vue實例當做參數傳遞到此箭頭函數中；
計算屬性的結果會被緩存，其依賴的響應式屬性變化時，纔會重新計算；默認計算屬性只讀，也可以通過get/set方法設置讀寫性；

• methods

在此定義的方法被混入到vue實例中，可以通過vm實例訪問這些方法，方法中的this自動綁定爲vue實例，因此，不能使用箭頭函數定義此類方法，因爲箭頭函數綁定了父級作用域的上下文，this不會指向vue實例；

• watch

一個對象，key爲需要監聽的表達式，val爲一個回調函數，Vue實例在實例化後遍歷watch中的每一屬性，調用vm.$watch監聽每一個屬性。在此監聽器中，可進行異步操作

示例代碼

<template>
  <div class="options">
      <!-- 着重演示計算屬性 附帶data,methods-->
      <div>
          <span>a:</span><span>{{a}}</span><br/>
          <span>計算屬性，假如此處通過a進行了複雜的運算</span><span>{{double}}</span>
         
          <div>
              <p><span>b爲:{{b}}</span></p>
              <button @click="method1">重置b</button>
              <p><span>重置後的b:{{compute_b}}</span></p>
          </div>
      </div>

        <!-- 着重演示watch -->
      <div>
          <input type="text" name="" id="" v-model="str">

      </div>
   
  </div>
</template>
<script>

export default {
  name: 'VueOptions',
  data(){
      // 根級響應式屬性，全部在此處聲明
      return {
          a:20,
          b:"caocao",
          str:"",
      }
  },
  // 此處定義的計算屬性 混入了vue實例中，vue實例進行了代理
  computed:{
      // 此處只能讀取
      double:function(newval,oldval){
          return this.a*2;
      },
      compute_b:{
          // 讀取
          get:function(){
            return this.b + "______is a hero"
          },
          // 設置
          set:function(pra){
              this.b =pra
          }
      }



  },
 // 此處聲明的方法，也混入了vue實例中，vue實例也進行了代理
  methods:{
      // 通過計算屬性重置
    method1(){
        this.compute_b = "liubei"
    },
   
  },


  watch:{
      /* 函數形式監聽*/
    //   str:function(newval,oldval){
    //       console.log(newval,oldval,".....................監聽器監聽。。。")
    //   }

    /* 對象形式監聽，還可配置監聽參數*/
    str:{
        handler:function(newval,oldval){
            console.log(newval,oldval,".....................監聽器監聽。。。")
        },
        deep:true,// 深度監聽  若監聽對象時嵌套對象時，其任何 屬性改變時，都會被調用
    },
  }

}
</script>

vue選項—DOM

• el

只在由new創建的vue實例中才使用。提供一個頁面上已經存在的dom元素，用來掛載掛載創建的vue實例；
如果在實例化時存在這個選項，實例將立即進入編譯過程，否則，需要顯式調用 vm.$mount() 手動開啓編譯

• template

內容通常爲字符串模板 ，作爲一個vue實例的標識；
模板將會 替換 掛載的元素。掛載元素的內容都將被忽略，除非模板的內容有分發插槽；
如果 Vue 選項中包含渲染函數，該模板將被忽略

• render

類型：(createElement: () => VNode) => VNode
字符串模板的代替方案，允許你發揮 JavaScript 最大的編程能力。該渲染函數接收一個 createElement 方法作爲第一個參數用來創建 VNode
如果組件是一個函數組件，渲染函數還會接收一個額外的 context 參數，爲沒有實例的函數組件提供上下文信息

• renderError

類型：(createElement: () => VNode, error: Error) => VNode
只在開發者環境下工作。當 render 函數遭遇錯誤時，提供另外一種渲染輸出。其錯誤將會作爲第二個參數傳遞到 renderError。這個功能配合 hot-reload 非常實用

vue選項—資源

• directives

組件內，可通過此選項定義指令;如下示例
也可通過Vue.directives定義全局指令，詳見vue全局api中的directives

/*組件內部可通過directives選項定義組件內部可使用的指令，下面定義了v-color指令*/
 directives:{
    color:function(el,binding){
      el.style.color = binding.value
    }
  },

• components

在組件內部的選項中，註冊外部引入的組件，註冊之後，外部組件才能在此組件中使用；
定義全局組件，詳細看vue全局api中的component

<template>
  <div class="login base">
    /*註冊過後的組件，才能在此處正常使用*/
    <index />
  </div>
</template>
import index from './index.vue'
export default {
  name: 'login',
  // 此處註冊引入的外部組件
  components:{
    index
  },
}

• filters

過濾器，常用於對某些數據的格式化，比如數字用逗號分開，翻譯管理部門等等，在vue中通常用在兩個地方：雙花括號插值和 v-bind 表達式
雙花括號中這樣使用： {{ message | capitalize }} ，capitalize爲定義的過濾器名；
v-bind表達式中這樣使用：

，formatId 爲定義的過濾器名
過濾器可以在組件內定義，也可以全局定義,全局過濾器詳細看vue全局api中的filters

/*在組件內部，通過filters選項，定義局部的過濾器，下面爲一個格式化字符串的過濾器（字符串轉首字母大寫）*/
filters: {
    // 首字母大寫
    capitalize: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }, 
 

vue選項—組合

• mixins

mixins 選項接受一個混入對象的數組；
這些混入實例對象可以像正常的實例對象一樣包含選項，他們將在 Vue.extend() 裏最終選擇使用相同的選項合併邏輯合併。> 假如你混入包含一個鉤子而創建組件本身也有一個，兩個函數將被調用。
Mixin 鉤子按照傳入順序依次調用，並在調用組件自身的鉤子之前被調用
通常會把vue實例一些可複用的功能方法，放置到mixins中；
也可以創建全局混入，詳見vue全局api中的mixin

//自定義混入對象，包含了一個鉤子函數
var mixin = {
  created: function () { console.log(1) }
}
// 創建的vue實例本身就有此鉤子函數，當再混入同樣的鉤子函數時，兩個函數都將被執行，並且被混入的函數先被執行
var vm = new Vue({
  created: function () { console.log(2) },
  mixins: [mixin]
})
// => 1
// => 2

• extends

類型爲函數或者對象
組件內部，擴展一個組件，若要全局擴展一個組件，則需要使用vue全局api中的extend方法
extends用法和mixins很相似,只不過接收的參數是簡單的選項對象或構造函數,所以extends只能單次擴展一個組件

• parent

此選項指定已創建實例的父實例，子實例可通過this.$parent訪問父實例，父實例的this.$children也包含了此子實例，

• provid/inject

provide：Object | () => Object
inject：Array | { [key: string]: string | Symbol | O
provide 和 inject 主要爲高階插件/組件庫提供用例。並不推薦直接用於應用程序代碼中。
這對選項需要一起使用，以允許一個祖先組件向其所有子孫後代注入一個依賴，不論組件層次有多深，並在起上下游關係成立的時間裏始終生效

vue選項—其他

• name

組件名稱

• delimiters

類型：Array
默認值：["{{", “}}”]
限制：這個選項只在完整構建版本中的瀏覽器內編譯時可用。
改變純文本插入分隔符

• functional

使組件無狀態 (沒有 data ) 和無實例 (沒有 this 上下文)。他們用一個簡單的 render 函數返回虛擬節點使他們更容易渲染

• model

允許一個自定義組件在使用 v-model 時定製 prop 和 event。默認情況下，一個組件上的 v-model 會把 value 用作 prop 且把 input 用作 event，但是一些輸入類型比如單選框和複選框按鈕可能想使用 value prop 來達到不同的目的。使用 model 選項可以迴避這些情況產生的衝突。

• inheritAttrs

默認情況下父作用域的不被認作 props 的特性綁定 (attribute bindings) 將會“回退”且作爲普通的 HTML 特性應用在子組件的根元素上。當撰寫包裹一個目標元素或另一個組件的組件時，這可能不會總是符合預期行爲。通過設置 inheritAttrs 到 false，這些默認行爲將會被去掉。而通過 (同樣是 2.4 新增的) 實例屬性 $attrs 可以讓這些特性生效，且可以通過 v-bind 顯性的綁定到非根元素上。
注意：這個選項不影響 class 和 style 綁定

• comments

類型：boolean
默認值：false
限制：這個選項只在完整構建版本中的瀏覽器內編譯時可用。
當設爲 true 時，將會保留且渲染模板中的 HTML 註釋。默認行爲是捨棄它們