vue开发优化方法【基于vue2】

1、require.context()——>源自webpack

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

2.这样写大量重复的代码，可以使用require.context优化，如：
const path = require('path')
const files = require.context('@/components/home',false,/.vue$/) //遍历当前目录下home文件夹的所有.vue结尾的文件，不遍历子目录
const modules = {}
files.keys().forEach(key=>{
const name = path.basename(key,'.vue')
modules[name] = files(key).default || files(key)
})
components:modules
这样不管页面引入多少组件，都可以使用这个方法
3.API方法

2.watch

2.1常用用法
1.场景：表格初始进来需要调查询接口getLsit(),然后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(newVal,oldVal){
console.log(newVal)
console.log(oldVal)
},
deep:true
}
}
此时发现oldVal和newVal值一样；因为他们索引同一个对象/数组，Vue不会保留修改之前值的副本；所以深度监听虽然可以监听到对象的变化，但是无法监听到具体对象里面那个属性的变化

3. 14种组件通讯

3.1props
这个应该非常熟悉，就是父传子的属性；props值可以是一个数组或对象；
//数组：不建议使用
props:[]
对象
props:{
inpVal:{
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
这个也应该非常常见，触发子组件触发父组件给自己绑定事件，其实就是子传父的方法
//父组件
<home @title='title'>
//子组件
this.$emit('title',[{title:'这是title'}])
3.3 vuex
1.这个也是常用的，vuex是一个状态管理器 2.是一个独立的插件，适合数据共享多的项目里面，因为如果只是简单的通讯，使用起来比较笨重 3.API
state:定义储存数据的仓库，可通过this.$store.state或mapState访问
getter:获取store值，可认为是store的计算属性，可通过this.$store.getter或mapGetters访问
mutation:同步改变store值，为什么会设计成同步，因为mutation是直接改变store值，vue对操作进行了记录，如果是异步无法追踪改变。可通过mapMutations调用
action:异步调用函数执行mutation，进而改变store值，可通过this.$dispatch或mapActions访问
modules:模块，如果状态过多，可以拆分成模块，最后在入口通过...结构引入
3.4 attrs和listeners
2.4.0 新增 这两个是不常用属性，但是高级用法很常见；1.attrs场景：
如果父传子有很多值，那么在子组件需要定义多个props解决：attrs获取父传子中未被props定义的值
//父组件

子组件
mounted(){
console.log(this.$attrs) //{title: "这是标题", "80", height: "80", imgUrl: "imgUrl"}
}

2. listeners场景：子组件需要调用父组件的方法解决：父组件的方法可以通过v-on="listeners"传入内部组件————在创建更高层次的组件时非常有用
//父组件
<home @change="change"/>
子组件
mounted(){
console.log(this.$listeners)//即可拿到change事件
}

如果是孙组件要访问父组件的属性和调用方法，直接一级一级传下去就可以
3.inheritAttrs
//父组件

//子组件
mounted(){
console.log(this.$attrs)//{title:'这是标题'，'80',height:'80',imgUrl:'imgUrl'}
},
inheritAttrs默认值为true，true的意思是将父组件中除了props外的属性，添加到子组件的根节点上(说明，即使设置为将inheritAttrs:false后，属性就不会显示在根节点上了)




3.5 provide和inject

2.2.0新增：描述：provide和inject主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中，并且这对选项需要一起使用，以允许一个祖先组件向其它 所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

父组件： provide:{ //provide是一个对象，提供一个属性或方法 foo:'这是foo', fooMethod:()=>{ console.log('父组件fooMethod被调用') } },

子或子孙组件
inject:['foo','fooMethod'],//数组或对象，注入到子组件
mounted(){
	this.fooMethod()
	console.log(this.foo)
}
在父组件下面所有的子组件都可以利用inject

provide和inject绑定并不是可响应的。这是官方刻意为之的。然而，如果你传入一个可监听的对象，那么其对象的属性还是可响应的，对象是因为是引用类型
//父组件：
provide:{
foo:'这是foo'
},
mounted(){
this.foo='这是新的foo'
}

//子或者子孙组件
inject:['foo'],
mounted(){
	console.log(this.foo) //子组件打印的还是‘这是foo’
}

provide和inject响应方法
父组件
provide(){
return {
staticValue:this.staticValue,//直接返回值，不可响应
staticObject:this.staticObject,//返回一个对象，可响应
getReactiveValue:()=>this.staticValue//返回一个对象的函数，可响应
}
},
子组件
inject:['staticValue','staticObject','getReactiveValue'],
computed:{
reactiveValue(){
return this.getReactiveValue(); //返回注入的对象函数，通过计算属性来监听值的变化
},
}
所以provide返回一个对象或者函数是可以响应的，因为对象和函数是引用类型，实际上改变也不是vue做的，而是JS的引用类型特性