您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

vue2.x与vue3.x语法对比浅析

时间:2020-10-19 12:10:01  来源:  作者:

Vue3.0推出已有一段时间了,各位小伙伴们都有安排上学习没,想要技术进阶的同学赶紧学习起来吧。

vue2.x与vue3.x语法对比浅析

 

如果你对vue3不是特别了解,或者打算去学习,可以看看下面的分享,希望对大家有所帮助!

创建项目

首先更新vue-cli到最新版本。

npm install -g @vue/cli # OR yarn global add @vue/cli
vue create hello-vue3
# select vue 3 preset

项目变化

vue2.x和vue3.x目录结构没有什么变化,只是一些使用方法变了,而且默认是安装了TypeScript。

vue2.x与vue3.x语法对比浅析

 

  • main.js

vue2.x使用import Vue from 'vue',然后使用new Vue()创建实例。vue3.x则是import {createApp} from 'vue',通过createApp()来创建实例了。

这就导致了很多的插件或UI组件库不能使用,比如ElementUI、iView...

vue2.x与vue3.x语法对比浅析

 

  • router.js创建路由

vue3.x需要引入createRouter创建地址路由。createWebHashHistory对应之前的hashcreateWebHistory对应之前的history

vue2.x与vue3.x语法对比浅析

 

  • vuex状态管理

vue3.x中状态管理的创建方式变为了createStore 。代码结构更精简合理。

vue2.x与vue3.x语法对比浅析

 

  • Composition API

这个是vue3.x变化最大的地方,vue2.x数据存放在data,方法在methods,通过this去调用。但是在vue3.x这些都没有了,所有的代码全部都在 setup 里面实现,你页面需要哪些方法,就要在当前页引入即可。

vue2.x与vue3.x语法对比浅析

 

  • 生命周期

vue3.x的生命周期也发生了一些变化,大家可以看下面这张图。

vue2.x与vue3.x语法对比浅析

 

在项目中具体的使用方法。

vue2.x与vue3.x语法对比浅析

 

使用介绍

  • setup

setup有两个参数 props 和 context

  • props:接受父组件传的值
  • context:vue3.x里面没有this,提供了一个context上下文属性,你可以通过这个属性去获取进行 一些 vue2.x 用this实现的操作
vue2.x与vue3.x语法对比浅析

 

  • ref 声明基础数据类型

创建一个响应式的基础类型,只能监听number、String、boolean等简单的类型,该属性一旦发生更改,都会被检测到。

<template>
   <div>{{count}}</div>             // 1
</template>
import {ref} from "vue"

setup(){
   const count =ref(0)
   count.value++    //必须要加.value
   return{
       count        //一定要return 出去
   }
}
  • reactive 声明响应式数据对象
<template>
   <div>{{count.name}}</div>             // 857
</template>
import {reactive} from "vue"

setup(){
   const count =reactive({
      name:'369'
   })
   count.name='857'
   return{
      count 
   }
}
  • computed 计算属性

computed 和vue2.x差不多,只是使用前要先引入。

vue2.x与vue3.x语法对比浅析

 

  • watchEffect 监听

通过ref或者reactive去创建多个响应式的值,当任何一个值发生改变的时候,立即触发这个函数。

vue2.x与vue3.x语法对比浅析

 

watchEffect方法会返回一个stop handle停止监听。

vue2.x与vue3.x语法对比浅析

 

  • router 路由

vue3.x的router和route属性也有了很大的变化,在vue2.x中使用this.$router路由跳转,this.$route获取当前页面路由信息。

// 路由跳转
import { useRouter} from "vue-router"; 
setup(){
  const router=useRouter()
  router.push('/path')
}

// 获取当前页面路由信息
import { useRoute} from "vue-router"; 
setup(){
  const route=useRoute()
  console.log(route) //这里的route相当于vue2.x中的this.$route
}

好了,就先分析到这么多,后续也会陆续分享一些新变化。欢迎一起交流讨论!



Tags:vue3.x   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
Vue3.0推出已有一段时间了,各位小伙伴们都有安排上学习没,想要技术进阶的同学赶紧学习起来吧。 如果你对vue3不是特别了解,或者打算去学习,可以看看下面的分享,希望对大家有所帮...【详细内容】
2020-10-19  Tags: vue3.x  点击:(191)  评论:(0)  加入收藏
▌简易百科推荐
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  项目与数据管理    Tags:Vue   点击:(1)  评论:(0)  加入收藏
程序是如何被执行的&emsp;&emsp;程序是如何被执行的?许多开发者可能也没法回答这个问题,大多数人更注重的是如何编写程序,却不会太注意编写好的程序是如何被运行,这并不是一个好...【详细内容】
2021-12-23  IT学习日记    Tags:程序   点击:(9)  评论:(0)  加入收藏
阅读收获✔️1. 了解单点登录实现原理✔️2. 掌握快速使用xxl-sso接入单点登录功能一、早期的多系统登录解决方案 单系统登录解决方案的核心是cookie,cookie携带会话id在浏览器...【详细内容】
2021-12-23  程序yuan    Tags:单点登录(   点击:(8)  评论:(0)  加入收藏
下载Eclipse RCP IDE如果你电脑上还没有安装Eclipse,那么请到这里下载对应版本的软件进行安装。具体的安装步骤就不在这赘述了。创建第一个标准Eclipse RCP应用(总共分为六步)1...【详细内容】
2021-12-22  阿福ChrisYuan    Tags:RCP应用   点击:(7)  评论:(0)  加入收藏
今天想简单聊一聊 Token 的 Value Capture,就是币的价值问题。首先说明啊,这个话题包含的内容非常之光,Token 的经济学设计也可以包含诸多问题,所以几乎不可能把这个问题说的清...【详细内容】
2021-12-21  唐少华TSH    Tags:Token   点击:(9)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Mason程    Tags:VUE   点击:(14)  评论:(0)  加入收藏
什么是性能调优?(what) 为什么需要性能调优?(why) 什么时候需要性能调优?(when) 什么地方需要性能调优?(where) 什么时候来进行性能调优?(who) 怎么样进行性能调优?(How) 硬件配...【详细内容】
2021-12-16  软件测试小p    Tags:性能调优   点击:(19)  评论:(0)  加入收藏
Tasker 是一款适用于 Android 设备的高级自动化应用,它可以通过脚本让重复性的操作自动运行,提高效率。 不知道从哪里听说的抖音 app 会导致 OLED 屏幕烧屏。于是就现学现卖,自...【详细内容】
2021-12-15  ITBang    Tags:抖音防烧屏   点击:(23)  评论:(0)  加入收藏
11 月 23 日,Rust Moderation Team(审核团队)在 GitHub 上发布了辞职公告,即刻生效。根据公告,审核团队集体辞职是为了抗议 Rust 核心团队(Core team)在执行社区行为准则和标准上...【详细内容】
2021-12-15  InfoQ    Tags:Rust   点击:(24)  评论:(0)  加入收藏
一个项目的大部分API,测试用例在参数和参数值等信息会有很多相似的地方。我们可以复制API,复制用例来快速生成,然后做细微调整既可以满足我们的测试需求1.复制API:在菜单发布单...【详细内容】
2021-12-14  AutoMeter    Tags:AutoMeter   点击:(20)  评论:(0)  加入收藏
相关文章
    无相关信息
最新更新
栏目热门
栏目头条