23.9.26稻香湖面试记录

82 阅读2分钟

1. 自我介绍

2. Vue钩子created X mounted

created:实例创建完成,属性和方法、数据data,watch/event事件回调。但是没挂载所以el还没有。mounted:实例挂载,el被刚挂载的vm.el还没有。 mounted:实例挂载,el被刚挂载的vm.el替换,但是不保证此时所有的子组件都挂载完成了。

3. Vue通信-父子&兄弟

  1. 父到子:
  • @自定义属性,子的props接收“自定义属性”。
  • provide,return一个{},子孙组件reject接收。
  • 父传子多属性值,子获取attrs是多属性值,attrs是多属性值,listeners是多个方法。
  1. 子到父:
  • 方法1:数据单向传输,所以原理是子通知父,父修改后自动传输到子。子触发$emit('fn_sendMsg', childMsg),父调用子组件时,添加自定义方法<child @fn_sendMsg=“fn_getChildMsg”>,子触发$emit后父接收到信号,触发自定义方法里的“fn_getChildMsg”,方法自带参数,就是子传递来的,父修改值后会自动传输到子。
  • 方法2:使用$parent & $children。在父组件$children可以返回子组件列表,$children[0].msg可以直接取值和方法。
  • ref<childref="ref_child1"></child>在父组件直接用this.ref。 `<child ref="ref\_child1"></child>`在父组件直接用this.refs.ref_child1.msg可以取值。
  • 方法3:@callback。父调用子时@callback="fn_callback",子用props接收callback: Function,子触发callback(参数)
  1. 非父子
  • 兄弟。父做桥梁,兄弟1用$emit传给父,父用props传给兄弟2.
  • bus.js。发送方this.bus.emit(bus1,msg),接收方this.bus.emit('bus1','msg'),接收方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加载)