vue3 Composition api 快速上手
本文使用的vue版本为
3.0.5
vue2中Options API 和 vue3中Composition API 的对比
vue2中Options API 和 vue3中Composition API 的对比
快速开始
通过Vite来搭建脚手架
$ npm init @vitejs/app hello-vue3
或者
yarn create @vitejs/app hello-vue3
创建好项目后,进入项目文件夹执行npm install
,等待包都依赖完后,执行npm run dev
setup
一个组件选项,在组件被创建之前执行,一旦props
被解析,它就作为Composition API
的入口点
export default {
props: {
msg: {
type: String,
default: () => {}
}
},
/*
*接收两个参数
*props: 使用组件时,传递过来的props数据
*context: 组件的上下文对象
*/
setup(props,context) {
console.log(props,context);
}
}
该函数在beforecreate之后,create之前执行,内部不能使用this;
使用reactive生成响应式数据
<template>
<div>
<p>count:{{data.count}}</p>
</div>
</template>
<script>
import { reactive } from 'vue'
export default {
setup() {
let data = reactive({
count:10
});
function increment() {
data.count++
}
setInterval(()=>{
increment();
},1000);
return {
data
}
}
}
</script>
使用reactive
处理后的数据,能变成响应式数据,相当于vue2 option api
里面的data
reactive里的数据只能object对象,如果传入number、Boolean等类型会提示
value cannot be made reactive
使用computed计算属性
<template>
<div>
<p>count:{{data.count}}</p>
<p>doubleCounter:{{data.doubleCounter}}</p>
</div>
</template>
<script>
import { reactive,computed } from 'vue'
export default {
setup() {
let data = reactive({
count:10,
doubleCounter: computed(() => data.count*2)
});
function increment() {
data.count++
}
setInterval(()=>{
increment();
},1000);
return {
data
}
}
}
</script>
使用watch监听数据变化
<template>
<div>
<p>count:{{data.count}}</p>
</div>
</template>
<script>
import { reactive,watch } from 'vue'
export default {
setup() {
let data = reactive({
count:10
});
function increment() {
data.count++
}
watch(count,(nval,oval)=>{
console.log(nval,oval);
});
setInterval(()=>{
increment();
},1000);
return {
data
}
}
}
</script>
使用ref生成响应式数据以及获取dom元素
<template>
<div>
<p>count:{{count}}</p>
<p ref="msg"></p>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
let count = ref(0);
let msg = ref(null)
function increment() {
count.value++;
let p = msg.value;
p.textContent = `最新的count:${count.value}`;
}
setInterval(()=>{
increment();
},1000);
return {
count,
msg
}
}
}
</script>
使用ref
处理后的数据,能变成响应式数据,但操作时需要加.value
ref也可以用来获取dom元素,传入null,使用与ref属性相同的名称,即可
生命周期函数使用
可以按需导入到组件中,且只能在setup()函数中使用
生命周期2.x与Composition之间的映射关系
- beforeCreate -> use setup()
- created -> use setup()
- beforeMount -> onBeforeMount
- mounted -> onMounted
- beforeUpdate -> onBeforeUpdate
- updated -> onUpdated
- beforeDestroy -> onBeforeUnmount
- destroyed -> onUnmounted
- errorCaptured -> onErrorCaptured
<template>
<div>
<p>count:{{count}}</p>
</div>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
setup() {
let count = ref(0);
function increment() {
count.value++;
}
setInterval(()=>{
increment();
},1000);
onMounted(()=>{
console.log('onMounted');
});
return {
count
}
}
}
</script>
总结
以上就是vue3 Composition api 的快速上手内容,后续将更新更多的vue3文章