1. 自我介绍
2. Vue钩子created X mounted
created:实例创建完成,属性和方法、数据data,watch/event事件回调。但是没挂载所以el替换,但是不保证此时所有的子组件都挂载完成了。
3. Vue通信-父子&兄弟
- 父到子:
- @自定义属性,子的props接收“自定义属性”。
- provide,return一个{},子孙组件reject接收。
- 父传子多属性值,子获取listeners是多个方法。
- 子到父:
- 方法1:数据单向传输,所以原理是子通知父,父修改后自动传输到子。子触发$emit('fn_sendMsg', childMsg),父调用子组件时,添加自定义方法<child @fn_sendMsg=“fn_getChildMsg”>,子触发$emit后父接收到信号,触发自定义方法里的“fn_getChildMsg”,方法自带参数,就是子传递来的,父修改值后会自动传输到子。
- 方法2:使用$parent & $children。在父组件$children可以返回子组件列表,$children[0].msg可以直接取值和方法。
- refs.ref_child1.msg可以取值。
- 方法3:@callback。父调用子时@callback="fn_callback",子用props接收callback: Function,子触发callback(参数)
- 非父子
- 兄弟。父做桥梁,兄弟1用$emit传给父,父用props传给兄弟2.
- bus.js。发送方this.bus.on('bus1',function(msg){})
4. v-if X v-show
v-show是display:none,v-if是销毁
5. computed X watch ,平时怎么联合使用的
computed计算属性,不常修改,复杂计算,支持缓存。
- 基础用法:computed结合state,直接return值。
- 基础用法:结合组件内其他值,return data1+data2
- 内部拆分为getter和setter,分别return值。get用于显示值,set用于修改原始值。
watch监听属性,常用于监听router变化,父子传值变化等。先声明一个值,然后watch监听。
- watchVal(val,old){this.msg...}
- immediate,首次是否监听
- deep,深层次监听,对象
6. localstorage X sessionstorage X cookie
7. webpack打包时
注意代码压缩,资源路径处理,http地址处理,减少请求次数,按需加载,代码分割,使用缓存,错误处理;性能优化(如CDN加载)