组合式API核心思想：直接在函数作用域内定义响应式状态变量，并将从多个函数中得到的状态组合起来处理复杂问题。（自由与灵活）
创建一个vite+vue项目：
- 1.npm init vue@latest (这一指令会安装并执行vue create)
- 2.cd name
- 3.npm install
- 4.npm run dev
检查一下node和脚手架是否已经安装成功
安装过程
目录结构
结合Volar
常用方法
1.indexOf()方法返回数组中某个指定的元素位置。
let food= ["番茄", "胡萝卜", "排骨", "苹果"];
let a = food.indexOf("苹果");
console.log(a) // 3
let b= food.indexOf("香蕉");
console.log(b) // -1
2.toFixed()保留两位小数点
var num = 3.1415926;
var strb = num.toFixed(2);
console.log("str",strb)//3.14
3.filter()过滤
//指定的数之前的都过滤掉
const arr = [1, 2, 3, 4, 5];
const filteredArr = arr.filter((num) => num > 3);
console.log("filteredArr",filteredArr)
4.replace()替换
const strdd = "hello world";
const newStr = strdd.replace("world", "Chatmoss");
console.log("newStr",newStr); // "hello Chatmoss"
实现API的异步数据请求和相应处理。
watchEffect fetch
响应式函数，它监测组件中的响应式数据，并在数据变化时执行回调函数。
用法：
import { ref, watchEffect } from 'vue'
const branches = ['mian', 'orgin']
const currentBranch = ref(branches[0])
const commits = ref(null)
watchEffect(ssync () =>{
const url = `${API_URL}${currentBranch.value}`
commits.value = await(await fetch(url).json()
})
defineAsyncComponent异步组件：（2种方法）
defineAsyncComponent vue3.0新增的全局函数，它接收一个函数作为参数，这个额函数返回一个Promise,这个Promise成功后会返回组件的定义。
- defineAsyncComponent：
import { defineAsyncComponent } from 'vue';
const AsyncComponent = defineAsyncComponent(()=>import(./AsyncComponent.vue))
- defineAsyncComponent
import { defineAsyncComponent } from 'vue'
const AsyncComponent = defineAsyncComponent({ loader: () => import('./AsyncComponent.vue'),
delay: 200, // 等待 200 毫秒后触发加载
timeout: 3000, // 最多等待 3 秒
errorComponent: ErrorComponent, // 加载失败时显示的组件
timeoutComponent: TimeoutComponent // 超时时显示的组件 })
- 首屏优化：在首屏加载时，我们可以先把必要的组件和逻辑加载进来，然后再根据用户的交互行为加载其他组件和逻辑，从而提高页面的加载速度和用户体验。
- 路由懒加载：在路由应用中，我们可以使用
defineAsyncComponent按需加载路由组件，从而减少首次加载时需要下载的 JS 文件大小，提高页面的性能和响应速度。 - 分块加载：在大型项目中，我们可以将组件按照功能分成多个包，然后使用
defineAsyncComponent动态加载这些组件包，从而实现代码分块，减少首次加载时需要下载的 JS 文件大小，提高加载速度。
总结一下defineAsyncComponent 可以帮助我们分离出不必要的逻辑和组件，并按需加载，从而提高页面的性能和用户体验。
<template>
<button @click="increment()">{{ count }}</button>
<button @click="decrement()">{{ counta }}</button>
<div>
<div>{{ user.name }}</div>
<div>{{ user.age }}</div>
<div>{{ user.address.province }}</div>
<div>{{ user.address.city }}</div>
</div>
</template>
<script setup>
import {ref,reactive,watch,} from 'vue'
//1.ref响应式变量
const count = ref(0)
const counta = ref(0)
// 2. reactive 响应式对象
const user = reactive({
name: 'Tom',
age: 18,
address: {
province: '浙江',
city: '杭州'
}
})
//3. age监听
watch(()=>user,(name,age)=>{
console.log('监听一下下啦:', name, age)
})
function increment(){
count.value ++
}
function decrement(){
counta.value --
}
</script>
