- vite
vite 是一个基于 Vue3 单文件组件的非打包开发服务器，它做到了本地快速开发启动。
创建一个vue的项目可以用vite创建
npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev
//或者
yarn create vite-app <project-name>
cd <project-name>
yarn
yarn dev
（1）快速的冷启动，不需要等待打包操作；
（2）即时的热模块更新，替换性能和模块数量的解耦让更新飞起；
（3）真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。
- Composition API
Composition API字面意思是组合API，它是为了实现基于函数的逻辑复用机制而产生的
基本使用
setup() {
//setup 函数是一个新的组件选项。作为在组件内使用 Composition API 的入口点
//此函数没有created和beforeCreated
//与counter相关的
const {counter, doubleCounter} = useCounter()
//单值响应式 ref: 接受一个参数值并返回一个响应式且可改变的 ref 对象。ref 对象拥有一个指向内部值的单一属性 .value。
const msg1 = ref('我是单值 message')
const modalOpen = ref(false)
return {counter, doubleCounter, msg1, modalOpen}
},
function useCounter() {
//多值响应式 reactive: 接收一个普通对象然后返回该普通对象的响应式代理。等同于 2.x 的 Vue.observable()
const data = reactive({
counter: 1,
doubleCounter: computed(() => data.counter * 2)
})
let timer;
onMounted(() => {
timer = setInterval(() => {
data.counter++
}, 1000)
})
onUnmounted(() => {
clearInterval(timer)
})
// toRefs 是针对整个对象的所有属性，目标在于将响应式对象（ reactive 封装）转换为普通对象
return toRefs(data)
}
- teleport
Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术，就有点像哆啦A梦的“任意门”
场景：像 modals,toast 等这样的元素，很多情况下，我们将它完全的和我们的 Vue 应用的 DOM 完全剥离，管理起来反而会方便容易很多，原因在于如果我们嵌套在 Vue 的某个组件内部，那么处理嵌套组件的定位、z-index 和样式就会变得很困难。
<template>
<!-- to 属性就是目标位置 -->
<teleport to="body">
<div v-if="modalOpen" class="modal">
<div> 这是一个模态窗口! 我的父元素是"body"!
<button @click="changeModel()">Close</button>
</div>
</div>
</teleport>
</template>
4 .fragments
一个 Vue 模板可以有多个根节点, 3.0之前一个vue模板只有一个根节点
<template>
<div>fragment1</div>
<div>fragment2</div>
<div>fragment3</div>
</template>
5.Emits
Vue官方建议我们在组件中所有的emit事件都能在组件的emits选项中声明
emits参数有俩种形式对象和数组，对象里面可以配置带校验emit事件，为null的时候代表不校验，校验的时候，会把emit事件的参数传到校验函数的参数里面
当校验函数不通过的时候，控制台会输出一个警告，但是emit事件会继续执行
<template>
<button @click="handleClick">点击emit-不校验事件</button>
<button @click="handleOpen">点击emit-校验事件</button>
</template>
<script>
export default {
props: {
},
//emits 写自定义事件 作用 比较清晰知道该组件有那些自定义事件
emits: {
click: null,//click事件没有检验
open: (value) => {
if (typeof value === "string") {
return true;
} else {
return false;
}
},
},
created(){
},
data() {
return {
}
},
methods:{
handleClick(){
this.$emit("click");
},
handleOpen(){
this.$emit("open", 1);
},
}
};
</script>
