2021-07-17 Vue 3.0新特性

1. 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）真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。

2. 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)
    }

3. 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>