Vue3+TypeScript+Vite 学习笔记（持续更新中）

文章目录

一、Vue3 基础环境配置
- 1、检查当前 node 版本：（`需要 node 在10 及以上`）
- 2、安装 vue-cli 脚手架：
- 3、创建项目：
- 4、自定义Eslint 规则:
二、Vue3新特性详解
- 1. ref（Vue3 响应式 API）的妙用：
- 2、reactive
- 3、toRefs
- 4、了解 vue3 生命周期
- - 生命周期钩子函数的使用：
- 5、自定义 hooks `（重点）`
- 6、Teleport `(远程传送)`
- - 第一步: 将想要传送到其他地方的组件的主体，用 teleport 标签包裹
  - 第二步：在 index.html 文件中定义想要挂载到的地方
- 7、Suspense—— 用于解决异步请求的困境
- 8、provide/inject 的妙用
- - 使用一：定义局部数据
  - 使用二：在 main.ts 中定义全局数据
- 9、setUp 语法糖
- 10、setUp 语法糖进阶`(暂留)`

一、Vue3 基础环境配置

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

node -v

2、安装 vue-cli 脚手架：

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

3、创建项目：

// 命令行创建项目：
vue create vue3-basic// 图形化界面创建项目：
vue ui

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' ,}

二、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}}
};

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>

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>

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>

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 = falseloaded.value = trueresult.value = response.data }).catch((e) => { error.value = eloading.value = false})return {result,loading,loaded,}
}
export default useURLLoader

6、Teleport `(远程传送)`

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

<template>// 通过 id 去寻找定位<Teleport to="#modle"><div id="center"><h2>this is a model</h2></div></Teleport>
</template>

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

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

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

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

<template><Suspense>// 放异步请求之后的东西<template #default><AsycShowVue /> </template>// 这里面放异步请求完成前的 Loading 组件<template #fallback><h1>Loading.....!</h1></template></Suspense>
</template>

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

  setup() {const error =ref(null)onErrorCaptured((e: any) => {error.value = e});return {error};},

8、provide/inject 的妙用

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

使用一：定义局部数据

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

<script lang="ts">
// 在子组件或层级更深的组件中中引入 inject
import { inject } from "vue";
export default defineComponent({setup() {const lang = inject('lang')// 接受变量return{lang }},
});
</script>

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

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

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>

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

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

Vue3+TypeScript+Vite 学习笔记（持续更新中）相关推荐

typescript-----javascript的超集，typescript学习笔记持续更新中......
Typescript,冲! Typescript 不是一门全新的语言,Typescript是 JavaScript 的超集,它对 JavaScript进行了一些规范和补充.使代码更加严谨. 一个特别好 ...
JS逆向学习笔记 - 持续更新中
JS逆向学习笔记寻找深圳爬虫工作,微信:cjh-18888 文章目录 JS逆向学习笔记一. JS Hook 1. JS HOOK 原理和作用原理:替换原来的方法. (好像写了句废话) 作用: 可 ...
专升本计算机公共课学习笔记(持续更新中...)
计算机公共课学习笔记第一章计算机基础知识(30分) 1.计算机概述计算机(Computer)的起源与发展计算机(Computer)也称"电脑",是一种具有计算功能.记忆功能 ...
Docker快速入门学习笔记-持续更新中
Docker安装 #1.卸载旧的版本 yum remove docker \ docker-client \ docker-client-latest \ docker-common \ docker ...
Java学习笔记(持续更新中)
文章目录项目实战 mall项目(SpringBoot项目) 1. 添加Swagger-UI配置,修改MyBatis Generator注释的生成规则 2. redis基础配置 3. SpringSe ...
重拾CCNA，学习笔记持续更新ing......(4)
重拾CCNA,学习笔记持续更新ing......(4) 路由器作用功能的经典解说(笑)(非原创) 假设你的名字叫小不点,你住在一个大院子里,你的邻居有很多小伙伴,在门口传达室还有个看大门的李大爷,李大 ...
Admin.NET管理系统（vue3等前后端分离）学习笔记--持续更新
我的学习笔记 - 9iAdmin.NET 欢迎学习交流 (一)前端笔记 1.1 关于.env的设置 1.2 关于路由模式问题 1.3 关于 vue.config.ts 1.4 关于打包(pnpm r ...
SpringCloud学习笔记，课程源自黑马程序员，笔记持续更新中...
@SpringCloud+RabbitMQ+Docker+Redis+搜索+分布式: 学习内容 1.服务拆分-服务远程调用: 2.搭建eureka服务: 2.1.eureka服务注册-client 2 ...
技术胖前端学习路线学习笔记【更新中】
文章目录技术胖前端学习路线学习笔记 1. 网络知识 2. 超文本标记语言(HTML) 3.层叠样式表(CSS) 4.浏览器脚本语言(JavaScript) 5.版本控制管理系统Version Con ...

Vue3+TypeScript+Vite 学习笔记（持续更新中）

文章目录

一、Vue3 基础环境配置

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

2、安装 vue-cli 脚手架：

3、创建项目：

4、自定义Eslint 规则:

二、Vue3新特性详解

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

2、reactive

3、toRefs

4、了解 vue3 生命周期

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

5、自定义 hooks `（重点）`

6、Teleport `(远程传送)`

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

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

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

8、provide/inject 的妙用

使用一：定义局部数据

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

9、setUp 语法糖

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

Vue3+TypeScript+Vite 学习笔记（持续更新中）相关推荐

最新文章

热门文章

Vue3+TypeScript+Vite 学习笔记（持续更新中）

文章目录

一、Vue3 基础环境配置

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

2、 安装 vue-cli 脚手架：

3、创建项目：

4、 自定义Eslint 规则:

二、Vue3新特性详解

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

2、reactive

3、toRefs

4、了解 vue3 生命周期

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

5、自定义 hooks （重点）

6、Teleport (远程传送)

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

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

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

8、provide/inject 的妙用

使用一：定义局部数据

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

9、setUp 语法糖

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

Vue3+TypeScript+Vite 学习笔记（持续更新中）相关推荐

最新文章

热门文章

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

2、安装 vue-cli 脚手架：

4、自定义Eslint 规则:

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

5、自定义 hooks `（重点）`

6、Teleport `(远程传送)`

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

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