vue3新特性Composition API
徐徐 抱歉选手

在之前的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 许可协议。转载请注明出处!
 评论