詳細聊聊Vue中的options選項

2022-03-22 13:00:10

Vue中的options選項

options的五類屬性

資料： data，props，propsdata，computed，methods，watch
DON: el，template，render，rebderError
生命週期勾點函數：beforeCreate，created，beforeMount，mounted，beforeUpdate，updated，activated，deactivated，beforeDestroy，destroyed，erroCaptured。
資源：directives，filters，components
組合：parent，mxins，extends，provide，inject

入門屬性

el（掛在點）

new Vue({
    el："#app"
    template:`<div>我是小明</div>`
})
可以使用$mount代替
new Vue({
    template:`<div>我是小明</div>`
}).$mount("#app")

data（內部資料）支援物件和函數，優先使用函數
- 會被Vue監聽
- 會被Vue範例代理
- 每次data的讀寫都會被Vue監聽
- Vue會在data變化是更新UI

物件
new Vue({
    template:"<div>{{n}}</div>",
    data:{
        n:0
    }
}).$mount('#app')
函數
vue非完整版只支援函數
new Vue({
    template:"<div>{{n}}</div>",
    data(){
        return {
            m:5
        }
    }
})$mount('#app')

methods（方法）事件處理常式或者普通函數

new Vue({
    template:"<div>{{n}}{{ add()}} <button @click="add">按鈕</button></div>",
    data:{
        n:0
    },
    methods:{
        add(){
    	console.log('我可以是事件處理常式也可以是普通函數')
}
        }
}).$mount('#app')

components（vue元件：注意大小寫）三種方式

註冊全域性元件
Vue.component('Deon1', {
  template: "<h2>全域性元件</h2>"
})
註冊區域性元件
const deon2 = {
  template: "<h2>區域性元件 {{n}}</h2>",
   //在組建中data必須使用函數
  data() {
    return {
      n: "小明"
    }
  }
}
new Vue({
  components: {
    Deon2: deon2,
    Deon3:{
      template:"<h2>元件3</h3>"
  }
  },
  template: `
    <div>頁面
    <Deon1></Deon1>
    <Deon2></Deon2>
 	<Deon3></Deon3>
    </div> 
  `
}).$mount('#app')

使用vue檔案新增元件

deon4.vue檔案

<template>
  <div>我是deon.vue檔案{{ name }}</div>
</template>
<script>
export default {
  data() {
    name: "元件4";
  },
};
</script>
<style scoped>
div {
  border: 1px solid red;
}
</style>

main.js

import Deon4 from './deon4.vue'
Vue.component('Deon1', {
  template: "<h2>全域性元件</h2>"
})
const deon2 = {
  template: "<h2>區域性元件 {{n}}</h2>",
  //在組建中data必須使用函數
  data() {
    return {
      n: "小明"
    }
  }
}
new Vue({
  components: {
    Deon2: deon2,
    Deon3: {
      template: "<h2>元件3</h3>"
    },
    Deon4
  },
  template: `
    <div>頁面
    <Deon1></Deon1>
    <Deon2></Deon2>
    <Deon3></Deon3>
    <Deon4><Deon4>
    </div> 
  `
}).$mount('#app')

常用的四個生命周勾點函數
- created: 範例出現在記憶體中
- mounted:範例出現在頁面中觸發
- updated:範例出現了變化觸發
- destroyed:範例被銷燬了觸發

new Vue({
    template:"<div>{{n}}</div>",
    data:{
        n:0
    }，
     created() {
    console.log("範例出現在記憶體中了觸發");
  },
  mounted() {
    console.log("範例出現在頁面中觸發");
  },
  updated() {
    console.log("範例出現了變化觸發");
  },
  destroyed() {
    console.log("範例被銷燬了觸發");
  }
}).$mount('#app')

props（外部資料）父元件想子組傳值
- name="n"（傳入字串）
- :name="n"（傳入this.n資料）
- :fn="add":（傳入this.add函數）

new Vue({
  components: {
    Deon1: {
      props: ["m"],
      template: "<div>{{m}}</div>"
    }
  },
  template: `<div><Deon1 :m="m"></Deon1></div>`,
  data: {
    m: 666
  }
}).$mount('#app')

computed（計算屬性）

不需要加括號
他會根據依賴是否變化來快取（如果依賴沒有變化，就不會重新結算）
型別：{ [key: string]: Function | { get: Function, set: Function } }

用途

被計算出來的屬性就是計算資料
例子1 使用者名稱展示
例子2 列表展示

快取

如果依賴的屬性沒有變，化就不會重新計算
getter/setter預設不會做快取，Vue做了特殊處理
如何快取？看範例這是範例不是Vue的實現

範例：

var vm = new Vue({
  data: { a: 1 },
  computed: {
    // 僅讀取
    aDouble: function () {
      return this.a * 2
    },
    // 讀取和設定
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
vm.aPlus   // => 2
vm.aPlus = 3
vm.a       // => 2
vm.aDouble // => 4

watch（監聽）

data變化，就會執行函數
options.watch用法
this.$watch用法
deep：偵聽的物件的 property 改變時被呼叫，不論其被巢狀多深
immediate：偵聽開始之後被立即呼叫
型別：{ [key: string]: string | Function | Object | Array }

用途

當資料變化時，執行一個函數
例子1復原
例子2 模擬computed 這樣很傻，一般不這樣做

何為變化

看範例

原本 let obj = {a:'a'} 現在 obj={a:'a'} 請問
obj變了沒有. obj.a變了沒有
簡單型別看至，複雜型別(物件)看地址
這其實就是 ===的規則

範例：

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 方法名
    b: 'someMethod',
    // 該回撥會在任何被偵聽的物件的 property 改變時被呼叫，不論其被巢狀多深
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true//監聽是否深入
    },
    // 該回撥將會在偵聽開始之後被立即呼叫
    d: {
      handler: 'someMethod',
      immediate: true
    },
    // 你可以傳入回撥陣列，它們會被逐一呼叫
    e: [
      'handle1',
      function handle2 (val, oldVal) { /* ... */ },
      {
        handler: function handle3 (val, oldVal) { /* ... */ },
        /* ... */
      }
    ],
    // watch vm.e.f's value: {g: 5}
    'e.f': function (val, oldVal) { /* ... */ }
  }
})
vm.a = 2 // => new: 2, old: 1

注意，不應該使用箭頭函數來定義 watcher 函數 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭頭函數繫結了父級作用域的上下文，所以 this 將不會按照期望指向 Vue 範例，this.updateAutocomplete 將是 undefined