1、vue生命周期

• 生命周期示意圖

生命周期示意圖

2、computed 和 watch 的區(qū)別

• computed：是計(jì)算屬性娜庇，依賴其他屬性的值塔次。具有緩存，只有他依賴的值發(fā)生變化名秀，下一次取當(dāng)前屬性時才會重新計(jì)算励负。這樣避免了每次取值時都重新計(jì)算。內(nèi)部不允許改變其他屬性的值泰偿。切必須返回當(dāng)前屬性值。
• watch：觀察作用蜈垮。用于監(jiān)聽某個值變化后的回調(diào)操作耗跛。而且watch內(nèi)部可以允許異步操作裕照。內(nèi)部可以同時改變多個屬性的值或者執(zhí)行多個方法。

3调塌、vue中 父組件和子組件生命周期函數(shù)執(zhí)行的順序

按照不同的過程可以分為4類：

1. 加載渲染的過程
   父組件beforeCreate -> 父組件create -> 父組件beforeMounted -> 子組件beforeCreate -> 子組件create -> 子組件beforeMount -> 子組件 mounted -> 父組件 mounted
2. 子組件更新
   父組件 beforeUpdate -> 子組件 beforeUpdate -> 子組件 updated -> 父組件updated
3. 父組件更新
   父組件 beforeUpdate -> 父組件updated
4. 銷毀
   父組件 beforeDestroy -> 子組件 beforeDestroy -> 子組件 destroyed -> 父組件 destroyed

4晋南、v-model 原理

v-model指令實(shí)際上就是語法糖，在表單元素上創(chuàng)建雙向數(shù)據(jù)綁定羔砾。根據(jù)不同的表單元素负间，綁定不同的屬性值和事件實(shí)現(xiàn)雙向數(shù)據(jù)綁定。

• input[type='text']姜凄、textarea 綁定屬性value 和 input 事件

<input v-model="a">
// 相當(dāng)于
<input :value="a" @input="a = $event.target.value">

• input[type='checkbox']政溃、input[type='radio'] 綁定屬性checked 和 change 事件

<input type="checkbox" v-model="a">
// 相當(dāng)于
<input :checked="a" @change="a = $event.target.checked">

• select 綁定屬性value 和 change 事件

<select v-model="a"></select>
// 相當(dāng)于
<select :value="a" @change="a = $event.target.value"></select>

• 在自定義組件上使用v-model，相當(dāng)于給自定義組件傳入一個屬性 value态秧， 并且綁定一個input方法

// 父組件：
<Parent v-model="a"></Parent>

// 子組件：
<template>
  <div>{{value}}</div>
</template>
<script>
export default {
  props:{
    value: String
  },
  methods: {
    test(){
       this.$emit('input', 'aaaaaa')
    },
  },
}
</script>

5董虱、vue 組件間通信的方法

1. props / $emit() 用于父子組件間的通信
2. ref和 $parent / $children 用于父子組件間的通信

• ref 綁定在DOM元素上是返回的是DOM元素，綁定在Vue組件上時返回的是Vue組件的實(shí)例對象

3. EventBus $emit() / $on 用于父子組件申鱼、隔代組件和兄弟組件間的通信

// bus.js
import Vue from 'vue'
export default new Vue()

// 在組件中created()方法中監(jiān)聽事件
import Bus from 'path/to/bus'
export default {
  created(){
    Bus.$on('clickme', target => {
      console.log('clickme', target)
    })
  }
}

// 在其他組件中觸發(fā)事件
import Bus from 'path/to/bus'
export default {
  methods:{
    test(){
      Bus.$emit('clickme', '啦啦啦啦啦')
    }
  }
}

4. $attrs / $listeners用于隔代組件間通信

通過$attrs向子孫組件傳遞屬性
通過$listeners子孫組件向爺爺組件$emit()通信
看到一篇文章講解很詳細(xì)
文章的地址

5. provide / inject 用于隔代組件間通信

// 爺爺組件
<script>
export default {
  provide:{
    a:1
  }
}
</script>

// 孫子組件
<template>
  <div>{{ a }}</div>
</template>
<script>
export default {
  inject:{
    a:{
      defalut: 0
    }
  }
}
</script>

6. vuex 用于父子組件愤诱、隔代組件、兄弟組件間通信
   vuex官網(wǎng)