Vue3新特性体验--上（内附简单实例，可直接使用）

1、先创建一个简单vue2项目，node、vue-cli、webpack等准备完成之后，创建vue3-test文件夹，cd vue3-test，然后vue init webpack，配置项目信息，创建vue2项目（安装vue-router、vuex）。

vue2项目文件目录详情

2、记录文件main.js、HelloWorld.vue、A.vue、B.vue 、router、vuex。（与vue3做对比）

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

HelloWorld.vue

<template>
  <div class="hello">
    <h1>我是vue2项目</h1>
    <div class="content">
      <A/>
      <B/>
    </div>
  </div>
</template>

<script>
import A from './A.vue'
import B from './B.vue'
export default {
  components:{
    A,
    B
  },
  name: 'HelloWorld',
  data () {
    return {
      
    }
  }
}
</script>

<style scoped>
.hello {
  height: 500px;
  width: 500px;
  margin: auto;
  background: rgb(137, 198, 248);
}
.content {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: space-around;
}
</style>

A.vue

<template>
  <div class="a-style">
    <p>我是A组件</p>
  </div>
</template>

<script>
export default {
  name: 'A',
  data () {
    return {
    }
  }
}
</script>

<style scoped>
.a-style{
  width: 40%;
  height: 50%;
  background: rgb(49, 243, 81);
}
</style>

B.vue

<template>
  <div class="b-style">
    <p>我是B组件</p>
  </div>
</template>

<script>
export default {
  name: 'B',
  data () {
    return {
    }
  }
}
</script>

<style scoped>
.b-style{
  width: 40%;
  height: 50%;
  background: rgb(248, 203, 56);
}
</style>

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
const store = new Vuex.Store({
    state:{
    },
    getters:{
    },
    mutations:{
    },
    actions:{
    },
    modules:{
    }
})
export default store

运行项目正常

 3、将vue2项目升级为vue3项目

先删除vue-cli安装vue-cli3.0

npm uninstall vue-cli -g

npm install -g @vue/cli

执行命令vue add vue-next

升级成功

 4、创建vue3项目

创建文件夹vue3-project，进入，执行vue create vue3-project，创建vue3项目，自定义配置，安装vue-router、vuex。创建完成之后文件内容变化。

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

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

router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

store/index.js

import { createStore } from 'vuex'

export default createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

启动项目

 5、在项目中可以正常进行路由跳转，写法与vue2基本一致，只是在main.js中引入router时不同

vue2中，new Vue()

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

vue3中，createApp()

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

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view/>
</template>

 6、vue3中vuex的使用

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

简单测试

修改store/index.js

import { createStore } from 'vuex'

export default createStore({
  state: {
    name:'leo'
  },
  mutations: {
    changeName(state,newVal){
      state.name = newVal
    }
  },
  actions: {
    setName(context,val){
      context.commit('changeName',val)
    }
  },
  modules: {
  }
})

A.vue

<template>
  <div class="a-style">
    <p>我是A组件</p>
    <span>store中的值：{{name}}</span>
  </div>
</template>

<script>
import {computed} from 'vue'
import $store from '../store'
export default {
  name: 'A',
  setup(){
    let name = computed(()=>{return $store.state.name})
    return {
      name
    }
  }
}
</script>

<style scoped lang="less">
.a-style{
  width: 40%;
  height: 50%;
  background: rgb(49, 243, 81);
}
</style>

B.vue

<template>
  <div class="b-style">
    <p>我是B组件</p>
    <button @click="changeName">改变A组件的store值</button>
  </div>
</template>

<script>
import $store from '../store'
export default {
  name: 'B',
  setup(){
    function changeName(){
      $store.dispatch('setName','lion')
    }
    return {
      changeName
    }
  }
}
</script>

<style scoped lang="less">
.b-style{
  width: 40%;
  height: 50%;
  background: rgb(248, 203, 56);
}
</style>

默认显示，获取store中state的值

点击B组件按钮，A组件的值随即改变，store使用正常

通过在vue3使用，router、vuex用法与vue2基本一致。

请继续往下阅读

Vue3新特性体验--中（Composition API）_前端菜小白leo的博客-CSDN博客Vue3中的Composition API主要作用是便于整合代码，将实现相同功能的代码集中在一起，便于维护管理，Composition API新特性的入口-- setup()函数，该函数是为组件提供的新属性。造个简单的实例感受一下。本篇实例代码在上篇的基础上进行修改：Vue3新特性体验--上（内附简单实例，可直接使用）_前端菜小白leo的博客-CSDN博客现在，我们在A组件实现一个小功能，点击按钮改变显示内容。vue2中的写法：<template> <div clhttps://blog.csdn.net/qq_41809113/article/details/121046555?spm=1001.2014.3001.5501