最近想玩玩Vue3

如题，Vue3已经是beta版了，想玩玩Vue3，就对原来Vue2的项目进行了升级。参考了慕课网Dell Lee的课程内容和Vue3官方文档。

一、main.js中的变化

从技术上讲，Vue 2 没有“app”的概念，我们定义的应用只是通过 new Vue() 创建的根 Vue 实例。从同一个 Vue 构造函数创建的每个根实例共享相同的全局配置，因此在测试期间，全局配置很容易意外地污染其他测试用例。
——Vue3中文文档

这其实主要是创建Vue实例时发生了变化。现在使用一个新的全局API：createApp()来创建一个Vue实例。

import { createApp } from 'vue'const app = createApp({})

1.使用createApp()来创建一个Vue实例。
2.使用app.use来安装插件
3.可以链式调用

下面是使用vue-cli4创建的main.js中的代码片段：

createApp(App).use(router).use(store).use(VueAwesomeSwiper).mount('#app')

二、组合式 API

一套新的语法，对组件的属性内容不再向Vue2.X那样分开来写，而是整合到一起。取消了this的使用。
setup()方法：在组件初始化时被调用，替代了原来的created()生命周期钩子。
1.定义data：在setup()方法中直接定义：

  setup() {const data = {swiperList: [],iconList: [],recommendList: [],weekendList: [],lastCity: ''}}

但是要注意，直接这样定义的数据是没有响应式的！！！
要使数据拥有响应式，需要使用reactive()方法，再将对应的数据return出去，只有return 出去之后才能被模板使用。

import {reactive} from 'vue'setup() {const data = reactive({swiperList: [],iconList: [],recommendList: [],weekendList: [],lastCity: ''})return {data}}

reactive: 返回对象的响应式副本

2.使用computed属性
需要从Vue中导入一个computed()方法。在setup中调用该方法，传入一个函数，该函数返回产生computed属性的计算方法。

    const city = computed( () => {return store.state.city})

注意：如果要在模板中使用该计算属性，需要像data一样return出去。

3.定义方法methods
直接写成如下形式,在setup方法中定义

function aa () {console.log('methods')}

4.生命周期钩子

现在生命周期钩子需要导入，并且接收一个回调函数，当触发钩子时调用。

4.使用Vuex
在Vue3中使用Vuex的方式也发生了改变。
需要从Vuex中导入一个useStore方法，并在setup中调用。

const store = useStore();

打印出的store对象

Vue2升级到Vue3相关推荐

vue2升级到 Vue3的异同（入门须知）
vue2升级到Vue3的异同构建项目不一样, 具体查看构建项目 main.js 的不一样 vue2 中的mian.js 里面导入的是vue 实例, vue 3中的main.js 如下的结构: 注意 ...
Vue2要不要升级到Vue3？(尤雨溪回复解读)
作者:掘金干货君 https://juejin.cn/post/7117525259212816414 就在前两天,一篇反对Vue2升级到Vue3的文章在vue官方社区引起了热议.(原文链接:Vue ...
创建VUE项目，vue-cli2.0版本和3.0版本的区别，将vue2.0项目升级为vue3.0项目
创建VUE项目,vue-cli2.0版本和3.0版本的区别,将vue2.0项目升级为vue3.0项目使用vue-cli2.0版本创建vue项目创建前的准备开始创建创建过程项目正常创建使用v ...
手摸手带你玩转Vue3——Vue2升级Vue3
今年年初,尤大大公布了一个重磅消息,将Vue3作为Vue的默认版本. 这无疑不是对我们开发人员的内卷煽风点火! vue默认版本改动意味着,官方将会把Vue研发重心放到vue3上,vue2也开始走下坡路 ...
同一电脑上安装且使用vue2.0和vue3.0版本
问题: 想要在自己电脑本地上创建使用vue2.0和vue3.0版本的项目,如何实现? 方法: 第一步: 卸载全局安装的vue版本.(注:自行百度搜索如何卸载全局vue2vue3脚手架) 第二步: 在自 ...
基于vue-element-admin升级的Vue3+TS+Element-Plus版本正式开源，有来开源组织又一精心力作
新版本文档 [vue3-element-admin ]基于 Vue3 + Vite4 + TypeScript5+ Element-Plus 从0到1搭建企业级后台管理系统(前后端开源)_有来技术的博 ...
在vue2中使用vue3的核心功能（渐进式升级vue版本）
一.前言学了真香的vue3语法,但目前的vue2项目中短期内不会再升级了,空有屠龙之术无法施展?来试试以下的解决方案,让你在vue2项目中也能用上vue3的核心语法-组合式API. 二.选项式API ...
如何升级Vue的版本 vue2.9.6升级到vue3.0
背景:电脑使用多年,一直使用vue 2.x版本,项目开发过程中由于一个模块涉及的集成模块过多,导致需要进行定义的变量越来越多,代码出现冗余,因此在同事的推动下,鉴于vue 3.x的优化,故对自己本来使 ...
vue2升级vue3知识点
echarts自适应大小 myChart.setOption(option)window.onresize = function () {myChart.resize()} setup在create之 ...

Vue2升级到Vue3

最近想玩玩Vue3

一、main.js中的变化

二、组合式 API

Vue2升级到Vue3相关推荐

最新文章

热门文章