当前位置: 首页 > news >正文

vue面试题_vue2和vue3的区别

1、数据绑定原理不同

vue2:vue2的数据绑定是利用ES5的一个API:Object.definePropert() 对数据进行劫持,结合发布订阅模式的方式来实现的。

vue3:vue3中使用了ES6的Proxy API对数据代理。相比vue2.x,使用proxy的优势如下:

defineProperty只能监听某个属性,不能对全对象监听

可以省去for in,闭包等内容来提升效率(直接绑定整个对象即可)

可以监听数组,不用再去单独的对数组做特异性操作vue3.x可以检测到数组内部数据的变化。

2、是否支持碎片

vue2:vue2不支持碎片。

vue3:vue3支持碎片(Fragments),就是说可以拥有多个根节点。

3、API类型不同

vue2:vue2使用选项类型api,选项型api在代码里分割了不同的属性:data,computed,methods等。

vue3:vue3使用组合式api,新的合成型api能让我们使用方法来分割,相比于旧的api使用属性来分组,这样代码会更加简便和整洁。

4、定义数据变量和方法不同

vue2:vue2是把数据放入data中,在vue2中定义数据变量是data(){},创建的方法要在methods:{}中。

vue3:,vue3就需要使用一个新的setup()方法,此方法在组件初始化构造的时候触发。使用以下三个步骤来建立反应性数据:

从vue引入reactive;

使用reactive() 方法来声明数据为响应性数据;

使用setup()方法来返回我们的响应性数据,从而template可以获取这些响应性数据。

5、生命周期钩子函数不同

vue2:vue2中的生命周期:

beforeCreate 组件创建之前

created 组件创建之后

beforeMount 组价挂载到页面之前执行

mounted 组件挂载到页面之后执行

beforeUpdate 组件更新之前

updated 组件更新之后

vue3:vue3中的生命周期:

setup 开始创建组件前

onBeforeMount 组价挂载到页面之前执行

onMounted 组件挂载到页面之后执行

onBeforeUpdate 组件更新之前

onUpdated 组件更新之后

而且vue3.x 生命周期在调用前需要先进行引入。除了这些钩子函数外,vue3.x还增加了onRenderTracked 和onRenderTriggered函数。

6、父子传参不同

vue2:父传子,用props,子传父用事件 Emitting Events。在vue2中,会调用this$emit然后传入事件名和对象。

vue3:父传子,用props,子传父用事件 Emitting Events。在vue3中的setup()中的第二个参数content对象中就有emit,那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。

7、指令与插槽不同

vue2:vue2中使用slot可以直接使用slot;v-for与v-if在vue2中优先级高的是v-for指令,而且不建议一起使用。

vue3:vue3中必须使用v-slot的形式;vue3中v-for与v-if,只会把当前v-if当做v-for中的一个判断语句,不会相互冲突;vue3中移除keyCode作为v-on的修饰符,当然也不支持config.keyCodes;vue3中移除v-on.native修饰符;vue3中移除过滤器filter。

8、main.js文件不同

vue2:vue2中我们可以使用pototype(原型)的形式去进行操作,引入的是构造函数。

vue3:vue3中需要使用结构的形式进行操作,引入的是工厂函数;vue3中app组件中可以没有根标签。

http://www.lryc.cn/news/146836.html

相关文章:

  • Shiro整合SpringBoot,实战下的应用场景
  • C语言——全局变量和局部变量重名了会怎么样
  • linux下vi或vim操作Found a swap file by the name的原因及解决方法--九五小庞
  • 通过RD Client远程连接windows电脑踩坑点
  • 学习node之——如何在项目中使用MySQL、前后端的身份认证
  • AUTOSAR从入门到精通-【应用篇】参照AUTOSAR架构的柴油车后处理集成电控系统软件设计与研究(续)
  • Linux 内核动态打印调试(dev_info、 dev_dbg )
  • 深入浅出AXI协议(3)——握手过程
  • Ansible学习笔记5
  • LeetCode 面试题 02.06. 回文链表
  • linux环境没有curl或者telnet命令解决方法与区分linux环境类型
  • golang channel
  • 高等职业学校物联网实训室建设方案
  • Python基础学习第四天:Python注释
  • Puppeteer中使用Stealth.min.js库
  • JVM ZGC垃圾收集器
  • 事务管理-事务进阶-propagation属性
  • 树多选搜索查询,搜索后选中状态仍保留
  • 数据结构--字典树(trie)
  • iframe通过postMessage进行跨域通信以及在Angular中使用
  • rust学习-引用C库
  • WebAssembly 在云原生中的实践指南
  • Azure sqlserver 更改字符集
  • git push时,由于commit了大文件无法成功push的解决办法
  • 2023_Spark_实验一:Windows中基础环境安装
  • 如何在Windows / Mac / iPhone / Android / Online上将MP4转换为MP3
  • 【App端】uni-app使用百度地图api和echarts省市地图下钻
  • 深度学习(十)--- cv2.pointPolygonTest() 判断一点是否在指定区域内
  • 后端面试话术集锦第 八 篇:redis面试话术
  • LiteOS qemu realview-pbx-a9 环境搭建与运行