一、使用背景

最近公司需要搭建一个新项目，用于做官网。因为作为官网，首先项目不算大，一共只有十来个页面，并且想要用户体验感很好，所以最终选定以 Vue 作为技术栈。

虽然 Vue3 （中文官网）刚问世不久，但是如果采用VUE2 搭建项目，以后可能会面临 Vue 版本升级问题，从 Vue2 跨度到 Vue3 有很多不兼容的变更，并且时代在发展，使用新技术会更加具有 可维护可扩展性。

二、项目搭建

这里我使用的是 vue cli4 进行项目搭建

三、安装依赖

安装一些常用依赖，值得注意的是Vue3的某些插件与Vue2并不相同。

特别说明：

1、element-plus

这是基于 Vue 3.0 的桌面端组件库。

如何全局使用element-plus：

// plugins/element.js
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import 'dayjs/locale/zh-cn'
import locale from 'element-plus/lib/locale/lang/zh-cn'

export default (app) => {
    app.use(ElementPlus, { locale })
}

// main.js
import installElementPlus from './plugins/element'

const app = createApp(App)
installElementPlus(app)

// 使用
<template>
    <el-button>按钮</el-button>
</template>

2、 axios

值得注意的是，在Vue2中通过 new Vue()创建Vue实例，并没有app的概念，但是在Vue3中，引入了createApp。所以axios的y引用方式有所差异。具体内容参照：Vue3 安装axios使用报错：Uncaught TypeError: Cannot read property ‘use‘ of undefined。

如何使用axios：

// 方式一：全局挂载  此方式不合适于 将项目里的不同模块的请求都放在相应文件里,
// 因为我们在发请求时可能无法获取到当前实例this
// plugins/axios.js
export const plugin = {
    install: function (app, options) {
        console.log(options)
        // 添加全局的方法
        app.config.globalProperties.axios = _axios;
    }
}

// main.js
import { plugin as axios } from './plugins/axios'
const app = createApp(App)
app.use(axios)

//使用：
this.$axios.post('api/Login',{card:111}).then(res => console.log(res))


//方式二：直接使用
// plugins/axios.js
const _axios = axios.create(config)
export default _axios

// 使用：
import axios from '@/plugins/axios'

// 获取岗位类别
export function getJobCategories() {
    return axios.post('api/Login',{card:111})
}

3、Vue Router

Vue router4 也提供了hook钩子函数供使用。

在 setup里使用 router
bash import { useRouter } from "vue-router" const router = useRouter() router.push('/')

四、Vue3新特性

1、组合式API

什么是组合式API?

简单来说就是 将之前散布在vue文件里 的各个功能函数 组合 在一个函数里

这样会使我们的代码更加类聚，如果使用过react 函数式组件的同学应该会发现，他们及其类似。

（1）Setup

setup作为组合式api的入口点，所有的函数都可以被放置在setup里进行书写，需要被setup外部使用的参数，通过 return 暴露出去

setup接收两个参数：props、context。

**props接受父组件传递而来的参数**，当然，这些参数也是响应式的。值得注意的是，在setup里使用 props时，必须在props里定义的变量 才可被setup的props所接收到，在setup里获取props的变量时，不可使用es6的解构方法，因为它会消除 prop 的响应性，如果需要解构 prop并保留响应式，可以使用 setup 函数中的 toRefs 函数。

context 暴露三个组件的 property:：attrs（Attribute）、slots（卡槽）、emit（触发事件），context是一个普通的 JavaScript 对象，不具有响应式，可以使用es6解构语法。

注意⚠️

setup是在解析其它组件选项之前被调用的，所以在setup里无法准确的访问到当前组件实例：this。

想要在setup里获取当前组件实例，官方提供了一个函数：getCurrentInstance，但是getCurrentInstance只能在setup和生命钩子函数里使用

// getCurrentInstance代表全局上下文，ctx相当于Vue2的this,
// 但是特别注意ctx代替this只适用于开发阶段，等你放到服务器上运行就会出错，
// 后来查阅资料说的得用proxy替代ctx，才能在你项目正式上线版本正常运行

 const { ctx, proxy } = getCurrentInstance()

（2）生命周期钩子

（3）Provide / Inject：父子组件跨层级传输数据

// 父组件
setup () {
	// readonly包裹后可以在组件内引用时不被改变值。
	// 否则在组件内可以直接通过applyPositionId.value=***将值改变
	provide('applyPositionId', readonly(applyPositionId))
	
	// 函数也可传递
	provide('hideApplyModal', hideApplyModal)
}

//子组件接收
setup() {
	const applyPositionId = inject('applyPositionId')
    const hideApplyModal = inject('hideApplyModal')
    
	// 函数调用
	hideApplyModal()
}

2、响应性 API

在Vue2里，我们定义在data里的数据，会被 Object.defineProperty() 数据劫持，通过观察者模式 最终成为响应式数据。
在Vue3里，实现响应式的 方式改为了 es6 新增的语法 proxy，通过对象拦截方式实现响应式，解决了vue2中的一些漏区。
关于这两点的相关知识有很多，我会新写一篇文章做相应的说明。这里主要介绍Vue3的一些新特性的使用。

（1）reactive

reactive用于为对象创建响应式状态，其作用相当于Vue 2.x 中的 Vue.observable()。为对象创建响应式状态后，就不会存在 Vue2中 修改 某个对象在data定义时没有被定义到的属性，不会存在响应式状态 的问题。

```bash
setup() {
	const obj = { count: 0}
	const state = reactive(obj)
	console.log(state.count)  // 0
}
```

官网有一句话：
![在这里插入图片描述](https://www.www.zyiz.net/i/ll/?i=20210520141919565.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgxNjI4Nw==,size_16,color_FFFFFF,t_70)

响应式转换是“深层”的——它影响所有嵌套 property。这是什么意思呢？

当我们使用 proxy (不了解 proxy 的可以阅读：[阮一峰 es6入门](https://es6.ruanyifeng.com/?search=proxy&x=0&y=0#docs/proxy))做 对象拦截 时，他会劫持此对象的所有property 属性。

vue2使用 Vue.observable() 使一个对象可响应，被传入的对象会直接被 Vue.observable 变更为响应式。而 reactive 是为传入对象创建一个响应式的副本，不改变原始对象，当我们直接改变原始对象时，原始对象不会是响应式的。

（2）readonly

 readonly获取一个对象 (响应式或纯对象) 或 ref 并返回原始代理的只读代理


	const state = reactive({ count: 0 })
	const copy = readonly(state)
	
	//error
	copy.count++

（3）ref

 此ref非彼ref，在Vue2和react里，都有ref的概念。**当其作用域HTML文件时，ref是React/Vue提供的用来操纵React/Vue组件实例或者DOM元素的接口。**
 
 而 响应性 API 里 ref 是 用来创建一个**具有响应式且可变**的 ref 对象，ref 对象具有指向 其所创建变量的.value属性。在setup里被return 出去时，会自动绑定其value值。
 
```
setup() {
	const count = ref(0)
	console.log(count.value)  // 0

	return {
		count
	}
}
mounted() {
	console.log(count)  // 0
}
```

官网有这么一句话：

看了半天我也不是特别明白它是什么意思。将 ref 与 reactive 使用下来，发现他们两除了在使用方式上有所不同以外，没有什么太大的区别。高度响应式 的感念还是没有体会到。通过源码我可以看见，在使用ref为 对象创建 响应式数据时，其内部调用的也是 reactive 方法。


如果大家有什么理解，可以评论告诉我。