淺析vue的幾個構造選項

什麼是構造選項

在vue中，咱們確定會看見如下代碼

new Vue({})
複製代碼

new Vue() 的實例 封裝了對視圖的全部操做，包括數據讀寫、事件綁定、DOM更新。 其中，new Vue接受的屬性，就叫作構造屬性（options）

---

構造選項的五類屬性

• 數據 ：data、props、propsData、computed、methods、watch
• DOM ：el、template、render、renderError
• 生命週期鉤子：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、activated、deactivated、beforeDestory、destoryed、errorCaptured
• 資源：directives、filters、compontents
• 組合：parent、mixins、extends、provide、inject

接下來，我會介紹一下常見的幾個屬性。

---

el/mount 掛載點

如下代碼以vue完整版爲例

所謂掛載就是將tempalte中的代碼放進某個容器，假如該容器又一個id，那麼該id極爲掛載點。

new Vue({
  template:`<div>該文本被掛載到掛載點上</div>`,
  el:'#app',
})
複製代碼

以上代碼就表示template被掛在到'#app'上，'#app'會被替換。

上面的代碼還有一種寫法

new Vue({
  template:`<div>該文本被掛載到掛載點上</div>`,
}).$mount('#app')
複製代碼

使用mount進行鏈式調用和直接聲明掛載點的效果是同樣的。

---

data 內部數據

data表示內部數據，它能夠替換掉內部template中佔位符的內容。

new Vue({
  data:{n:0},
  //對象
  template:`<div>{{n}}</div>`,
}).$mount('#app')

new Vue({
  data(){
    return {n:0}
  },
  //函數
  template:`<div>{{n}}</div>`,
}).$mount('#app')
複製代碼

咱們能夠看到，data能夠寫成對象形式，也能夠寫成函數形式。

可是，在通常咱們優先使用函數形式。

由於，若是寫成對象形式，若是咱們須要屢次引用渲染，那麼因爲對象在內存中是以傳址的形式被引用的，會形成變量的污染。

但若是寫成函數的形式，每次被引用時，運行函數生成變量，那麼就不存在污染的狀況，由於每一個變量都是新的，互相沒有關係。

---

props 外部數據

data表示內部數據，在實例內部可調用，但想調用外部的數據，須要在外部使用props傳入。

//往要傳入的組件上寫明傳入的內容
import App1 from './components/app1.vue'

new Vue({
  components:{App1},
  template: `
    <section>
      <App1 message="hello props"/>
      //寫上內容
    </section>
  `
,
}).$mount('#app')

//組件內部接受props ，並使用
<template>
  <section>
    {{message}}
  </section>
</template>

<script>
  export default {
    props:['message']
  }
</script>
複製代碼

若是要傳變量，只需在message前面加上 : .即:message。

若是，將變量n傳入組件，組件內對變量進行修改，不會影響到外部的n

若是，將變量n和方法fn一同傳入，在組件內調用fn，那麼n在內外部會同時更新。（由於實際上內部fn調用時，改變的是外部的n，而決定內部n的又是外部的n）

---

methods 方法

在vue中，咱們的方法統一寫在method對象內部。而後就能夠直接在template中調用。

new Vue({
  data() {
    return {
      n: 0,
      array: [1, 2, 3, 4, 5, 6, 7, 8]
    }
  },

  template: `
    <section>
      <div>{{n}}</div>
      <div>{{arrayFilter(array)}}</div>
    </section>
  `,

  methods: {
    arrayFilter(arr) {
      return arr.filter(item => item % 2 === 0)
    }
  }
}).$mount('#app')
複製代碼

method 中的方法，有一個特性，就是每次調用，視圖中的全部涉及method的數據都會被更新一次。

new Vue({
  data() {
    return {
      n: 0,
      array: [1, 2, 3, 4, 5, 6, 7, 8]
    }
  },

  template: `
    <section>
      <div>{{n}}</div>
      <div>{{arrayFilter(array)}}</div>
      <button @click="add">+1</button>
    </section>
  `,

  methods: {
    arrayFilter(arr) {
      console.log('執行了')
      return arr.filter(item => item % 2 === 0)
    },
    add(){
      return this.n += 1
    }
  }
}).$mount('#app')
複製代碼

以此代碼爲例，每次點擊按鈕，array竟然會被更新。

---

components 組件

組件與實例之間的區別，被用來調用的就稱之爲組件，不然就是實例。

components接受的參數和new vue是同樣的

(建議組件名首字母使用大寫，文件名使用小寫)

• 組件的使用（vue寫法）

//組件中
<template>
  <section>
    {{n}}
  </section>
</template>

<script>
  export default {
    data() {
      return {n: 0}
    }
  }
</script>

<style>

</style>
----------------------------------------------------

//js文件中
import App1 from './components/app1'
//引入組件

new Vue({
  template: `
    <App1/>
  `,
  //在視圖中使用組件
  components:{
    <div>
       <app1/>
    </div>
  }
  //將組件放到對象中
}).$mount('#app')

複製代碼

• 組件的使用（js寫法）

Vue.component('App1', {
  template: `
    <div>{{n}}</div>`,
  data() {
    return {n: 0}
  }
})

new Vue({
  template: `
<div>
 <app1/>
</div>
  `,
}).$mount('#app')
複製代碼

• 組件的使用（js + vue 寫法）

new Vue({
  template: `
    <div>
      <App1/>
    </div>
  `,
  components: {
    'App1': {
      template:
          `
        <div>{{n}}</div>`,
      data() {
        return {n: 0}
      }
    }
  }
}).$mount('#app')
複製代碼

---

生命週期鉤子

鉤子咱們能夠理解爲‘切入點’，生命週期鉤子就是，生命週期不一樣時期的切入點，例如created即表示視圖被建立後。

• created

created表示視圖被建立後。

new Vue({
  data(){
    return { n : 0 }
  },
  template: `
    <div>
      <div>{{n}}</div>
    </div>
  `,
  created(){
    console.log('created')
  },
}).$mount('#app')
複製代碼

經過debugger咱們能夠發現，created被調用時，試圖還未生成。

• mounted

被掛載後，一旦被掛載就會被觸發。

new Vue({
  data(){
    return { n : 0 }
  },
  template: `
      <div>{{n}}</div>
  `,
  mounted(){
    console.log('mounted')
  },
}).$mount('#app')
複製代碼

經過debugger咱們能夠發現，mounted被觸發時，視圖已經被掛載。

• updated

updated表示視圖被更新後

new Vue({
  data(){
    return { n : 0 }
  },
  template: `
    <div>
      <div>{{n}}</div>
       <button @click="add">+1btn</button>
    </div>
  `,
  updated(){
    console.log('updated')
  },
  methods:{
    add(){return this.n+=1}
  }
}).$mount('#app')
複製代碼

• destroyed

destoryed：寫在在組件內部，該組件從頁面中消失/隱藏時就會觸發

import App1 from './components/app1.vue'
new Vue({
  components:{App1},
  data() {
    return {
      visible: true,
    }
  },
  template: `
    <section>
      <button @click="toggle">Btn</button>
      <hr>
      <App1  v-if="visible === true"/>
    </section>
  `,
  methods: {
    toggle() {
      this.visible = !this.visible
    }
  }
,
}).$mount('#app')

//components中
<template>
  <section>
    {{n}}
  </section>
</template>

<script>
  export default {
    data() {
      return {n: 0}
    },
    destroyed(){
      console.log('消亡了')
    }
  }
</script>
複製代碼