首页 > 其他分享 >vue面试题_vue2和vue3的区别

vue面试题_vue2和vue3的区别

时间:2023-11-21 12:14:05浏览次数:39  
标签:面试题 vue setup vue3 api vue2 使用 组件

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组件中可以没有根标签。

 

标签:面试题,vue,setup,vue3,api,vue2,使用,组件
From: https://www.cnblogs.com/limou956259/p/17846316.html

相关文章

  • Vue 项目每次发版后要清理浏览器缓存 问题
    configureWebpack:{//providetheapp'stitleinwebpack'snamefield,sothat//itcanbeaccessedinindex.htmltoinjectthecorrecttitle.name:name,resolve:{alias:{'@':resolve('src'......
  • vue3 ts 父子 组件小例子
    <project-tabref="projectTabRef"v-model="form.projectVO":data="parentToChild"@update="updateHandler"></project-tab>//引用组件constProjectTab=defineAsyncComponent(()=>import('./tabsProject.......
  • ant design vue 1.x 和 3.x 自定义表单示例
    以下是项目中用到的自定义表单的写法,vue2vue3各记录一个。1.x(Forvue2)自定义表单的示例实现如下图的控件代码如下:import{Component,Prop,Vue,Watch}from'vue-property-decorator'import{Moment}from'moment'typeValue={left:Moment;right:Moment......
  • vue实现会议室拖拽布局排座
    会议室拖拽布局排座是vue-draggable结合vue-draggable-resizable-gorkys进行开发vue-draggable是拖拽组件,可以在组件里拖动排序,也可以多个组件之间拖动排序vue-draggable-resizable-gorkys是一更强大的拖拽组件,可以随意拖拽,有点坐标先进行会议室的布局然后对某个会议进行人......
  • 解放VSCode+Vue的完整组件库智能提示(包括ant-design-vue、element-plus等)
    解放VSCode+Vue的完整组件库智能提示最近因为一些原因从WebStrom转回VSCode,首先感受到的就是组件库没有智能提示了:这能忍吗?根本不可能!接下来,我带你花三分钟找回遗失的智能提示~首先,本篇文章适用于通过unplugin-vue-components自动引入组件的项目;也就是说,在你的vite.config.js......
  • vue3路由重定向失效
    页面刷新时遇到路由重定向无效的问题,可能是因为路由重定向是在客户端进行的,而页面刷新会重新加载整个应用程序,导致重定向逻辑丢失。为了解决这个问题,你可以使用服务器端的重定向来确保在页面刷新时也能正确地重定向到指定的路由。以下是一种常见的解决方案:在服务器端配置,确保......
  • vue3_Extraneous non-props attributes (class) were passed to component but could
    今天的开发中发现了这个问题Extraneousnon-propsattributes(class)werepassedtocomponentbutcouldnotbeautomaticallyinheritedbecausecomponentrendersfragmentortextrootnodes.原因:是因为vue3中允许在<template>中不设置根节点,所以我在某个页面中......
  • SpringBoot + vue2.0查询所用功能
    导入数据库文件CREATEDATABASE`springboot`/*!40100DEFAULTCHARACTERSETutf8mb4COLLATEutf8mb4_0900_ai_ci*//*!80016DEFAULTENCRYPTION='N'*/CREATETABLE`users`(`id`intunsignedNOTNULLAUTO_INCREMENT,`name`varchar(40)CHARACTERSETu......
  • 手撕Vue-Router-提取路由信息
    前言好了经过上一篇的学习,我们已经知道了如何监听Hash的变化,如何监听路径的一个变化,本篇我们就可以来实现我们自己的VueRouter了,那么怎么实现呢,在实现之前我们先来回顾一下官方的VueRouter是怎么使用的。VueRouter的使用首先需要去下载官方的VueRouter,如果是通过np......
  • vue自定义指令按enter键触发事件
    directives:{enter:{bind(el,binding){document.addEventListener('keyup',(event)=>{if(event.keyCode===13){binding.value()}})}}},v-enter="search"......