小编给大家分享一下vue-next函数式api的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
setup
setup 会作为编写组件业务逻辑的主战场,各种 hook 类型的方法均需要在 setup 这个作用域下调用,直接来看 RFC 中的例子:
<template> <button @click="increment"> Count is: {{ state.count }}, double is: {{ state.double }} </button> </template> <script> import { reactive, computed } from 'vue' export default { setup() { const state = reactive({ count: 0, double: computed(() => state.count \* 2) }) function increment() { state.count++ } return { state, increment } } } </script>
其代码结构看起来和 vue2 基本保持一致,不过有以下几点需要注意:
setup 本身的调用时机,从目前的源码来看,介于 beforeCreate 和 created 这两个生命周期之间,言外之意,就是你无法在这里使用 this 指向当前组件实例
对于 state 的声明,我们使用 reactive 这个 api 来构造,对于 computed state 的声明,使用 computed,两者本质上均是 Proxy 对象
对于组件方法的声明,我们直接通过声明普通函数的方式进行声明即可,对于 state 的变更,直接通过闭包使用 reactive 返回的 Proxy 对象即可
setup 的返回值被称作 render context,顾名思义,就是模板中可以访问到的各种数据和方法的上下文对象,我在之前的文章中曾提及,模板在解析数据时,会优先考虑从 data 对象取值,之后就是这个 render context 了
除了返回 render context,还可以返回模板渲染函数,对,就是那个 h(...),这种形式对应的情况是,当我们没有声明 template 属性时
在 vue-next 中,我们直接从 vue 导入 reactive 、computed 以及其他的 api 即可,如果在 vue2 版本上,我们还可以通过使用 composition-api 这个 plugin 来使用这些 api。
state
声明 state 主要有以下几种形式。
基础类型
基础类型可以通过 ref 这个 api 来声明,如下:
import { ref } from "vue"; export default { setup() { const count = ref(0); function inc() { count.value++; } return { count, inc }; } };
之所以要通过 ref,是因为 js 中的基础类型传值不是引用传值,因此 vue-next 内部会自动将它封装为一个 ref 对象,其值指向原始值。当然,ref 指向引用类型也是没有问题的,其 value 指向引用类型变量的引用。
引用类型
引用类型除了可以使用 ref 来声明,也可以直接使用 reactive,如下:
import { reactive } from "vue"; export default { setup() { const state = reactive({ count: 0 }); function inc() { state.count++; } return { state, inc }; // 或者通过 toRefs 方法 // return { ...toRefs(state), inc }; } };
这里使用 toRefs 的原因主要是因为,如果是 reactive 产生的对象,由于我们要只是保存对于该 Proxy 对象的引用,我们无法使用解构来将它 flat,而 toRefs 会将每一个属性在内部包裹为一个 ref 对象。
props
对于 prop 可以通过如下代码声明及使用:
export default { props: { count: Number }, setup(props) { watch(() => { console.log(\`count is: \` + props.count) }) } }
这里可以发现其实和 vue2 中声明的方式基本一样,但值得注意的是,在 vue-next 中,props 的类型声明不是必须的,如果你使用 typescript,完全可以改写为如下的版本:
interface PropTypesI { count: number } export default { setup(props: PropTypesI) { watch(() => { console.log(\`count is: \` + props.count) }) } }
除此之外,还可以直接通过 watch 方法来观察某个 prop 的变动,这是为什么呢?答案非常简单,就是 props 本身在源码中,也是一个被 reactive 包裹后的对象,因此它具有响应性,所以在 watch 方法中的回调函数会自动收集依赖,之后当 count 变动时,会自动调用这些回调逻辑。
context
在 setup 那一小节中,我们知道,setup 在调用时,组件实例还未创建,那意味着我们无法使用 this 访问当前实例,那我想通过 this 在 vue2 中访问一些内置属性,怎么办?比如 attrs 或者 emit。我们可以通过 setup 的第二个参数:
setup(props, context) { do anything... }
这个 context 对象也是一个 Proxy 对象,当我们通过 context.attrs 访问其属性时,本质上代理对象会将访问指向组件的内部实例(即之间文章中提及的 componentInternalInstance)。
生命周期
每一个 vue2 中的组件生命周期函数,当前都对应一个生命周期 hook,比如:
import { onMounted, onUpdated, onUnmounted } from "vue"; setup() { onMounted(() => { ... }); onUpdated(() => { ... }); onUnmounted(() => { ... }); }
这里值得注意的一点在于,对于 beforeCreate 和 created 生命周期,虽然有响应的 hook,但是我觉的没有必要单独使用了,因为这些逻辑代码大部分是一些初始化逻辑的代码,直接写在 setup 方法中即可。
如何复用代码
在这个基础上,复用代码的方式也不再像 vue2 中的那样,通过 mixin 或者 HOC 来达到复用代码的目的,这里稍微说一下,这些复用代码方式中比较显著的缺点有:
隐藏了数据来源,主要体现在 mixin 中
会牺牲一些性能,主要体现在 HOC 中
可能会遇到命名冲突问题,主要体现在 mixin 中
在 vue-next 中,复用代码的逻辑本质上是利用这些 hook 来拆分业务逻辑与状态,如果你比较熟悉 react hooks 的话,应该很快就能明白我指的是什么意思。如果我们将逻辑都写在 setup 方法中,很快代码就会变得难以维护,在这方面,我们可以将一些耦合在一起的代码抽离出来,同时以 use 前缀命名,声明一个自定义的 hook,如下:
export default { setup() { const data = useSearch() const { sortedData, sort } = useSorting(data) return { data, sortedData, sort } } } function useSearch() { ...fetch data } function useSort(data) { ...sort data }
除了以 inline 的方式来声明,还可以将这些自定义的 hook 声明在单独的文件中,直接通过 import 导入即可,比如:
import useSearch from '@hooks/search' import useSort from '@hooks/sort'
与 react hooks 对比
vue-next 在这方面借鉴了 react hooks 的设计思想,但是从实现层来讲,它们是不一样的,主要有以下几点:
vue-next 不依赖于其调用顺序,而 react 依赖
vue-next 提供了生命周期方法,而 react 刻意模糊生命周期的概念
vue-next 基于响应式系统实现,意味它的依赖不需要显示声明(而且是自动的),而 react 需要手动声明依赖数组
以上是“vue-next函数式api的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。