宏景科技 - 前端面试
面试时间：2023-04-03
公司全称：宏景科技股份有限公司
公司位置：广州黄浦区创意大厦B27楼
面试题
老同事了，技术面尬聊。
笔试题
v-show 和 v-if 的区别？v-show 和 keep-alive 的区别？
查看答案
v-show 通过 CSS 属性 display 控制元素显隐。
v-if 通过元素创建和销毁控制元素显隐。
keep-alive 是 vue 框架层级进行的 JS 对象渲染。
为何 v-for 要用 key？
查看答案
使用 key 作为唯一标识，为了高效的更新虚拟 DOM。
简述Vue组件生命周期（有子组件的情况）
查看答案
一、加载渲染过程
父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted.
二、子组件更新过程
父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
三、父组件更新过程
父 beforeUpdate -> 父 updated
四、销毁过程
父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed
描述组件渲染和更新过程
查看答案
渲染过程：
解析模板为 render 函数；
触发响应式，监听 data 属性 getter，setter；
执行 render 函数，生成 vnode, patch(elem, vnode)。
更新过程：
修改 data，触发 setter；
重新执行 render 函数，生成 newVnode；
patch(vnode, newVnode)。
双向数据绑定 v-model 的实现原理
查看答案
v-bind 绑定一个 value 属性；
v-on 给当前元素绑定 input 事件，使用
$event.target.value给变量重新赋值。
computed 有何特点，computed 和 watch 的区别，computed 和 methods 的区别
查看答案
computed 计算属性基于 data 中声明过或 props 传递过来的数据通过计算得到一个新值，新值会根据已知值得变化而变化，且 computed 具有缓存功能，多次使用同一个 computed 计算得属性值，只会执行一次 computed 内定义的 function，直到依赖项改变才会重新计算。
computed 和 watch 的区别：对于多个监听对象要进行同一操作，watch 需要监听多次，而 computed 只需要执行一次。在执行异步或开销比较大的操作时，watch 方式更合适。
computed 和 methods 的区别：computed 只有依赖项改变才会重新计算，methods 每次调用都会执行。
Vue 组件之间的通信方式
查看答案
通过 props 传递
通过
$emit触发自定义事件传递使用 ref
EventBus
$parent 或者 $root
v-bind="$attrs"和v-on="$listeners"Provide 和 Inject
Vuex 或 Pinia
何时需要使用 keep-alive？
查看答案
进行组件缓存，优化性能时。
何时需要使用 beforeDestroy？
查看答案
清除定时器
解绑 $on
接触事件绑定
Vue 如何监听数组变化？
查看答案
通过重写数组方法实现。步骤如下：
先获取原生 Array 的原型方法，因为拦截后还是需要原生的方法帮我们实现数组的变化。
对 Array 的原型方法使用 Object.defineProperty 做一些拦截操作。
把需要被拦截的 Array 类型的数据原型指向改造后原型。
Vue 常见性能优化
查看答案
加载性能。1. 按需记载 2. 可视加载 3. 图片懒加载
SEO优化。1. 服务端渲染 SSR
打包优化。1. CDN 加速 2. chunk 抽取
缓存和压缩：1. 客户端缓存 2. Gzip 压缩
描述一下 Vuex
查看答案
“Vuex 是一个状态管理库，实现对数据的集中式管理，方便其他组件存取数据。
uni-app 页面的生命周期执行过程
查看答案
beforeCreate -> onLoad -> onShow -> created -> beforeMount -> onReady -> mounted
uni-app 中的跳转方式有哪些？
查看答案
共 6 种跳转方式。
uni.navigateTo：保留当前页面，跳转到应用内的某个页面。uni.redirectTo：关闭当前页面，跳转到应用内的某个页面。uni.reLaunch：关闭所有页面，打开到应用内的某个页面。uni.switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。uni.navigateBack：关闭当前页面，返回上一页面或多级页面。uni.preloadPage：预加载页面，是一种性能优化技术。被预加载的页面，在打开时速度更快。
uni-app 的传参方式有哪些？
查看答案
<navigator>标签传参uni.navigateTo跳转传参uni.emit()和uni.on()