首页 > 其他分享 >vue2和vue3的区别

vue2和vue3的区别

时间:2022-12-05 14:35:38浏览次数:47  
标签:区别 setup vue3 api vue2 使用 组件

1、双向数据绑定原理不同

vue2:vue2的双向数据绑定是利用ES5的一个API,Object.definePropert()对数据进行劫持,结合发布订阅模式的方式来实现的。
vue3:vue3中使用了ES6的Proxy API对数据代理。相比vue2x,使用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引入ref/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组件中可以没有根标签。

标签:区别,setup,vue3,api,vue2,使用,组件
From: https://www.cnblogs.com/huayang1995/p/16952182.html

相关文章

  • mvc,mvp,mvvm 的区别
    这三者都是框架模式,它们设计的目标都是为了解决Model和View的耦合问题。MVC模式出现较早主要应用在后端,如SpringMVC、ASP.NETMVC等,在前端领域的早期也有应用,如Backbone......
  • (转)Xms Xmx PermSize MaxPermSize 区别
    Eclipse崩溃,错误提示:MyEclipsehasdetectedthatlessthan5%ofthe64MBofPermGen(Non-heapmemory)spaceremains.Itisstronglyrecommendedthatyouexit......
  • TS中interface和type的区别
    1.概念1.接口(interface)接口主要用于类型检查,他只是一个结构契约,定义了具有相似的名称和类型的对象结构。除此之外,接口还可以定义方法和事件。2.类型别名(TypeAlias)不同......
  • mysql版本区别及版本号解释
    mysql版本区别及版本号解释1.mysql类型mysqlcommunityserver,社区免费版,但没有技术支持mysqlenterprise,企业收费版mysqlcluster,主要用于服务器集群mysqlworkbench,用来......
  • 一图看懂Hadoop中的MapReduce与Spark的区别:从单机数据系统到分布式数据系统经历了哪些
    今日博主思考了一个问题:Hadoop中的MapReduce与Spark他们之间到底有什么关系?直到我看到了下面这张图废话不多说先上图......
  • Go语言的 串行处理 和 并行处理 有什么区别 ?
     原创 学习与分享 Go语言圈 2022-12-0508:30 发表于广东收录于合集#为什么要学Go语言141个学习与交流:Go语言技术微信群商务合作加微信:LetsFenggoland全家桶激......
  • [Android开发学iOS系列] 和一个真正iOS开发的区别?
    和一个真正iOS开发的区别?学习iOS的这段时间,我一直在思考和感受着自己和一个真正做了几年iOS的dev之间的区别.同时也在反向思考,我自己和一个新学Android的人,又有什......
  • sqlserver 中len和DataLength的区别
    https://zhuanlan.zhihu.com/p/342051927LEN()函数返回文本字段中值的长度。DataLength()函数返回文本字段中值的字符长度。区别在于:len()只返回字符数,一个汉字代表一个......
  • MySQL和SQLserver中group by的区别
    https://blog.csdn.net/weixin_48720080/article/details/126289174力扣中做了一道题,groupby可以在mysql中用,不能在mysqlserver中用,因为groupby后面没有select中的字段......
  • 字符与字符串的区别
    首先他们完全不同在c语言中1、“字符“”用单引号作为定界符,“字符串”用双引号作为定界符;2、“字符”在屏幕上打印一个字符的时候,需要在printf函数中,使用“%c”这个占位......