vue开发优化方法基于vue2

Posted 2021-12-03 举个栗子走天下

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: "这是标题", width: "80", height: "80", imgUrl: "imgUrl"}
}

待续 》》》