Vue2.x与Vue3.x语法对比浅析

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

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

 

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

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

创建项目

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

 

  1. npm install -g @vue/cli # OR yarn global add @vue/cli 
  2. vue create hello-vue3 
  3. 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对应之前的hash,createWebHistory对应之前的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等简单的类型,该属性一旦发生更改,都会被检测到。

  1. <template> 
  2.    <div>{{count}}</div>             // 1 
  3. </template> 
  4. import {ref} from "vue" 
  5.  
  6. setup(){ 
  7.    const count =ref(0) 
  8.    count.value++    //必须要加.value 
  9.    return
  10.        count        //一定要return 出去 
  11.    } 

reactive 声明响应式数据对象

  1. <template> 
  2.    <div>{{count.name}}</div>             // 857 
  3. </template> 
  4. import {reactive} from "vue" 
  5.  
  6. setup(){ 
  7.    const count =reactive({ 
  8.       name:'369' 
  9.    }) 
  10.    count.name='857' 
  11.    return
  12.       count  
  13.    } 
  • 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获取当前页面路由信息。

 

  1. // 路由跳转 
  2. import { useRouter} from "vue-router";  
  3. setup(){ 
  4.   const router=useRouter() 
  5.   router.push('/path'
  6.  
  7. // 获取当前页面路由信息 
  8. import { useRoute} from "vue-router";  
  9. setup(){ 
  10.   const route=useRoute() 
  11.   console.log(route) //这里的route相当于vue2.x中的this.$route 

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

责任编辑:未丽燕 来源: 今日头条
相关推荐

2021-06-25 06:47:38

VueVue2.x迷你版响应式原理

2021-04-02 11:24:22

Vue2.x双向绑定前端

2017-09-27 14:46:37

Vue2.xDOM diff原理

2022-02-15 07:09:00

Vue3开发项目

2021-04-22 07:49:51

Vue3Vue2.xVue3.x

2020-09-28 17:45:03

Vue.js 3.0前端代码

2022-06-29 16:59:21

Vue3Vue2面试

2021-01-15 12:30:07

Vue技巧前端

2019-07-10 10:00:42

PHPPython语法

2023-12-27 07:46:29

Vue 2LTSFlow

2022-06-21 12:09:18

Vue差异

2021-07-30 05:06:48

Vue 2Vue 3

2023-04-27 11:07:24

Setup语法糖Vue3

2021-06-26 06:29:14

Vue 2Vue 3开发

2020-04-22 14:15:32

Vue 3.0语法前端

2021-05-06 07:40:56

Vue3 Vue2 组件

2021-07-29 12:05:18

Vue3Api前端

2023-11-28 09:03:59

Vue.jsJavaScript

2014-08-13 10:07:02

游戏引擎

2021-12-01 08:11:44

Vue3 插件Vue应用
点赞
收藏

51CTO技术栈公众号