【寒假自学之路】Vue2到Vue3的迁移学习

---

安装

---

1. 通过脚手架Vite【vue的轻量级前端开发与构建工具】

  npm init vite hello-vue3 -- --template vue

2. 通过vue-cli脚手架

  vue create hello-vue3

3. 通过CDN引入

  <script src="https://unpkg.com/vue@next"></script>

---

新特性

---

• 组合式API
• Teleport
• 片段
• 触发组件选项
• 来自@vue/runtime-core的createRendererAPI,用于创建定义渲染器
• 单文件组合式API语法糖(<script setup>)
• 单文件组件状态驱动的CSS变量(<style>中的v-bind)
• SFC <style scoped> 现在可以包含全局规划或只针对插槽内容的规则
• Suspense（实验阶段）

---

vue2到vue3中的变化

---

1. vue实例创建

在vue3中,没有组件构造器的概念

  //vue 2
  const app = new Vue({
   })
  //vue 3
  const app = createApp(App)

2. vue-router的使用

需要配置vue-router4.0以上版本

  //必须在app.mount('#app');之前  
  app.use(router);  // 使用的是router的实例，而不是构造器。

  //router.js
  import {
    createRouter, createWebHashHistory } from "vue-router";

  import Ref from './components/Ref.vue';
  const routes = [{
   
      path: '/ref',
      component: Ref,
  }];
  const router = createRouter({
   
      history: createWebHashHistory(),
      routes,
  })

  export default router;

3. vuex的使用

需要配置vuex4.0以上版本

  // 必须在app.mount('#app');之前
  app.use(store);

  import {
    createStore } from 'vuex'
  const store = createStore({
   
      state: {
   
          message: "this is the message from vuex store",
      }
  })
  export default store;

4. v-for中的ref数组

在vue2中，使用的refattribute会用ref数组填充对应的$refproperty。如果存在v-for嵌套的情况下，行为不明确且效率低

在vue3中不再自动创建$ref数组，需要从单个绑定获取多个ref，即将ref绑定到一个灵活的函数上

<ul>
    <li v-for='movie in movies' 
    :key='movie.id' 
    :ref="setMovieVNs">
    {
  { movie.name }}</li>
</ul>

export default {
  name: "Ref",
  data() {
    return {
        movies:[{
            id:1,
            name:"长津湖"
        },{
            id:2,
            name:"铁道游击队"
        },{
            id:3,
            name:"金刚川"
        },],
        movieNVs:[],
    }
  },
  methods:{
      setMovieVNs(el){  //需要手动将创建的虚拟节点，放入自创数组中。
          if(el){
              this.movieNVs.push(el);
          }
      },
      showRef(){
          console.log(this.movieNVs);
      }
  }
}

5. 异步组件

概述：

• 新的defineAsyncComponent,用于显式地定义异步组件
• component选项被重命名为loader
• Loader函数本身不再接收resolve和reject参数，且必须返回一个Promise

什么是异步组件?

就是当有需要的时候，才会去进行加载，并且把结果缓存起来，供未来重载使用。

一般配合路由使用（Vue Router 2.4.0+）。但路由的懒加载，不能使用defineAsyncComponent

vue2

  const AsyncHomeComponent = () => import('./src/App.vue'); //简单写法
  // 高阶写法
  const AsyncHomeComponent = () => {
    
    // 需要加载的组件
    component: import ('./src/App.vue'),
    // 正在加载的时候响应的组件
    loading: LoadingComponent,
    // 加载失败的时候响应的组件
    error: ErrorComponent,
    // 显示加载时组件的延时时间。（默认200ms）
    delay: 200,
    // 超时时间，超时则显示error组件。（默认`Infinity`）
    timeout: 3000,
}

vue3

import {
    defineAsyncComponent } from 'vue';
const AsyncHomeComponent = defineAsyncComponent({
   
    // 需要加载的组件
    laoder: () =>
        import ('./src/App.vue'),
    // 正在加载的时候响应的组件
    loading: LoadingComponent,
    // 加载失败的时候响应的组件
    error: ErrorComponent,
    // 显示加载时组件的延时时间。（默认200ms）
    delay: 200,
    // 超时时间，超时则显示error组件。（默认`Infinity`）
    timeout: 3000,
}