百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

vue3与vue2的比较(vue3和vue2)

itomcoil 2025-04-05 19:26 11 浏览

创建方式不同

vue2 是一个构造函数,通过new创建一个Vue实例

new Vue({})

vue3是一个对象。通过对象Vue的createApp()方法创建一个vue实例

Vue.createApp({})

挂载容器的方式不同

vue2

new Vue({
el: '#app'
})

new Vue({}).$mount('#app')

vue3

Vue.createApp({}).mount('#app')

template模板

标签模版这块,Vue2和Vue3区别不大,Vue3支持碎片(Fragments),就是说template下可以有多个根节点。

Vue2

Vue2 template下只能包含一个根节点。

Vue3

Vue3 template下可以包含多个根节点。

data选项不同

vue2 可以是一个对象或者由方法返回一个对象

new Vue({
el: '#app',
data: {}
}
//或者
new Vue({
el:'#app',
data(){
return{}
}
})

vue3只能由方法返回一个对象

Vue.createApp({
data(){
return {}
}
})

响应式的不同

vue2的属性不具备相应式,要实现响应式有两种方法

(1). forceUpdate()强制刷新页面,比较损耗性能

(2). set()方法给对象添加新属性,针对性强制刷新,性能消耗低

(3). push 、pop、 unshift、 shift、sort、reverse、splice

this.$forceUpdate()

this.$set(this.star,'sex','男')

vue3 实现响应式数据

vue2和vue3双向数据绑定原理发生了改变

vue2的双向数据绑定是利用了es5 的一个API Object.definepropert() 对数据进行劫持 结合发布订阅模式来实现的。vue3中使用了es6的proxyAPI对数据进行处理。

相比与vue2,使用proxy API 优势有:defineProperty只能监听某个属性,不能对全对象进行监听;可以省去for in 、闭包等内容来提升效率(直接绑定整个对象即可);可以监听数组,不用再去单独的对数组做特异性操作,vue3可以检测到数组内部数据的变化。

vue3推出组合式API, vue2采用选项式API

Vue2 与vue3 最大的区别是vue2使用选项类型api,对比vue3合成型api。旧得选项型api在代码里分割了不同得属性:data,computed,methods等;新得合成型api能让我们使用方法来分割,相比于旧的API使用属性来分组,这样代码会更加简便和整洁。

生命周期

vue2 --------------- vue3

beforeCreate -> setup()

Created -> setup()

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeDestroyed -> onBeforeUnmount

destroyed -> onUnmounted

activated -> onActivated

deactivated -> onDeactivated

父子传参不同,setup()函数特性

setup()函数接收两个参数:props、context(包含attrs、slots、emit)

setup函数是处于生命周期beforeCreated和created俩个钩子函数之前

执行setup时,组件实例尚未被创建(在setup()内部,this不会是该活跃实例得引用,即不指向vue实例,Vue为了避免我们错误得使用,直接将setup函数中得this修改成了undefined)

与模板一起使用时,需要返回一个对象

因为setup函数中,props是响应式得,当传入新的prop时,它将会被更新,所以不能使用es6解构,因为它会消除prop得响应性,如需解构prop,可以通过使用setup函数中得toRefs来完成此操作。

父传子,用props,子传父用事件 Emitting Events。在vue2中,会调用this$emit然后传入事件名和对象;在vue3中得setup()中得第二个参数content对象中就有emit,那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。

在setup()内使用响应式数据时,需要通过 .value 获取

import { ref } from 'vue'

const count = ref(0)

console.log(count.value)

从setup() 中返回得对象上得property 返回并可以在模板中被访问时,它将自动展开为内部值。不需要在模板中追加.value。

setup函数只能是同步的不能是异步的。

相关推荐

字节三面:MySQL数据同步ES的4种方法!你能想到几种?

如何进行数据同步MySQL是一种流行的关系型数据库,而Elasticsearch是一个强大的搜索引擎和分析平台。将MySQL数据同步到Elasticsearch中可以帮助我们更方便地搜索和分析数据。在...

Java 连接 MySQL 数据库(java连接mysql课设)

一、环境准备1.1依赖管理(Maven)在项目的pom.xml中添加MySQL驱动依赖:<dependency><groupId>mysql</gro...

Spring Boot 连接 MySQL 数据库(spring boot配置数据库连接)

一、环境准备1.1依赖管理(Maven)<!--方案1:JdbcTemplate--><dependency><groupId>org.sprin...

java连接mysql数据库达成数据查询详细教程

前言:本篇文章适用于所有前后端开发者众所周知,只要是编程,那肯定是需要存储数据的,无论是c语言还是java,都离不开数据的读写,数据之间传输不止,这也就形成了现代互联网的一种相互存在关系!而读写存储的...

既然有MySQL了,为什么还要有MongoDB?

大家好,我是哪吒,最近项目在使用MongoDB作为图片和文档的存储数据库,为啥不直接存MySQL里,还要搭个MongoDB集群,麻不麻烦?让我们一起,一探究竟,了解一下MongoDB的特点和基本用法,...

用 JSP 连接 MySQL 登入注册项目实践(JSP + HTML + CSS + MySQL)

目录一、写在前面二、效果图三、实现思路四、实现代码1、login总界面2、registercheck总代码3、logoutcheck总代码4、amendcheck总代码相关文章一、写在前面哈喽~大家好...

MySQL关联查询时,为什么建议小表驱动大表?这样做有什么好处

在SQL数据库中,小表驱动大表是一种常见的优化策略。这种策略在涉及多表关联查询的情况下尤其有效。这是因为数据库查询引擎会尽可能少的读取和处理数据,这样能极大地提高查询性能。"小表驱动大表&...

mysql8驱动兼容规则(mysql8.0驱动)

JDBC版本:Connector/J8.0支持JDBC4.2规范.如果Connector/J8.0依赖于更高版本的jdbclib,对于调用只有更高版本特定的方法会抛出SQLFea...

mysql数据表如何导入MSSQL中(mysql怎样导入数据)

本案例演示所用系统是windowsserver2012.其它版本windows操作系统类似。1,首先需要下载mysqlodbc安装包。http://dev.mysql.com/downloa...

MySQL 驱动中虚引用 GC 耗时优化与源码分析

本文要点:一种优雅解决MySQL驱动中虚引用导致GC耗时较长问题的解决方法虚引用的作用与使用场景MySQL驱动源码中的虚引用分析背景在之前文章中写过MySQLJDBC驱动中的虚引用导致...

ExcelVBA 连接 MySQL 数据库(vba 连接sqlserver)

上期分享了ExcelVBA连接sqlite3数据库,今天给大家分享ExcelVBA连接另一个非常流行的MySQL数据库。一、环境win10Microsoftoffice2010(...

QT 5.12.11 编译MySQL 8 驱动教程- 1.01版

安装编译环境:qt5.12.11mysql8.0.28修改mysql.pro工程文件,编译生成动态库mysql.pro文件位置:D:\Alantop_Dir\alantop_sde\Qt\Qt5....

「Qt入门第22篇」 数据库(二)编译MySQL数据库驱动

导语在上一节的末尾我们已经看到,现在可用的数据库驱动只有两类3种,那么怎样使用其他的数据库呢?在Qt中,我们需要自己编译其他数据库驱动的源码,然后当做插件来使用。下面就以现在比较流行的MySQL数据库...

(干货)一级注册计量师第五版——第四章第三节(三)

计量标准的建立、考核及使用(三)PS:内容都是经过个人学习而做的笔记。如有错误的地方,恳请帮忙指正!计量标准考核中有关技术问题1检定或校准结果的重复性重复性是指在一组重复性测量条件下的测量精密度。检定...

声学测量基础知识分享(声学测量pdf)

一、声学测量的分类和难点1.声学测量的分类声学测量按目的可分为:声学特性研究(声学特性研究、媒质特性研究、声波发射与接收的研究、测量方法与手段的研究、声学设备的研究),声学性能评价和改善(声学特性评价...