vue2到vue3的极简迁移之路

1、项目创建

支持两种方式：vuecli和vite。前者不在细说。提供vite的创建方法：

npm init vite-app vue3-demo

cd vue3-demo

npm install && npm run dev

可以看到，构建几乎是秒开。vite之所以构建迅速就是因为它和webpack走了相反的道路，如下图：

 很显然，vite一上来直接就把server准备好了，然后异步引入，你需要什么就引入什么，所以速度上占了优势。

2、组合api

目前vue3在写法上还是兼容vue2的，options API（data， computed，methods）还是可以写入组件，但是新增的组合api却应该更令人关注。

2.1、setup函数

setup函数就是组合api们大展身手的舞台了。所有相关的数据、方法全部写在里边。举个例子

export default {
    name: 'app',
    setup () {
        // 定义一个数据,注意这个数据不是响应式的
        let num = 100;
        function changNum () {
            num = 1000
        }
        return {
            num,
            changeNum
        }
    }
}

这里需要注意的就是以下两点：

1、setup的执行时机是在beforeCreate和created之间，所以没有this。

2、setup中定义的方法和数据都要return出去，才能在模板中使用，否则无效。

setup函数有个两个参数 - props和context。

第一个props，不再多说，就是父级传递过来的数据。

第二个context，字面意思是上下文。他里边主要包含了三个东西：attrs，slots，emits。

attrs这个东西就是vue2中$attrs，俗称“捡漏之王”。只要是传递过来的数据，不在props中，就会在attrs中。这个很好理解。

slots这个就是插槽。所有的slot都存在这里。

emits对应的就是$emit。

很好理解，可以自己打印出来多试试。

2.2、响应式数据的创建 - ref和reactive

vue2中创建一个响应式的数据，直接写在data中就可以。但是在vue3中创建响应式数据，就必须引入组合api -- ref和re