开启掘金成长之旅!这是我参与「掘金日新计划 · 2更文挑战」的第13天 点击查看活动详情
前言
金三银四的季节又到了,但是今年的环境仿佛还未走出寒冬,在春天未来临之际我们也要做好开春的准备,今天就讲讲面试中可能会遇到的问题。
简述下v2和v3的区别
- 双向绑定的原理发生了改变:
vue2是用Object.defineProperty()对数据进行劫持配合发布订 阅者模式的 方式来实现的。Vue3是使用了ES6的proxyAPI对数据代理
- 生命周期钩子函数:
- setup()函数
接受两个参数(props、context(包含attrs、slots、emit)),执行setup时,组件实例尚未被创建,在setup内部this不指向vue实例,是undefined
window.proxy代替Object.defineProperty
-
defineProperty无法监听数组变化,需要添加手动监听。
-
defineProperty只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历,如果属性值也是对象那么需要深度遍历,显然能劫持一个完整的对象是更好的选择。
-
Proxy可以直接监听数组的变化
-
Proxy有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等等是Object.defineProperty不具备的
-
Proxy返回的是一个新对象,我们可以只操作新的对象达到目的,而Object.defineProperty只能遍历对象属性直接修改。
vite为什么那么快
直接点击查看这个地址:juejin.cn/post/720516…
v3为什么抛弃this
直接看这个地址:juejin.cn/post/719992…
为什么说vue的数据流是单向的
prop也就是父组件传过来的数据,如果我们试图通过子组件的v-model去改变这个prop,也就是试图通过子组件直接去改变父组件的数据,而不是通过发送事件的方式,这是不允许的。
子组件没有权利修改父组件传过来的数据,只能请求父组件对原始数据的修改。 这实际上是为了更好的解耦,在开发中如果有多个子组件依赖与父组件的某个数据,万一子组件真的可以直接修改父组件的数据,那么一个子组件的变化将会引发所有依赖于这个数据的子组件的变化,所以vue不推荐子组件直接修改父组件的数据,直接修改prop会抛出警告。
v3中使用了ts,你觉得ts有哪些优点
- TypeScript 更具表现力,这意味着它的语法混乱更少。
- 由于高级调试器专注于在编译时之前捕获逻辑错误,因此调试很容易。
- 静态类型使 TypeScript 比 JavaScript 的动态类型更易于阅读和结构化。
- 由于通用的转译,它可以跨平台使用,在客户端和服务器端项目中。