2021-07-17 Vue 3.0新特性

1. vite
   vite 是一个基于 Vue3 单文件组件的非打包开发服务器，它做到了本地快速开发启动。
   创建一个vue的项目可以用vite创建

npm init vite-app 
cd 
npm install 
npm run dev
//或者
yarn create vite-app 
cd 
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 和样式就会变得很困难。

4 .fragments
一个 Vue 模板可以有多个根节点, 3.0之前一个vue模板只有一个根节点

5.Emits
Vue官方建议我们在组件中所有的emit事件都能在组件的emits选项中声明
emits参数有俩种形式对象和数组，对象里面可以配置带校验emit事件，为null的时候代表不校验，校验的时候，会把emit事件的参数传到校验函数的参数里面
当校验函数不通过的时候，控制台会输出一个警告，但是emit事件会继续执行