前言

Vue 3.x 的Pre-Alpha 版本。后面应该还会有 Alpha、Beta 等版本,预计至少要等到 2020 年第一季度才有可能发布 3.0 正式版;
所以应该趁还没出来加紧打好 Vue2.x 的基础;

Vue基本用法很容易上手,但是有很多优化的写法你就不一定知道了,本文从列举了 36 个 vue 开发技巧;

后续 Vue 3.x 出来后持续更新.

1.require.context()

1.场景:如页面需要导入多个组件,原始写法:

import titleCom from '@/components/home/titleCom'
import bannerCom from '@/components/home/bannerCom'
import cellCom from '@/components/home/cellCom'
components:{titleCom,bannerCom,cellCom}

2.这样就写了大量重复的代码,利用 require.context 可以写成

const path = require('path')
const files = require.context('@/components/home', false, /\.vue$/)
const modules = {}
files.keys().forEach(key => {
 const name = path.basename(key, '.vue')
 modules[name] = files(key).default || files(key)
})
components:modules

这样不管页面引入多少组件,都可以使用这个方法

3.API 方法

实际上是 webpack 的方法,vue 工程一般基于 webpack,所以可以使用
require.context(directory,useSubdirectories,regExp)
接收三个参数:
directory：说明需要检索的目录
useSubdirectories：是否检索子目录
regExp: 匹配文件的正则表达式,一般是文件名

2.watch

2.1 常用用法

1.场景:表格初始进来需要调查询接口 getList(),然后input 改变会重新查询

created(){
 this.getList()
},
watch: {
 inpVal(){
 this.getList()
 }
}

2.2 立即执行

2.可以直接利用 watch 的immediate和handler属性简写

watch: {
 inpVal:{
 handler: 'getList',
  immediate: true
 }
}

2.3 深度监听

3.watch 的 deep 属性,深度监听,也就是监听复杂数据类型

watch:{
 inpValObj:{
 handler(oldVal,newVal){
  console.log(oldVal)
  console.log(newVal)
 },
 deep:true
 }
}

此时发现oldVal和 newVal 值一样;

因为它们索引同一个对象/数组,Vue 不会保留修改之前值的副本;

所以深度监听虽然可以监听到对象的变化,但是无法监听到具体对象里面那个属性的变化

3. 4种组件通讯

3.1 props

这个应该非常属性,就是父传子的属性;

props 值可以是一个数组或对象;

// 数组:不建议使用
props:[]

// 对象
props:{
 type:Number, //传入值限定类型
 // type 值可为String,Number,Boolean,Array,Object,Date,Function,Symbol
 // type 还可以是一个自定义的构造函数，并且通过 instanceof 来进行检查确认
 required: true, //是否必传
 default:200, //默认值,对象或数组默认值必须从一个工厂函数获取如 default:()=>[]
 validator:(value) {
 // 这个值必须匹配下列字符串中的一个
 return ['success', 'warning', 'danger'].indexOf(value) !== -1
 }
}

3.2 $emit

这个也应该非常属性,触发父组件的自定义事件,其实就是父传子的方法