浅谈Vue.js 3.0新增的 Composition API
Composition API
首先还是演示我们的显示鼠标位置案例。
首先说一下 createApp()创建出来的对象，跟我们使用Vue2.x创建的对象少了很多，而且这些成员都没有使用$符开头。说明未来我们基本不用给这个对象上新增成员。我们可以看到component、directive、mixin、use等这些全局方法和以前的使用方式都是一样的。mout()和以前的$mount()作用类似；unmount()类似以前的$destroy()；
如何使用Composition API
createApp(options)Vue实例创建API
它需要一个新的选项setup方法作为配合，这个setup方法也就是Composition API的入口。
setup(props, context) {...} Composition API的入口
- setup的执行时机：它是在props被解析完毕，但是在组件实例被创建之前执行的，所以在setup的内部无法通过
this获取到组件的实例。因为这是组件实例还没有被创建，所以在setup中也无法访问到data，methods，computed，此时this指向的是undefined - setup的参数及返回值：
- 第一个参数， props 接收外部传入的参数，是一个响应式的对象，它不能被解构。
- 第二个参数， context ，是一个对象，具有三个成员 attrs、emit、slots
- 需要返回一个对象，setup中返回的对象可以使用在模版，methods，computed，以及生命周期的钩子函数中。
reactive响应式对象的创建API
Composition中返回的应该是响应式的数据，为了实现让某一个逻辑的所有代码都能够被封装到一个函数中，Vue3.0中提供了一个新的API reactive让我们可以来创建响应式对象。
- reactive： reactive()函数就是通过其内部将我们传递进去的数据封装成了一个 Proxy代理对象，从而实现了对数据的安全监听，使得我们的数据非常高效地转换成了响应式对像。
案例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document 01 for Vue 3.0 Composition API</title>
</head>
<body>
<div id="app">x: {{ position.x }} y: {{ position.y }}</div>
<script type="module">
import {
createApp,
reactive,
} from './node_modules/vue/dist/vue.esm-browser.js';
const app = createApp({
setup() {
// 第一个参数， props 接收外部传入的参数，是一个响应式的对象，它不能被解构。
// 第二个参数， context ，是一个对象，具有三个成员 attrs、emit、slots
// 需要返回一个对象，setup中返回的对象可以使用在模版，methods，computed，以及生命周期的钩子函数中
const position = reactive({
x: 0,
y: 0,
});
return {
position,
};
},
mounted() {
this.position.x = 100;
this.position.y = 50;
},
});
console.log(app);
app.mount('#app');
</script>
</body>
</html>
如何在setup中使用生命钩子函数
生命周期的钩子函数都可以在setup中定义，除了beforeCreate和created外，其他的都需要在生命周期钩子函数名前加上on作为前缀，然后首字母大写。具体如下图所示：
给上述鼠标位置案例添加事件监听，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document 01 for Vue 3.0 Composition API</title>
</head>
<body>
<div id="app">x: {{ position.x }} y: {{ position.y }}</div>
<script type="module">
import {
createApp,
reactive,
onMounted,
onUnmounted,
} from './node_modules/vue/dist/vue.esm-browser.js';
const app = createApp({
setup() {
// 第一个参数， props 接收外部传入的参数，是一个响应式的对象，它不能被解构。
// 第二个参数， context ，是一个对象，具有三个成员 attrs、emit、slots
// 需要返回一个对象，setup中返回的对象可以使用在模版，methods，computed，以及生命周期的钩子函数中
const position = reactive({
x: 0,
y: 0,
});
const update = (e) => {
position.x = e.pageX;
position.y = e.pageY;
};
onMounted(() => {
window.addEventListener('mousemove', update);
});
onUnmounted(() => {
window.removeEventListener('mousemove', update);
});
return {
position,
};
},
mounted() {
this.position.x = 100;
this.position.y = 50;
},
});
console.log(app);
app.mount('#app');
</script>
</body>
</html>
可以对代码进行重构，把获取鼠标位置的功能封装到一个函数中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document 01 for Vue 3.0 Composition API</title>
</head>
<body>
<div id="app">x: {{ position.x }} y: {{ position.y }}</div>
<script type="module">
// 当前重构抽离的函数可以放到一个模块中，将来在任何组件中都可以使用，你可以尝试使用相同的方式实现其他的逻辑
function useMousePosition() {
const position = reactive({
x: 0,
y: 0,
});
const update = (e) => {
position.x = e.pageX;
position.y = e.pageY;
};
onMounted(() => {
window.addEventListener('mousemove', update);
});
onUnmounted(() => {
window.removeEventListener('mousemove', update);
});
return position;
}
import {
createApp,
reactive,
onMounted,
onUnmounted,
} from './node_modules/vue/dist/vue.esm-browser.js';
const app = createApp({
setup() {
// 第一个参数， props 接收外部传入的参数，是一个响应式的对象，它不能被解构。
// 第二个参数， context ，是一个对象，具有三个成员 attrs、emit、slots
// 需要返回一个对象，setup中返回的对象可以使用在模版，methods，computed，以及生命周期的钩子函数中
const position = useMousePosition();
return {
position,
};
},
mounted() {
this.position.x = 100;
this.position.y = 50;
},
});
console.log(app);
app.mount('#app');
</script>
</body>
</html>
你可以点击这里去在线尝试一下：【在线案例】