Vue2和Vue3的区别Vue3的组合式API

一、Vue2和Vue3的区别

1、创建方式的不同:

(1)、vue2:是一个构造函数,通过该构造函数创建一个Vue实例

new Vue({})

(2)、Vue3:是一个对象。并通过该对象的createApp()方法,创建一个vue实例。

Vue.createApp({})

2、挂载容器的不同。

(1)、Vue2:可以通过el选项和$mount()方法来挂载容器。

new Vue({
el:'容器名字 '
})new Vue({
}).$mount('容器名字')

(2)、Vue3:只能通过mount()方法来挂载容器

Vue.createApp({
}).mount('容器名字')

3、data选项的不同

(1)、Vue2:data选项可以是一个对象,也可以是一个方法(由方法返回一个对象)。

new Vue({
el:'容器名字 ',
data:{
}
//或者
new Vue({
el:'容器名字 ',
data(){
return{}}
})
})

(2)、Vue3:data选项只能是一个方法,由方法返回一个对象。

Vue.createApp({
data(){
return{}
}
}).mount('容器名字')

3、响应式的不同

(1)、Vue2:后添加的属性不具备响应式。要想实现响应式只有两种方法。
(1)、forceUpdate()强制页面更新。(但是这种方法的话,是强制刷新页面,损耗性能) (2)、通过set()方法给对象添加新的属性,确保新添加的属性同样具备响应式。
(3)、操作数组后同时要具有响应式,必须要使用下面的方法:push(在数组的最后面添加数据)、pop(删除数组的最后一个数据)、unshift(在数组前面添加内容)、shift(删除数组最前面的数据)、sort(排序)、reverse(反转)、splice(截取删除)
示例:

new Vue({
el:'容器名字 ',
data:{
star:{
name:"李易峰",
age:34}}}),
methods:{
//页面中直接调用这个方法就好了。
addSex(){
//this.star.sex='男'
//this.$forceUpdate()
this.$set(this.star,'sex','男')
}
}

(2)、Vue3:vue3是自动实现数据响应式。

    Vue.createApp({data() {return {star: {name: '李易峰',age: 34},foods: ['火锅', '串串', '小土豆', '烤榴莲', '螺蛳粉']}},methods: {//添加性别addSex(){this.star.sex="男"},delName(){delete this.star.name},// 添加食物addFoods(){this.foods.push('西瓜')},// 删除食物deleteFoods(){this.foods.splice(0,1)}},}).mount('#app')

4、Vue3新推出的组合式API

(1)、Vue2:定义方法的时候需要写在methods里面
在Vue2中,后添加的属性是非响应式的。页面不更新。需要用get()和set()方法.

(2)、Vue3:组合式API的作用是将原来分散开来定义的数据、方法、计算属性、监听器、组合起来定义一个完整的业务。
ref:用来定义响应式数据

let { ref } = Vue
    Vue.createApp({setup() {//  使用ref()方法,定义一个响应式对象let carName = ref('玛莎拉蒂')let carPrice = ref('100W')//需要写一个函数,这个里面有一个value值function updateCar() {//修改信息的时候,需要.value值来修改。这样的话才能实现数据的响应式原理carName.value = "奔驰",carPrice.value='30W'}//定义的数据需要在return里面返回才能在页面中使用return{carName,carPrice,updateCar}}}).mount('#app')

页面中:

    <div id="app">
<div>{{carName}}</div>
<div>{{carPrice}}</div>
<button @click="updateCar">修改信息</button></div>


喜欢的朋友记得点赞、收藏、关注哦!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/39908.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RAG技术下的文档智能检索

在数字化浪潮的推动下&#xff0c;信息检索已成为我们日常生活中不可或缺的一部分。然而&#xff0c;随着数据量的爆炸式增长&#xff0c;如何快速精准地从海量文档中检索出有价值的信息&#xff0c;成为了一个巨大的挑战。本文将带您走进 Pinecone 向量数据库的世界&#xff0…

AIGC到底如何改变创意设计?

在当今数字化时代&#xff0c;AIGC&#xff08;生成式人工智能&#xff09;技术的崛起对创意设计领域产生了深远的影响。AIGC不仅为设计师提供了新的工具和方法&#xff0c;还改变了传统的设计流程和思维方式。 传统的设计过程中&#xff0c;设计师需要耗费大量时间在绘图、修…

npm install puppeteer 报错 npm ERR! PUPPETEER_DOWNLOAD_HOST is deprecated解决办法

npm install puppeteer 报错如下&#xff1a; npm ERR! PUPPETEER_DOWNLOAD_HOST is deprecated. Use PUPPETEER_DOWNLOAD_BASE_URL instead. npm ERR! Error: ERROR: Failed to set up Chrome v126.0.6478.126! Set "PUPPETEER_SKIP_DOWNLOAD" env variable to sk…

【Linux进程】僵尸进程与孤儿进程

前言 僵尸进程和孤儿进程是Linux中极为重要的两个种进程状态, 本文将会围绕这三个问题: 是什么? 为什么? 如何产生的? 详细的介绍这两种进程; 以及一些使用场景. 僵尸进程 在了解孤儿进程之前, 需要先引入僵尸进程的概念; 什么是僵尸进程? 僵尸进程: 就是处于僵死状态的进…

揭秘代理IP:原理、优势与应用场景全面解析

随着数字化进程的加速&#xff0c;网络安全已经成为现代社会不可或缺的一环。无论是政府机构、企业还是个人用户&#xff0c;都面临着越来越多的网络威胁。本文将深入探讨网络安全的重要性、面临的主要威胁以及应对策略&#xff0c;旨在为读者提供一个全面的网络安全视角。 1.…

黑马点评学习过程汇总——Cookie \ Session \ Token的区别

1. Cookie \ Session \ Token的区别 10分钟助你弄懂cookie、session、token 区别、用途&#xff01;&#xff01;&#xff01;_哔哩哔哩_bilibili &#xff08;1&#xff09;为什么要使用Cookie 在客户端和服务端之间维持用户登录状态 &#xff08;2&#xff09;为什么不能只…

类似Jira的在线项目管理软件有哪些?10 个主流的Jira替代方案

10 个 Jira 替代方案&#xff1a;PingCode、Worktile、Teambition、Redmine、Asana、monday.com、Zoho Projects、思码逸、Notion、Airtable。 Jira 是一款流行的项目管理工具&#xff0c;专为产品开发团队而设计。虽然它是一种多功能解决方案&#xff0c;几乎适用于任何类型的…

Git 操作补充:变基

变基 在 Git 中&#xff0c;整合来自不同分支的修改&#xff0c;除了 merge&#xff0c;还有一种方法&#xff0c;变基 rebase。git rebase 命令基本是是一个自动化的 cherry-pick 命令&#xff0c;它计算出一系列的提交&#xff0c;然后在其他地方以同样的顺序一个一个的 che…

流程表单设计器开源优势多 助力实现流程化!

实现流程化办公是很多职场企业的发展目标。应用什么样的软件可以实现这一目的&#xff1f;低代码技术平台、流程表单设计器开源的优势特点多&#xff0c;在推动企业降本增效、流程化办公的过程中作用明显&#xff0c;是理想的软件平台。那么&#xff0c;流程表单设计器开源的优…

编译Open Cascade(OCC)并使用C#进行开发

说明&#xff1a; VS版本&#xff1a;Visual Studio Community 2022系统&#xff1a;Windows 11 专业版23H2Open CASCADE&#xff1a;v7.7.0&#xff08;链接&#xff1a;https://pan.baidu.com/s/1-o1s4z3cjpYf5XkwhSDspQ?pwdp9i5提取码&#xff1a;p9i5&#xff09; 下载和…

Julia精解【1】

文章目录 转换类型伴随矩阵 转换类型 在Julia中&#xff0c;可以使用内置函数来转换或者调整数据类型。以下是一些常用的数据类型转换方法&#xff1a; 转换类型 Int(): 将浮点数或字符串转换为整数。Float(): 将整数或字符串转换为浮点数。String(): 将其他类型转换为字符串…

阐述pandabuy淘宝代购集运系统在国外用户采购中国商品重要性丨类似淘宝代购集运系统搭建经验

Pandabuy淘宝代购集运系统在国外用户采购中国商品中的重要性&#xff0c;主要体现在以下几个方面&#xff1a; 一、满足多样化需求 Pandabuy系统为海外消费者提供了一个便捷的渠道&#xff0c;使他们能够轻松购买到来自中国电商平台的商品&#xff0c;如淘宝、天猫、京东等。…

python数据分析入门学习笔记

目录 一、 数据分析有关的python库简介 (一)numpy (二)pandas (三)matplotlib (四)scipy (五)statsmodels (六)scikit-learn 二、 数据的导入和导出 三、 数据筛选 四、 数据描述 五、 数据处理 六、 统计分析 七、 可视化 八、 其它![](https://…

windows电脑蓝屏解决方法(亲测有效)

如果不是硬件问题&#xff0c;打开终端尝试以下命令 sfc /scannow DISM /Online /Cleanup-Image /RestoreHealth

关于敏捷研发

文章目录 前言瀑布流和敏捷研发流程瀑布流研发流程缺点 敏捷研发流程 前言 关于敏捷研发。 瀑布流和敏捷研发流程 瀑布流研发流程 1.需求 2.设计 3.开发 4.测试 缺点 流程之间关联性很强&#xff0c;容易卡住风险不好预估&#xff0c;工时不好预估&#xff0c;如 2 个月的…

nodejs sqlite模块

SQLite 是一个轻量级的嵌入式数据库&#xff0c;它在 Node.js 中的使用通常是异步的。这意味着当你执行数据库操作时&#xff0c;例如创建表、插入数据或查询数据&#xff0c;这些操作会被放入事件队列中异步执行&#xff0c;而不会阻塞主线程。 安装sqlite3 npm install sql…

If you already have a 64-bit JDK installed ,defined a JAVA_HOME...的错误

今天感觉idea有点卡&#xff0c;修改了一下内存&#xff0c;结果就报这个错误了&#xff0c;网上的解决方案好多&#xff0c;都不行 以下是解决方案 打开 C:\Program Files\JetBrains\IntelliJ IDEA 2024.1.4\bin\jetbrains_client64.exe 把jihuo这个目录下所有的文件都删掉&…

通过easyexcel导入数据,添加表格参数的校验,同表格内校验以及和已有数据的校验

引入依赖 <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>2.2.11</version><scope>compile</scope></dependency> 需要导入到某个目录下 如果产品名称相同&#xff0c…

Mybatis数据封装

目录 解决方案&#xff1a; 1.起别名&#xff1a; 2.手动结果映射&#xff1a; 3.开启驼峰命名(推荐)&#xff1a; 我们看到查询返回的结果中大部分字段是有值的&#xff0c;但是deptId&#xff0c;createTime&#xff0c;updateTime这几个字段是没有值的&#xff0c;而数据…

分析数据不要太老实,有BI方案就用起来——奥威BI软件

在当今数据驱动的时代&#xff0c;企业对于数据分析的需求日益迫切。然而&#xff0c;面对海量的数据和复杂的分析需求&#xff0c;许多企业仍停留在传统的手工分析模式&#xff0c;这不仅效率低下&#xff0c;还容易出错。幸运的是&#xff0c;像奥威BI这样的数据分析软件提供…