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>
你可以点击这里去在线尝试一下:【在线案例】