vue模糊的知识点

409 阅读2分钟

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

销毁定时器

// 通过$once来监听定时器,在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {            
    clearInterval(timer);                                    
})

提升编译速度

// 安装插件
cnpm i babel-plugin-dynamic-import-node --save-dev

// .bablerc文件的dev增加配置
"env": {
    // 新增插件配置
    "development": {
      "plugins": ["dynamic-import-node"]
    }
    // 其他的内容
    ……
}

// 然后路由文件的引入依旧可以使用之前的异步加载的方式
component: () => import('xxx/xxx')
// 通过注释可以使多个模块打包到一起
component: () => import(/* user */ 'xxx/xxx')

自动化导入模块

当我们某个组件或js文件需要引入多个模块时,一般做法就是,import每个模块,这样显然是相当繁琐的,这时 require.context 函数将派上用场,那个这个函数到底怎么用呢,这里官法介绍是 主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块

require.context 函数接受三个参数:

directory {String} -读取文件的路径
useSubdirectories {Boolean} -是否遍历文件的子目录
gExp {RegExp} -匹配文件的正则

require.context 函数执行后返回一个函数,并且这个函数包含了三个属性:

resolve {Function} -接受一个参数request,request为test文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径
keys {Function} -返回匹配成功模块的名字组成的数组
id {String} -执行环境的id,返回的是一个字符串
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
const path = require('path')

Vue.use(Vuex)

const files = require.context('./modules', false, /\.js$/)
let modules = {}
files.keys().forEach(key => {
  let name = path.basename(key, '.js')
  modules[name] = files(key).default || files(key)
})
const store = new Vuex.Store({
  modules,
  getters
})
export default store

computed和watch有什么区别?

computed有缓存,watch没有,但是进过测试发现,watch也是有缓存的,页面重新渲染不会执行watch函数,是写在模板里的方法没有缓存

Vue.extends 和Vue.component区别

Vue.extends是vue的构造器,可以生成vue的实例,可以挂载到dom上,类似于react的protals
Vue.component用于全局注册组件

vue-skeleton-webpack-plugin插件需要分离css

  css: {
    // 使用 css 分离插件 mini-css-extract-plugin,不然骨架屏组件里的 <style> 不起作用,
    extract: true,
  },