手拉手带你开启Vue3世界的鬼斧神工

前言

2020注定是不平凡的一年，无论是疫情的横空出世，还是世界局势的激烈动荡，抑或是股市的跌宕起伏，我相信很多国人都会有一种庆幸我是中国人的深刻感悟。作为一名技术宅，除了疫情，更多的还是雨女无瓜，随着Vue3.0 Beta的推出，大家都争先恐后的尝了鲜，笔者也不例外，经过一番研究，觉得Vue3也的确存在它独特的魅力，也应该写一篇博客方便还没有体验的朋友能够快速对其有一个大体的认知。

开始

此文默认你已熟悉Vue2.x相关知识

环境搭建

配置路由

项目中执行npm install vue-router@4.0.0-alpha.7 -S

按照一般规范，在src目录下新建router文件夹，并在router文件夹中新建index.js文件。

index.js内容:

import { createRouter, createWebHashHistory } from 'vue-router';
import Home from '../components/home'const routes = [{path: '/', redirect: '/home'},{path: '/home', component: Home}
]export default createRouter({history: createWebHashHistory(),routes
})复制代码

基本的路由配置没有太大改变，大多数情况下你只需要关注routes中路由规则编写。接下来，我们需要在main.js中接入router。

main.js:

import { createApp } from 'vue';
import App from './App.vue'
import router from './router';const app = createApp(App);app.use(router);
app.mount('#app');复制代码

不同于我们之前采用new Vue()创建实例的方式，Vue3在这里进行了改变；不仅如此，我们不难发现，安装路由的方式也由之前的Vue.use(Router)变成如上方式，同理对于Vuex的接入也是大同小异，笔者这里就不过多赘述了。

App.js

<template><div id="app"><router-view></router-view></div>
</template>
复制代码

基础语法初探

setup

setup功能是新的组件选项，它充当在组件内部使用Composition API（新特性）的入口点；创建组件实例时，在初始道具解析后立即调用。在生命周期方面，它在beforeCreate挂接之前被调用。

一般来说，按照我们之前常规的写法，我们在对需要使用变量、计算属性的时候，我们会习惯性的写上：

home/index.vue

<template><div class='home'><div>{{count}}</div><div>{{foo}}</div></div>
</template><script>import { ref } from 'vue'export default {name: 'home',data() {return {count: 0}},computed: {foo() {return this.count + 1;}}
};
复制代码

两者是需要被分类到各自的对象中，在同等功能实现上来说，Vue3的实现如下:

<template><div class='home'><div>{{count}}</div><div>{{foo}}</div></div>
</template><script>import { ref, computed } from 'vue'export default {name: 'home',setup(props, context) {const count = ref(0)const foo = computed(() => count.value + 1)return {count,foo}}
};
</script>复制代码

看到这种语法你是不是懵了，不用慌，这部分着重介绍setup这个入口函数，具体内部语法可以先不用在意，后面都会进行对应性一一讲解。

setup接收两个重要参数：

props：这个自然不用多提了，等同于vue2的props，在这个地方我们需要注意的地方是，我们不能对这个参数进行解构，如果使用解构会使他失去响应性。例如下面代码就会让props传过来的值失去响应性：

export default {props: {name: String},setup({ name }) {watchEffect(() => {console.log(`name is: ` + name) // 失去响应性!})}
}复制代码

context：其实这个参数我们也是比较熟悉的，它提供了一个上下文对象，该对象公开了先前this在2.x API中公开的属性的选择性列表，它仅包含三个属性（attrs、slots、emit），举个栗子：

setup(props, context) {context.attrs // 2.x：this.attrscontext.slots // 2.x：this.slotscontext.emit // 2.x：this.emit
}复制代码

看完代码，我们基本可以理解为setup函数就是我们整个组件各项逻辑关系以及操作的入口了，在Vue3中，我们使用不同api的方式都是采用导入的形式，这就相当于我们有了更大的操作空间，有了更大的自由性。

虽然说Vue3向下兼容Vue2，但是这里其实我们需要注意的是，我们应该尽量避免2.x和setup函数的混用，这将会导致一些问题。

reactive

取得一个对象并返回原始对象的反应式代理。这等效于2.x的Vue.observable()。

对这个api用法，笔者用代码讲解会比较好理解：

<template><div class='home'><div>{{name}}</div></div>
</template><script>import { reactive } from 'vue'export default {name: 'home',setup() {const obj = reactive({name: '流星啊'})obj.name = 'bilibili'; // 修改属性值return obj;}
};
</script>
复制代码

相信大家已经看出来端倪，没错，这个api就是单纯的把一个对象变得可响应。

ref

接受一个内部值并返回一个反应性且可变的ref对象。ref对象具有.value指向内部值的单个属性。

在这里我估计有小伙伴就要问了，这不就是2.x里的ref吗，不不不，在3.x它跟那个种在标签上的ref没有半点关系，也和$refs没有任何关系，对于新的类似于2.x的获取dom的方式请看模板引用部分。

同样，举个栗子：

<template><div class='home'><div>{{count}}</div></div>
</template><script>import { ref } from 'vue'export default {name: 'home',setup() {const count = ref(0);count.value++; // 有疑问的往下看笔者介绍console.log(count.value);return {count};}
};
</script>
复制代码

这里也有一个注意点，你如果想要修改使用ref构造出来的变量，只能对xxx.value进行修改，同理你想要在js中访问它的值必须使用xxx.value，直接对count进行赋值如count++，这种写法会报错。

在这里估计又有小伙伴要问了，那为啥在template模板中使用{{count}}访问的时候不用加.value，这里其实你在使用插值表达式的时候，它内部会自动展开，所以我们直接用就行了。

如果说我们把reactive和ref结合起来用会有怎样的奇淫巧计呢