Vue2与Vue3区别

1.vue 的数据为什么频繁变化但只会更新一次

这是因为 Vue 的 Dom 更新是异步的,数据更新完之后首先被 set 钩子监听到,但是不会马上去执行 Dom 更新,而是在下一轮循环中执行更新。

具体的实现是 vue 实现了一个 queue 队列,用于存放本次事件循环中所有的 Watcher 更新,并且同一个 Watcher 的更新只会被推入队列一次,并在本次事件循环的微队列执行结束之后执行此更新(UI Render 阶段),这就是 Dom 只会更新一次的原因

2.说一下 vue 中 computed 和 methods 的区别是什么

1.computed 作为属性使用,methods 作为方法调用
2.computed 有 getter 和 setter 方法,可以进行赋值,而 methods 不行
3.computed 不能接收多个参数,而 methods 可以
4.computed 有缓存,而 methods 没有

3.在 Vue 中要获取当前时间你会放到 computed 还是 methods 里?

应该放在 computed 中,因为只有当 computed 相关依赖改变了才会进行重新求值;
methods 只有进行了重新渲染,methods 调用总会执行所有的函数

4.在给 Vue 中的元素设置 key 值时可以使用 Math 的 random 方法吗

不可以,因为 Math.random()是生成随机数的方法,有一定概率生成值是相同的 item,不能保证唯一。
可以根据数据生成,数据里有 id 属性,可以将 id 作为 key;
如果不根据数据生成,那么最好的方式就是使用时间戳生成 key;也可以使用像 uuid 一类的库来生成唯一的 key

5.插槽与作用域插槽的区别是什么

插槽的作用是子组件提供可替换模板,父组件可以更换模板内容;
作用域插槽是给了子组件向父组件返回数据的功能,子组件也可以一直复用,父组件可以重新组织内容和样式

6.vue 中相同逻辑如何进行抽离

是混入(mixin)技术,混入技术提供了一种非常灵活的方式,对重复的业务逻辑进行抽离;
在 Dom 树阶段、元素上等等。
实现原理:
一个混入对象可以包含任意组件选项。组件使用混入对象时,会将所有的混入选项“混合”进入到组件本身的选项;简单来说,就是给生命周期,函数等中间添加一些公共逻辑

7.如何监听 pushstate 和 replacestate 的变化

History.replacestate 和 pushstate 不会触发 popstate 事件,所以可以在方法中创建一个新的全局事件进行监听 pushstate 和 replacestate 的变化

8.说一下 vue3 是如何变得更快的

Diff 优化:
相比 Vue2,Vue3

体积变小:
重写后的 Vue 支持 tree shaking,可以像修剪树叶一样修剪掉一些不需要的东西,从而使 Vue3.0 的体积更小

9.说一说自定义指令有哪些生命周期

bind:只调用一次,在指令第一次绑定元素时调用
inserted:被绑定元素插入到父节点时调用
update:被绑定元素所在模板更新时调用
componentUpdated:被绑定元素所在模板完成一次周期更新时调用
unbind:只调用一次,在指令与元素解绑时调用

自定义指令生命周期的参数有:el,binding,vnode,oldVnode

10.说一说 Vue3 对比 Vue2 的变化

1.源码组织方式变化:使用 TS 重写 2.支持 compositionAPI,基于函数的 api,更灵活组织组件逻辑(Vue2 使用 options api) 3.响应式系统提升:Vue3 的响应式数据原理改成了 Proxy,可以监听动态新增删除属性,以及数组变化 4.编译优化:Vue 通过标记静态根节点来优化 Diff,Vue 则标记和提升所有静态根节点,Diff 的时候只需要去对比动态节点的内容 5.打包体积优化:移除了一些不常用的 api(inline-template,filter) 6.生命周期的变化,使用 setup 替代了 beforeCreate 和 created
7.template 支持多个根标签
8.Vuex 状态管理,创建实例的方式,Vue2 使用 new store;Vue3 使用 createStore;
9.Route 获取页面实例以及路由信息,Vue2 使用 this 的方式获取;而 Vue3 采用 getCurrentInstance/userRoute,userRouter 的方式来获取 10.对 props 的使用:Vue2 通过 this 的方式使用;Vue3 则直接通过 props 使用;
11.父子组件传值:Vue3 中当子组件向父组件返回数据时,如果使用的是自定义名称,像 backData,则需要在 emits 定义一下

你可能感兴趣的:(vue.js,javascript,前端)