1、使用vite构建项目
Vite是一种新型前端构建工具，能够显著提升前端开发体验。
vite 的优势：
- 冷服务： 默认的构建目标浏览器是能 在 script 标签上支持原生 ESM 和 原生 ESM 动态导入
- HMR： 速度快到惊人的 模块热更新（HMR）
- Rollup打包 ： 它使用 Rollup 打包你的代码，并且它是预配置的 并且支持大部分rollup插件
1.1 vite 构建 vue 项目
npm init vite@latest
1.2 Vite目录
- public： 下面的不会被编译 可以存放静态资源
- assets： 下面可以存放可编译的静态资源
- components： 下面用来存放我们的组件
- App.vue： 是全局组件
- main.ts： 全局的ts文件
- index.html： 非常重要的入口文件 （webpack，rollup 他们的入口文件都是enrty input 是一个js文件 而Vite 的入口文件是一个html文件，他刚开始不会编译这些js文件 只有当你用到的时候 如script src=“xxxxx.js” 会发起一个请求被vite拦截这时候才会解析js文件）
2、模板语法 & 指令
2.1 模板语法
-
在script 声明一个变量可以直接在template 使用用法为
{{变量名称}}<template> <div>{{ message }}</div> </template> <script setup lang="ts"> const message = "我是小黑" </script> -
模板语法编写 条件运算 和 运算
<template> <div>{{ message == 0 ? '我是0' : '我1' }}</div> <div>{{ counter + 1 }}</div> </template> <script setup lang="ts"> const message:number = 1 const counter:number = 0 </script> -
操作API
<template> <div>{{ message.split('，') }}</div> </template> <script setup lang="ts"> const message:string = "我，不，是，0" </script>
2.2 指令
指令 (Directives) 是带有 v- 前缀的特殊 attribute。
v-text用来显示文本v-html用来展示富文本v-if用来控制元素的显示隐藏（切换真假DOM）v-else-if表示 v-if 的“else if 块”。可以链式调用v-else v-if条件收尾语句v-show用来控制元素的显示隐藏（display none block Css切换）v-on简写@ 用来给元素添加事件v-bind简写: 用来绑定元素的属性Attrv-model双向绑定v-for用来遍历元素v-on修饰符
3、Ref 全家桶
ref：
- 接受一个内部值并返回一个响应式且可变的 ref 对象。
- ref 对象仅有一个
.valueproperty，指向该内部值。
isRef：
- 判断是不是一个ref对象
shallowRef：
创建一个跟踪自身 .value 变化的 ref，但不会使其值也变成响应式的
customRef:
自定义ref , customRef 是个工厂函数要求我们返回一个对象 并且实现 get 和 set
4、Reactive 全家桶
reactive
-
用来绑定复杂的数据类型 ，例如 对象 数组
-
不可以绑定普通的数据类型，否则会报错
import { reactive} from 'vue' let person = reactive('sad')
readonly
拷贝一份proxy对象将其设置为只读
shallowReactive
只能对浅层的数据 如果是深层的数据只会改变值 不会改变视图
5、to系列 全家桶
6、computed 计算属性
watch 函数：侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。
<script setup>
import { ref, watch } from 'vue'
const question = ref('')
const answer = ref('Questions usually contain a question mark. ;-)')
// 可以直接侦听一个 ref
watch(question, async (newQuestion, oldQuestion) => {
if (newQuestion.indexOf('?') > -1) {
answer.value = 'Thinking...'
try {
const res = await fetch('https://yesno.wtf/api')
answer.value = (await res.json()).answer
} catch (error) {
answer.value = 'Error! Could not reach the API. ' + error
}
}
})
</script>
<template>
<p>
Ask a yes/no question:
<input v-model="question" />
</p>
<p>{{ answer }}</p>
</template>
watch 的第一个参数可以是不同形式的“来源”：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个来源组成的数组。
7、watch 侦听器
8、vue3 生命周期
<script setup>
import { onMounted } from 'vue'
onMounted(() => {
console.log(`the component is now mounted.`)
})
</script>
还有其他一些钩子，会在实例生命周期的不同阶段被调用，最常用的是 onMounted，onUpdated 和 onUnmounted。
onMounted
注册一个回调函数，在组件挂载完成后执行。
评论区