0%

2020-10-03 记一次使用Vue 3.0 组合式 api 的开发

2020-10-03 记一次使用Vue 3.0 组合式 api 的开发

最近用 composition-api 这个库在 Vue 2 中进行了一次组合式 api 的试验,这个库的用法和 Vue 3 中是一样的。

先来谈谈我个人的感受吧。

在使用 composition-api 的过程中,我最大的感受是要特别注意普通对象和响应式对象的区别,稍不注意就会混淆。所以在实际开发中一般使用 useXXX 的方式来给用组合式 api 编写的函数命名,例如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
export function useMousePosition() {
const x = ref(0)
const y = ref(0)

function update(e) {
x.value = e.pageX
y.value = e.pageY
}

onMounted(() => {
window.addEventListener('mousemove', update)
})

onUnmounted(() => {
window.removeEventListener('mousemove', update)
})

return { x, y }
}

这样一来就能区分自己在编写的是普通的函数还是响应式对象函数。

之前的函数都是没有给参数的,实际上给参数的函数也是一样的写法。当然了,也同样要区分出普通对象和响应式对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/**
* 保留数字到小数点
*
* @author CaoMeiYouRen
* @date 2020-10-03
* @export
* @param {Ref<number>} num 要格式化的数字
* @param {(Ref<number> | number)} [digits=ref(2)] 默认保留2位小数
* @param {(Ref<boolean> | boolean)} [int=ref(false)] 如果是整数是否保留小数
* @returns
*/
export function useNumberFormat(num: Ref<number>, digits: Ref<number> | number = 2, int: Ref<boolean> | boolean = false) {
const numRef = computed(() => {
if (isNaN(num.value)) {
return 0
}
const _int = unwrap(int)
if (_int && num.value % 1 === 0) {
return num.value
}
const _digits = unwrap(digits)
return Number(num.value.toFixed(_digits))
})
return numRef
}

另外,我认为 composition-api 最大的优势是可以抽离逻辑,可以实现逻辑复用。

也就是说,以往那种把数据获取和改变也放在 Vue 文件中的做法,可以改成把逻辑放到单独的 js、ts 文件中,而这有利于逻辑复用。同时可以将自己编写的逻辑打包上传到 npm,让更多的人一起使用。

当然了,由于目前只开发了比较简单业务逻辑,所以对于复杂业务逻辑,组合式 api 到底有多大作用还是不太了解,还有待后续的开发。

本文作者:草梅友仁
本文地址: https://blog.cmyr.ltd/archives/fa085284.html
版权声明:转载请注明出处!

坚持原创技术分享,您的支持将鼓励我继续创作!