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
复制代码