标签：vue watch vue2 props 组件 优化 监听 store
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"}
}
待续 》》》
标签：vue,watch,vue2,props,组件,优化,监听,store 来源： https://www.cnblogs.com/huayang1995/p/15609073.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。