가장 빠른 사용 방법

2021년 7월 3일(일본시간) 뷰의 창업자 에반유가 새로운 패키지를 발표했다.
https://github.com/vuejs/petite-vue

petite-vue

petite-vue는 선진적인 기능을 갖춘 초경량 Vue의 하위 교환이다.표준 Vue와 같은 템플릿 구조, 재활동 모드가 있지만 이전 서버 프레임워크에서 썼던 것처럼 약간의 상호작용을 교체할 수 있다는 것이 특징이다.

5.7KB 이하

DOM 기반(가상 DOM 사용하지 않음)

@vue/reactivity로

사용법

구축할 필요 없이 CDN에서 읽기만 하면 사용할 수 있습니다.

<script src="https://unpkg.com/petite-vue" defer init></script>

<!-- anywhere on the page -->
<div v-scope="{ count: 0 }">
  {{ count }}
  <button @click="count++">inc</button>
</div>

petite-vue로 제어하고자 하는 범위를 v-scope로 묶는다.

HTML이 지워진 후 실행할 스크립트에 속성을 추가defer합니다.

v-scope 속성을 사용하여 init를 가진 모든 요소를 초기화합니다.

더욱 실제적으로 사용하다createApp.

<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'

  createApp({
    // exposed to all expressions
    count: 0,
    // getters
    get plusOne() {
      return this.count + 1
    },
    // methods
    increment() {
      this.count++
    }
  }).mount()
</script>

<!-- v-scope value can be omitted -->
<div v-scope>
  <p>{{ count }}</p>
  <p>{{ plusOne }}</p>
  <button @click="increment">increment</button>
</div>

petite-vue의 적용 범위를 좁히기 위해 마운트 목표를 지정할 수 있습니다.

createApp().mount('#only-this-div')

도 여러 개를 지정할 수 있습니다.

createApp({
  // root scope for app one
}).mount('#app1')

createApp({
  // root scope for app two
}).mount('#app2')

각 요소는 mounted와 unmounted의 생명주기 연결을 사용할 수 있다.

<div
  v-if="show"
  @mounted="console.log('mounted on: ', $el)"
  @unmounted="console.log('unmounted: ', $el)"
></div>

사용v-effect원소 활성화.

<div v-scope="{ count: 0 }">
  <div v-effect="$el.textContent = count"></div>
  <button @click="count++">++</button>
</div>

구성 요소

petite-vue에서 재사용 가능한 구성 요소를 함수로 기술합니다.

<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'

  function Counter(props) {
    return {
      count: props.initialCount,
      inc() {
        this.count++
      },
      mounted() {
        console.log(`I'm mounted!`)
      }
    }
  }

  createApp({
    Counter
  }).mount()
</script>

<div v-scope="Counter({ initialCount: 1 })" @mounted="mounted">
  <p>{{ count }}</p>
  <button @click="inc">increment</button>
</div>

<div v-scope="Counter({ initialCount: 2 })">
  <p>{{ count }}</p>
  <button @click="inc">increment</button>
</div>

어떤 템플릿의 값을 다시 사용할 때 $template 키를 사용합니다.

<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'

  function Counter(props) {
    return {
      $template: '#counter-template',
      count: props.initialCount,
      inc() {
        this.count++
      }
    }
  }

  createApp({
    Counter
  }).mount()
</script>

<template id="counter-template">
  My count is {{ count }}
  <button @click="inc">++</button>
</template>

<!-- reuse it -->
<div v-scope="Counter({ initialCount: 1 })"></div>
<div v-scope="Counter({ initialCount: 2 })"></div>

reactive도 방법으로 전역 상태를 가진 상점을 만들 수 있다.

<script type="module">
  import { createApp, reactive } from 'https://unpkg.com/petite-vue?module'

  const store = reactive({
    count: 0,
    inc() {
      this.count++
    }
  })

  // manipulate it here
  store.inc()

  createApp({
    // share it with app scopes
    store
  }).mount()
</script>

<div v-scope="{ localCount: 0 }">
  <p>Global {{ store.count }}</p>
  <button @click="store.inc">increment</button>

  <p>Local {{ localCount }}</p>
  <button @click="localCount++">increment</button>
</div>

사용 가능한 기능, 사용할 수 없는 기능

petite-ve밖에 없어요.

v-scope

v-effect

@mounted 및 @unmounted

행동거지가 다르다

$el

createApp()

구성 요소

사용자 정의 디렉토리

Vue랑 똑같아요.

{{ }} 텍스트 바인딩

v-bind:

포함

v-on@

포함

v-model

v-if / v-else / v-else-if

v-for

v-show

v-html

v-text

v-pre

v-once

v-cloak

reactive()

nextTick()

petite-ve에서 사용할 수 없습니다

ref(), computed() 등

템플릿refs(선택기 사용)

render 함수(가상 DOM은 지원되지 않음)

수집형(Map, Set 등)에 대한 재활동

Transition, KeepAlive, Teleport, Suspense

깊이v-for

v-on="object"

v-is & <component :is="xxx">

v-bind:style의 자동 수정

데모

https://codesandbox.io/s/sad-flower-c17ec?file=/index.html
코드샌드박스를 넣어봤지만 초기 묘사에서는 제대로 작동하지 못했다.
프레젠테이션 브라우저의 업데이트 단추를 누르면 올바르게 표시됩니다.

고찰하다.

다음은petite-vue의 배경으로 고려할 수 있는 것을 열거했다.

React와의 차별화

뷰와 함께 불리는 리액트는 최근 SSP/SSG 프레임워크인 넥스트JS와 함께 웹 프런트엔드 개발의 헤게모니를 장악했다.리액트는 가상 DOM 구조를 적용해 높은 성능을 보여줬지만, 한편으로는 동작 속도가 어느 정도 한계에 도달했다는 단점도 있다.실제로 Vue는 본질적으로 가상 DOM에 기반하지 않고 특정한 기능에만 사용되기 때문에 이를 삭감함으로써 경량화·고속화를 실현하고 리액트와의 차별화 노선을 제시했다.

Svelt와의 경쟁

글의 첫머리에 쓴 바와 같이 petite-vue는 서버 프레임워크(Rubi on Rails, Django, Laravel 등)에 쓴 HTML에 JS로 상호작용을 더하는 것이 가장 적합하다고 강조했고, Evan You 자신도 이런 프레임워크로서의 Alpine을 언급했다.나는 그것보다 더 가볍다고 주장한다.
하지만 경량이 최근 몇 년간 주목받은 것은 Svelte다.그 창시자인 Rich Harris(Rollup.js 저자)는 경량과 기술량이 적음을 추구하며, 특히 경량 면에서는 트위터에 직접 에반 유 멤버들과 홍보하는 등 대항심을 불태웠다.에반 유도 건드렸나 봐, 롤업.js보다 빠른 반도라 비트를 개발했는데 실제로는 Svelte와 Vue에서 모두 채택됐다.이런 경과를 보면 에반유에는'뷰를 덜어준다'는 동력이 있다.

Hotwire의 존재

그리고 Hotwire는 앞에서 이러한 용도, 즉'HTML의 일부분에 JS를 사용한다'는 방법을 제시했다.Basecamp이 개발한 프로그램 라이브러리로 기존의 웹 응용 프로그램에 뿌리면 SPA로 쓰이고 사용자 체험이 향상된다는 생각에 기반을 둔다.처음부터 웹 응용 프로그램을 다시 설정하는 것은 매우 어려웠다. 저장된 서비스를 어떻게 새로운 것으로 바꾸는지, 이런 방법은 매우 적다.피티-vue는 이러한 수요를 충족시키기 위해 Vue의 하위 교환으로 다시 제작되었다고 생각합니다.