Vue3 使用详解

一、vue3使用axios

Vue3与Vue2相比带来了许多更为方便的特性，其中使用axios是我们最常用的。使用Vue3+axios可以很方便地实现前后端交互。

下面是Vue3中使用axios的示例：

  const axios = require('axios').default;
  const instance = axios.create({
    baseURL: 'http://localhost:3000/',
    timeout: 1000,
    headers: {'X-Requested-With': 'XMLHttpRequest'}
  });

  export default {
    get: async (path, payload) => {
      try {
        const res = await instance.get(path, {
          params: payload
        });
        return res.data;
      } catch (err) {
        return Promise.reject(err);
      }
    },
    post: async (path, data) => {
      try {
        const res = await instance.post(path, data);
        return res.data;
      } catch (err) {
        return Promise.reject(err);
      }
    }
  }

二、vue3使用svg图标

Vue3中可以使用svg图标，可以很方便地实现使用SVG图标的需求。与Vue2相比，Vue3在使用SVG图标时更为简便。

下面是Vue3中使用SVG图标的示例：

  
  

  <script>
    import SvgIcon from '@/components/SvgIcon/index.vue'
    export default {
      name: 'Example',
      components: {
        SvgIcon
      }
    }
  </script>

三、vue3使用ref

使用Vue3时，我们通常使用ref获取子组件。使用ref可以方便地操作DOM元素、子组件等，是Vue3中十分重要的新特性。

下面是Vue3中使用ref的示例：

  
  

  <script>
    import { ref, onMounted } from 'vue'
    export default {
      setup() {
        const message = ref('Hello, Vue3!')
        const app = ref(null)

        onMounted(() => {
          console.log(app.value)
        })

        return {
          message,
          app
        }
      }
    }
  </script>

四、vue3使用路由

Vue3中使用路由非常简便，而且方便扩展。Vue3中的路由与Vue2相比基本没有太大的区别。

下面是Vue3中使用路由的示例：

  import { createRouter, createWebHashHistory } from 'vue-router'

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

  const router = createRouter({
    history: createWebHashHistory(),
    routes
  })

  export default router

五、vue3使用pinia

Pinia是Vue3的新状态管理库。与Vue2的Vuex相比，Pinia更为轻量化，而且与Vue3的响应式系统更为紧密地结合。

下面是Vue3中使用Pinia的示例：

  import { defineStore } from 'pinia'

  export const useTodoStore = defineStore({
    id: 'todo',
    state: () => ({
      todos: [
        {
          text: 'Learn Vue3',
          done: false
        }
      ]
    }),
    actions: {
      add(text) {
        this.todos.push({ text, done: false })
      },
      toggle(index) {
        this.todos[index].done = !this.todos[index].done
      }
    }
  })

六、vue3使用插槽

Vue3中的插槽与Vue2相比基本没有太大的区别。

下面是Vue3中使用插槽的示例：

七、vue3使用vue2组件

在使用Vue3过程中，我们可能会用到一些Vue2的组件。Vue3中可以兼容使用Vue2的组件。

下面是Vue3中使用Vue2组件的示例：

  import { createApp } from 'vue'
  import App from './App.vue'
  import Vue2Component from './Vue2Component.vue'

  const app = createApp(App)

  app.component('vue2-component', Vue2Component)

  app.mount('#app')

八、vue3使用vuex

Vue3支持使用Vuex进行状态管理。与Vue2相比，Vuex在Vue3中也可以很方便地使用。

下面是Vue3中使用Vuex的示例：

  import { createStore } from 'vuex'

  const store = createStore({
    state() {
      return {
        count: 0
      }
    },
    mutations: {
      increment(state) {
        state.count++
      }
    }
  })

  export default store

九、vue3使用antd

Ant Design是一套非常优秀的UI库，可以让我们快速地构建漂亮的网站。Vue3中也支持使用Ant Design。

下面是Vue3中使用Ant Design的示例：

  import 'ant-design-vue/dist/antd.css'
  import { Button } from 'ant-design-vue'

  export default {
    name: 'Example',
    components: {
      Button
    }
  }

十、vue3使用计算属性

Vue3中支持使用计算属性。与Vue2相比，计算属性在Vue3中没有太大的变化。

下面是Vue3中使用计算属性的示例：

  
  

  <script>
    import { computed } from 'vue'

    export default {
      name: 'Example',
      setup() {
        const title = computed(() => {
          return 'Hello, Vue3!'
        })
        const content = computed(() => {
          return 'This is an example of Vue3 computed property.'
        })

        return {
          title,
          content
        }
      }
    }
  </script>