首页 IT技术内容详情

Vue2升级到Vue3

2021-10-05 24762 编程艺术家

最近想玩玩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

2

3



1.使用createApp()来创建一个Vue实例。

2.使用app.use来安装插件

3.可以链式调用


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


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

1

二、组合式 API

一套新的语法,对组件的属性内容不再向Vue2.X那样分开来写,而是整合到一起。取消了this的使用。

setup()方法:在组件初始化时被调用,替代了原来的created()生命周期钩子。

1.定义data:在setup()方法中直接定义:


  setup() {

    const data = {

      swiperList: [],

      iconList: [],

      recommendList: [],

      weekendList: [],

      lastCity: ''

    }

  }

1

2

3

4

5

6

7

8

9

但是要注意,直接这样定义的数据是没有响应式的!!!

要使数据拥有响应式,需要使用reactive()方法,再将对应的数据return出去,只有return 出去之后才能被模板使用。


import {reactive} from 'vue'

  setup() {

    const data = reactive({

      swiperList: [],

      iconList: [],

      recommendList: [],

      weekendList: [],

      lastCity: ''

    })

    return {data}

  }

1

2

3

4

5

6

7

8

9

10

11

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


2.使用computed属性

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


    const city = computed( () => {

      return store.state.city

    })

1

2

3

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


3.定义方法methods

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


function aa () {

console.log('methods')

}

1

2

3

4.生命周期钩子


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


4.使用Vuex

在Vue3中使用Vuex的方式也发生了改变。

需要从Vuex中导入一个useStore方法,并在setup中调用。


const store = useStore();

1

打印出的store对象


————————————————

版权声明:本文为CSDN博主「coderyy1」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/qq_25346499/article/details/109366885


相关标签: # vue

文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月
文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月
文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月
文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月
文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月
 暂无评论,快来抢沙发吧~

发布评论