vue模糊的知識點

1. v-model實現

父組件

<template>
  <div class="home">
    <model-test v-model="kk"/>
    <p>{{kk}}</p>
  </div>
</template>

<script>
import ModelTest from '@/components/ModelTest'
export default {
  name: 'home',
  data () {
    return {
      kk: 1
    }
  },
  components: {
    ModelTest
  }
}
</script>
複製代碼

子組件

<template>
  <button class="add" @click="add">ADD</button>
</template>

<script>
export default {
  props: {
    value: Number
  },
  data () {
    return {
      a: 1
    }
  },
  methods: {
    add() {
      this.a++
      this.$emit('input', this.a)
    }
  }
}
</script>
複製代碼

.sync

父組件

<props-test :value.sync="kk" />
複製代碼

子組件

<template>
  <div>
    <button class="add" @click="add">TEST</button>
    <p>{{value}}</p>
  </div>
</template>

<script>
export default {
  props: {
    value: Number
  },
  methods: {
    add() {
      this.$emit('update:value', 11111)
    }
  }
}
</script>
複製代碼

生命週期

segmentfault.com/img/bVEs9x?…

data初始化

由於 props 要比 data先完成初始化，因此能夠利用這一點給 data 初始化一些數據進去：

export default {
  data (vm) {
    return {
      buttonSize: vm.size
    }
  },
 props: {
   size: String
 }
}
複製代碼

善用watch的immediate屬性

watch: {
  searchInputValue:{
    handler: 'fetchPostList',
    immediate: true
  }
}
複製代碼

computed, watch, 方法區別

computed的數據會緩存，只有依賴的數據變化纔會執行，就是說kk值得變化，致使執行update生命週期，watch和方法都會執行，可是computed不會

<template>
  <div class="home">
    <model-test v-model="kk" />
    <p @click="cc">button</p>
    <p>data{{cc()}}</p>
    <p>{{now}}</p>
  </div>
</template>

<script>
import ModelTest from '@/components/ModelTest'
import PropsTest from '@/components/PropsTest'
export default {
  name: 'home',
  data() {
    return {
      kk: 1,
      aa: 1
    }
  },
  components: {
    ModelTest,
    PropsTest
  },
  computed: {
    now () {
      console.log('com')
      return this.aa + 3
    }
  },
  watch: {
    kk () {
      console.log('watch')
      return this.kk + '3'
    }
  },
  methods: {
    cc () {
      console.log('cc')
      return this.aa + 3
    }
  }
}
</script>

複製代碼

在vue中使用lodash庫中的debounce

this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
複製代碼

props改變怎麼更新子組件數據

每次父級組件發生更新時，子組件中全部的 prop 都將會刷新爲最新的值。這意味着你不該該在一個子組件內部改變 prop。若是你這樣作了，Vue 會在瀏覽器的控制檯中發出警告。
複製代碼

Vue.js用Key值來管理可複用元素

v-for循環時爲啥最好不用key作索引

* key值 value值
 * 1     蘋果
 * 2     橘子
 * 3     香蕉
 
 當數組倒序時，蘋果key變成3，確定會銷燬重建的，可是key值如果pingguo，就是調下順序
複製代碼

template中不能寫v-show

watch和computed還有method區別

computed不能寫異步代碼
watch能夠
method當模板更新了值就會變
複製代碼

destoryed和beforeDestory區別

destoryed後，this上綁定的事件，監聽都會被銷燬
vm.$destory
複製代碼

組件通訊：

props emit
$attrs $listeners A->B->C
$parent $children
#refs
provide inject
eventBus
vuex
複製代碼