技术专栏
Composition API 使用总结
最近在项目中使用了vue的新属性,Composition API,这是一个最新版Vue3.0的组合式 API: 一组低侵入式的、函数式的 API,使得我们能够更灵活地「组合」组件的逻辑。由于Vue3.0目前还不太稳定,官方提供了这个API来体验Vue的最新的特征。大家可以尝尝鲜。
刚开始用的很不习惯,但慢慢地感受到了它带来的便利。下面是我使用一段时间后的总结。希望能够帮助各位前端读者快速地启用最新的姿势写Vue组件。
我们项目中使用的还是vue2.x,只是单独引入了@vue/composition-api
,另外也使用了TypeScript,听说今年TS使用量大增,大家也要赶紧学起来啊,后面我也会带来一些TS的分享与总结。有兴趣的同学可以关注一下。
要使用Composition API 就要先安装,项目根目录下执行
npm i @vue/composition-api
项目中配置
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
使用@vue/composition-api写一个简单的组件
<template>
<button @click="increment">
Count is: {{ state.count }}, double is: {{ state.double }}
</button>
</template>
<script>
import { defineComponent, reactive } from "@vue/composition-api";
export default defineComponent({
setup() {
const state = reactive({
count: 0,
double: computed(() => state.count * 2),
})
function increment() {
state.count++
}
return {
state,
increment,
}
},
})
</script>
router,$message, vuex, emit的方法的改造
import { defineComponent, reactive } from "@vue/composition-api";
export default defineComponent({
setup(props, {root, emit}) {
// 使用root属性的$route
const clusterId = root.$route.params.clusterId;
const state = reactive({
count: 0,
double: computed(() => state.count * 2),
})
function increment() {
state.count++
root.$message.success('操作成功')
emit('input', state.count)
}
return {
state,
increment,
}
},
})
setup从生命周期钩子的视角来看,它会在 beforeCreate 钩子之前被调用
第一个参数是props,第二个参数是上下文对象, 上下文对象中有包含以下几个属性attrs
, slots
, emit
,
reactive
的使用发
const obj = reactive({ count: 0 })
ref
的使用
const count = ref(0)
computed
的使用
const count = ref(1)
const plusOne = computed(() => count.value + 1)
watch
的使用
// 侦听一个 getter
const state = reactive({ count: 0 })
watch(
() => state.count,
(count, prevCount) => {
/* ... */
}
)
// 直接侦听一个 ref
const count = ref(0)
watch(count, (count, prevCount) => {
/* ... */
})
生命周期
setup() {
onMounted(() => {
console.log('mounted!')
})
onUpdated(() => {
console.log('updated!')
})
onUnmounted(() => {
console.log('unmounted!')
})
},
声明:本文内容由易百纳平台入驻作者撰写,文章观点仅代表作者本人,不代表易百纳立场。如有内容侵权或者其他问题,请联系本站进行删除。
红包
95
9
评论
打赏
- 分享
- 举报
评论
0个
手气红包
暂无数据
相关专栏
-
浏览量:1683次2019-12-31 16:25:11
-
浏览量:7164次2022-01-20 09:00:14
-
浏览量:5659次2021-04-16 15:01:12
-
浏览量:10984次2021-07-23 15:56:25
-
浏览量:7268次2020-12-10 14:24:24
-
浏览量:3035次2017-11-28 12:33:29
-
浏览量:875次2023-12-22 14:13:56
-
浏览量:9306次2020-11-17 15:41:28
-
浏览量:486次2023-09-04 18:54:46
-
浏览量:10628次2021-07-20 15:29:50
-
浏览量:5039次2020-05-08 15:46:11
-
浏览量:6786次2021-01-16 15:50:24
-
浏览量:1953次2023-02-22 17:04:11
-
浏览量:2468次2020-06-12 19:39:57
-
浏览量:4664次2021-06-28 14:52:06
-
浏览量:651次2023-10-26 11:54:12
-
浏览量:559次2023-09-08 10:12:29
-
浏览量:4432次2021-04-19 14:55:00
-
浏览量:2381次2020-08-19 16:47:34
置顶时间设置
结束时间
删除原因
-
广告/SPAM
-
恶意灌水
-
违规内容
-
文不对题
-
重复发帖
打赏作者
这把我C
您的支持将鼓励我继续创作!
打赏金额:
¥1
¥5
¥10
¥50
¥100
支付方式:
微信支付
打赏成功!
感谢您的打赏,如若您也想被打赏,可前往 发表专栏 哦~
举报反馈
举报类型
- 内容涉黄/赌/毒
- 内容侵权/抄袭
- 政治相关
- 涉嫌广告
- 侮辱谩骂
- 其他
详细说明
审核成功
发布时间设置
发布时间:
请选择发布时间设置
是否关联周任务-专栏模块
审核失败
失败原因
请选择失败原因
备注
请输入备注