Vue3+TypeScript+Vite 学习笔记（持续更新中）_csdn 礼貌而已

一、Vue3 基础环境配置

1、 检查当前 node 版本：（需要 node 在10 及以上）

node -v
1

2、 安装 vue-cli 脚手架：

// 安装脚手架
npm install -g @vue-cli
// 查看当前脚手版本--确保当前版本在 4.5.0 及以上，以便于支持创建最新版本的 vue3
vue --version
1
2
3
4

3、创建项目：

// 命令行创建项目：
vue create vue3-basic

// 图形化界面创建项目：
vue ui
1
2
3
4
5

4、 自定义Eslint 规则:

 /**
  * 可以在 eslint 配置文件的 rules 里面，单独配置我们想要自定义的 rule
  * rule 一共三个级别：
  * 可以用： 0,1,2
  * 也可以用 off  warn  error
  */
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    // 下面这条就是我自定义的
    'vue/multi-word-component-names': 'off' ,
  }
1
2
3
4
5
6
7
8
9
10
11
12

---

二、Vue3新特性详解

1. ref（Vue3 响应式 API） 的妙用：

支持所有数据类型

---

总结：变量用 ref 包裹。要用啥就 return 啥

<template>
  <div class="hello">
      <h1>{{ count }}</h1>
      <h1>这是 double 后的值：{{ double }}</h1>
      <button @click="increase">加一</button>
  </div>
</template>

<script lang="ts">
import { ref ,computed} from 'vue'
export default {
  name: 'HelloWorld',
  setup() {
    // 通过 ref 包裹，让变量变成响应式对象
    const count = ref(0) 
    // 定义方法使用箭头函数
    const increase = ()=>{ 
       count.value ++
    }
    const double = computed(() => { 
       return count.value*2
    })
    return {
      /**
       * 此处原本应该写：count:count（key:value 格式），但是键值对 名字相同，可以简写。
       */
      count,
      // 方法同样需要导出
      increase,
      double
    }
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

2、reactive

reactive 和 ref 相似点：都能将数据编程响应式
不同点：reactive 只能包裹 引用数据类型，如：Array、Object 、Map 、Set

---

而且，由于 reactive包裹后，要写 data.count 而不能直接 用 count ，很不方便，如实引入 toRefs

<template>
  <div class="hello">
      <h1>{{ data.count }}</h1>
      <h1>这是 double 后的值：{{ data.double }}</h1>
      <button @click="data.increase">加一</button>
  </div>
</template>

<script lang="ts">
import { computed, reactive } from 'vue'
interface DataProps { 
  count: number;
  double: number;
  increase:()=> void;
}
export default {
  name: 'HelloWorld',
  setup() {
    const data:DataProps = reactive( { 
      count: 0,
      increase: () => { 
        data.count++
      },
      double: computed(() => { 
        return data.count*2
      })
    })
    return {
      data
    }
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

3、toRefs

将数据转成响应式数据，就可以直接用插值语法使用。只适用于响应式对象的属性

<template>
  <div class="hello">
      <h1>{{ count }}</h1>
      <h1>这是 double 后的值：{{ double }}</h1>
      <button @click="increase">加一</button>
  </div>
</template>

<script lang="ts">
import { computed, reactive, toRefs } from 'vue'
interface DataProps { 
  count: number;
  double: number;
  increase:()=> void;
}
export default {
  name: 'HelloWorld',
  setup() {
	const data:DataProps = reactive( { 
      count: 0,
      increase: () => { 
        data.count++
      },
      double: computed(() => { 
        return data.count*2
      })
    })
    // 可以通过 toRefs 将数据转成响应式数据
    const refData= toRefs(data)
    return {
      /**
       * 将 refData 展开
       * 等同于：count:refData.count、increase：refData.increase .....
       */
      ...refData
    }
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

4、了解 vue3 生命周期

直接前往 Vue.js官网查看

生命周期钩子函数的使用：

<script lang="ts">
// 引入想要使用的生命周期
import { onMounted,onUpdated } from 'vue'
export default {
  name: 'HelloWorld',
  setup() {
    // 传入一个回调函数作为参数
    onMounted(() => { 
      console.log("Mounted")
    })
    onUpdated(() => { 
      console.log("Updated")
    })
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

5、自定义 hooks （重点）

@FilePath: \vue3-basic\src\hooks\useURLLoader.ts

import { ref } from 'vue'
import axios from 'axios'

function useURLLoader<T>(url:string) {
  const result = ref<T | null>(null)
  const loading = ref(true)
  const loaded = ref(false)
  const error = ref(null)

  axios.get(url).then((response) => {
    loading.value = false
    loaded.value = true
    result.value = response.data 
  }).catch((e) => { 
    error.value = e
    loading.value = false
  })

  return {
    result,
    loading,
    loaded,
  }
}
export default useURLLoader 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

6、Teleport (远程传送)

第一步: 将想要传送到其他地方的组件的主体，用 teleport 标签包裹

<template>
  // 通过 id 去寻找定位
  <Teleport to="#modle">
    <div id="center">
      <h2>this is a model</h2>
    </div>
  </Teleport>
</template>
1
2
3
4
5
6
7
8

第二步： 在 index.html 文件中定义想要挂载到的地方

<div id="modle"></div>
1

7、Suspense—— 用于解决异步请求的困境

Suspence 是 Vue3 推出的一个内置的特殊组件，通过使用 Suspense,返回一个 promise

<template>
  <Suspense>
    // 放异步请求之后的东西
    <template #default>
      <AsycShowVue /> 
    </template>
    // 这里面放异步请求完成前的 Loading 组件
    <template #fallback>
      <h1>Loading.....!</h1>
    </template>
  </Suspense>
</template>
1
2
3
4
5
6
7
8
9
10
11
12

注：可以在 setUp 中 用 onErrorCaptured 钩子函数捕获异步请求的错误

  setup() {
    const error =ref(null)
    onErrorCaptured((e: any) => {
       error.value = e
    });
    return {
      error
    };
  },
1
2
3
4
5
6
7
8
9

8、provide/inject 的妙用

（作用：用于全局变量共享，避免变量在层级很深的嵌套组件中传递）

使用一：定义局部数据

<script lang="ts">
// 在父组件或根组件中引入 Provie
import { provide } from "vue";
export default defineComponent({
  setup() {
    const lang = ref('en')
    // 定义想要传递的变量
    provide('lang', lang)
  },
});
</script>
1
2
3
4
5
6
7
8
9
10
11

<script lang="ts">
// 在子组件或层级更深的组件中中引入 inject 
import { inject } from "vue";
export default defineComponent({
  setup() {
    const lang = inject('lang')
    // 接受变量
    return{
      lang 
    }
  },
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

使用二：在 main.ts 中定义全局数据

import { createApp } from 'vue'
import App from './App.vue'
// 将用户名 定义为全局变量，然后即可在该实例下的所有组件中，用 inject去接收对应的变量
const app = createApp(App)
app.provide('currentUser', {name:'viking'})

app.mount('#app')
1
2
3
4
5
6
7

9、setUp 语法糖

注意：需查看 package.json, 确保当前 vue3项目的版本在 3.2 以上)

优点：

• 更少的样板内容，更简洁的代码
• 能够使用纯 TypeScript 声明 props 和抛出事件
• 更好的运行时性能
• 更好的 IDE 类型推断性能

<template>
  <div class="App-2">
    <h1>这是 App2</h1>
    <h2>这是 count：{{ count }}</h2>
    <button @click="addCount">Add</button>
    <HelloWorld/>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import HelloWorld from './components/HelloWorld.vue';

// 可以将暴露在顶层作用域中的变量直接 return 出去
const count = ref(0);
const addCount = () => {
  count.value++
}
</script>
<style scoped lang="scss">
.App-2 {
  text-align: center;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

10、setUp 语法糖进阶(暂留)

后面抽空仔细看看 defineProps 和 defineEmits 的相关使用