.value로 또는 .value로. 그것이 바로 뷰션입니다.

구성 API가 있는 Vue 3에서는 반응적이거나 관찰 가능한 가치를 생성하는 몇 가지 새로운 방법을 도입했습니다. reactive , ref , computed 가 있습니다. 그들은 구문 측면에서 특이한 점이 있습니다. 그것을 보여주기 위해 뜨거운 음식을 사용합시다.

반응 개체

import { reactive, computed } from 'vue'

const coolTemperature = 22

export function useHotFood({ temperatureInCelcius }) {  
  const state = reactive({
    temperatureInCelcius,
    isHot: computed(
      () => state.temperatureInCelcius > coolTemperature
    ),
  })

  function blow() {
    state.temperatureInCelcius -= 10
  }

  // ...

  return {
    state,
    blow,
  }
}

상태는 비구조화되면 반응성을 잃게 되므로 있는 그대로 반환해야 합니다.

// Using reactive object named state
const hotFood = useHotFood({ temperatureInCelcius: 100 })
hotfood.state.temperatureInCelcius
hotfood.state.isHot
hotfood.blow()

참조/계산된 개체

import { ref, computed } from 'vue'

const coolTemperature = 22

export function useHotFood(args) {  
  const temperatureInCelcius = ref(args.temperatureInCelcius)
  const isHot = computed(
    () => temperatureInCelcius.value > coolTemperature
  )

  function blow() {
    temperatureInCelcius.value -= 10
  }

  // ...

  return {
    temperatureInCelcius,
    isHot,
    blow,
  }
}

참조 값은 해당 값 속성을 통해 액세스해야 합니다. Ref는 템플릿에서 풀릴 수 있지만 템플릿과 스크립트 블록 간에 구문 불일치가 발생합니다.

// Using ref for each prop of state
const hotFood = useHotFood({ temperatureInCelcius: 100 })
hotFood.temperatureInCelcius.value
hotFood.isHot.value
hotFood.blow()
// or
const {
  temperatureInCelcius, isHot, blow
} = useHotFood({ temperatureInCelcius: 100 })
temperatureInCelcius.value
isHot.value
blow()

사용할지 말지 기억하는 오버헤드.value는 사람들을 혼란스럽게 만듭니다. 하지만 그럴 필요는 없습니다.

vue-extend-reactive 입력

더 간결한 구문을 달성하기 위해 한 가지 방법은 반응 개체를 확장하는 것입니다. 아마도 다른 반응 개체(예: getter) 또는 메서드로 확장할 수 있습니다.

반응형 객체는 자바스크립트를 사용할 때 메소드를 포함할 수 있지만 같은 블록에서 호출하면 더 장황해지고, 타입스크립트를 사용할 때 오류가 발생합니다.

그리고 이것이 Proxy 객체를 활용한 반응 객체 확장을 가능하게 하기 위해 vue-extend-reactive가 생성된 이유입니다.

추가 반응 객체(예: getter) 또는 이러한 이점을 얻기 위한 추가 메서드를 사용하여 구성 함수에서 반환된 반응 객체를 확장합니다.

합성 함수에서 반환된 객체의 API를 단순화합니다.

value 또는 ref 개체의 computed 속성을 사용하여 값을 얻을지 여부에 대한 오버헤드 생각을 제거합니다.

설치

NPM 사용

npm install vue-extend-reactive

원사 사용

yarn add vue-extend-reactive

용법

import { reactive, computed } from 'vue'
import { extend } from 'vue-extend-reactive'

const coolTemperature = 22

export function useHotFood({ temperatureInCelcius }) {  
  const state = reactive({
    temperatureInCelcius,
    isHot: computed(
      () => state.temperatureInCelcius > coolTemperature
    ),
  })

  function blow() {
    state.temperatureInCelcius -= 10
  }

  // ...  

  return extend(state, { blow })
}

다음은 확장된 반응 객체를 반환한 후의 최종 결과입니다.

const hotFood = useHotFood({ temperatureInCelcius: 100 })
hotFood.temperatureInCelcius
hotFood.isHot
hotFood.blow()

이 도우미는 Vue 2( @vue/composition-api 사용) 및 Vue 3과 호환됩니다.

반환된 반응성 객체는 반응성을 잃게 되므로 구조화를 해제할 수 없다는 한 가지 주의 사항이 있습니다. 그러나 더 간결하고 일관된 구문을 얻기 위해 기꺼이 희생할 수 있습니다.

마지막으로 이것이 vue 패키지 작성자가 합성 기능이나 후크를 만드는 방법이 되길 바랍니다.

연결:

Vue Extend Reactive on GitHub

Example on CodeSandbox