在之前的vue学习过程中,主要是通过定义vue组件的各种field,例如data function,computed object, methods object等来组织vue组件的逻辑。但是当逻辑越来越复杂的时候,这种组织vue组件的方式就不太可行。
setup component option是一个在vue组件被创建之前就被执行的函数,因此在setup option内部是没有this的,该函数内部职能访问props,该组件的方法、计算属性、state等都不可以访问。
那么setup函数就相当于替代了生命周期函数中的created和beforeCreate这两个周期函数。
在setup内部需要定义数据,并返回一个对象,对象包括在vue组件的template中需要用到的数据的集合。
响应式数据
const+ref
const数据的定义就相当于原来组件的data field,但是由于setup内部就是普通的JavaScript语句,不会实现reactive response,因此需要用到ref,常见的定义形式为const newHeroRef = ref("");
。
在使用ref包裹的const时,需要时调用newHeroRef.value
获取引用本身,否则newHeroRef
只是一个对象。
什么时候使用ref?当我们需要在setup中时刻监听某一个数据的时候。
const state+reactive
const+ref的替换就是const state = reactive({})
,对象内部就是响应式数据。这么做的好处在于更新数据时只需要state.data更新,并且从setup function返回的时候只需要返回state全体对象。
什么时候使用reactive?当我们需要在setup中时刻监听某一批数据的时候。
computed+get+(set)
const数据同样可以用来定义computed field。具体定义方式为const heroCount = computed({ get: () => {return dcHeros.value.length;}, });
,传入对象,对象内部有getter和setter(自定义)。
function
function的定义就相当于原来组件的methods field中除了生命周期函数的部分。同样需要在setup return语句中返回该函数。
- 本文标题:vue3新特性Composition API
- 本文作者:徐徐
- 创建时间:2021-01-02 13:44:47
- 本文链接:https://machacroissant.github.io/2021/01/02/composition-api/
- 版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!