The implementation of Youda's new petite-vue

Preface
Introduction
Live

Easy to use
Root Scope
Specifying the mount element
life cycle
Components
Global state management
Custom directives
Built-in instructions
Not supported

Summarize

Preface

I opened You Dada's GitHub and found something called petite-vue. Wow, I haven't finished learning Vue3 and Vite yet, and I'm starting to develop new things? With the attitude of learning until death, let's take a look at what this thing is. After all, he is our ancestor!

Introduction

From the name, we can know that petite-vue is a mini version of vue, with a size of only 5.8kb, which can be said to be very small. According to You Dada, petite-vue is an alternative distribution of Vue that is optimized for progressive enhancement. It provides the same template syntax and responsive model as standard Vue:

The size is only 5.8kb
Vue compatible template syntax
DOM-based, in-place conversion
Responsive drive

Live

The following is an introduction to the use of petite-vue.

Easy to use

<body>
  <script src="https://unpkg.com/petite-vue" defer init></script>
  <div v-scope="{ count: 0 }">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button @click="count++">+</button>
  </div>
</body>

Import it through the script tag and add init at the same time, then you can use v-scope to bind the data, so that a simple counter is realized.

Those who are familiar with the Alpine.js framework may find this familiar, as the syntax of the two is very similar.

<!-- Alpine.js -->
<div x-data="{ open: false }">
  <button @click="open = true">Open Dropdown</button>
  <ul x-show="open" @click.away="open = false">
    Dropdown Body
  </ul>
</div>

In addition to using the init method, you can also use the following method:

<body>
  <div v-scope="{ count: 0 }">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button @click="count++">+</button>
  </div>
  <!-- Place at the bottom of the body -->
  <script src="https://unpkg.com/petite-vue"></script>
  <script>
    PetiteVue.createApp().mount()
  </script>
</body>

Or using ES module:

<body>
  <script type="module">
    import { createApp } from 'https://unpkg.com/petite-vue?module'
    createApp().mount()
  </script>
  
  <div v-scope="{ count: 0 }">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button @click="count++">+</button>
  </div>  
</body>

Root Scope

The createApp function can accept an object, similar to how we normally use data and methods, but v-scope does not need to bind a value.

<body>
  <script type="module">
    import { createApp } from 'https://unpkg.com/petite-vue?module'
    createApp({
      count: 0,
      increment() {
        this.count++
      },
      decrement() {
        this.count--
      }
    }).mount()
  </script>
  
  <div v-scope>
    <button @click="decrement">-</button>
    <span>{{ count }}</span>
    <button @click="increment">+</button>
  </div>
</body>

Specifying the mount element

<body>
  <script type="module">
    import { createApp } from 'https://unpkg.com/petite-vue?module'
    createApp({
      count: 0
    }).mount('#app')
  </script>
  
  <div id="app">
    {{ count }}
  </div>
</body>

life cycle

You can listen to the life cycle events of each element.

<body>
  <script type="module">
    import { createApp } from 'https://unpkg.com/petite-vue?module'
    createApp({
      onMounted1(el) {
        console.log(el) // <span>1</span>
      },
      onMounted2(el) {
        console.log(el) // <span>2</span>
      }
    }).mount('#app')
  </script>
  
  <div id="app">
    <span @mounted="onMounted1($el)">1</span>
    <span @mounted="onMounted2($el)">2</span>
  </div>
</body>

Components

In petite-vue, components can be created using functions and reused through templates.

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

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

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

<template id="counter-template">
  <button @click="decrement">-</button>
  <span>{{ count }}</span>
  <button @click="increment">+</button>
</template>

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

Global state management

With the reactive API, it is easy to create global state management

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

    const store = reactive({
      count: 0,
      increment() {
        this.count++
      }
    })
    //Increase count by 1
    store.increment()
    createApp({
      store
    }).mount()
  </script>

  <div v-scope>
    <!-- Output 1 -->
    <span>{{ store.count }}</span>
  </div>
  <div v-scope>
    <button @click="store.increment">+</button>
  </div>
</body>

Custom directives

Here we will simply implement a command for automatic focus of an input box.

<body>
  <script type="module">
    import { createApp } from 'https://unpkg.com/petite-vue?module'
    
    const autoFocus = (ctx) => {
      ctx.el.focus()
    }

    createApp().directive('auto-focus', autoFocus).mount()
  </script>

  <div v-scope>
    <input v-auto-focus />
  </div>
</body>

Built-in instructions

v-model
v-if / v-else / v-else-if
v-for
v-show
v-html
v-text
v-pre
v-once
v-cloak

Note: v-for does not require a key, and v-for does not support deep destructuring

<body>
  <script type="module">
    import { createApp } from 'https://unpkg.com/petite-vue?module'
    
    createApp({
      userList: [
        { name: '张三', age: { a: 23, b: 24 } },
        { name: 'Li Si', age: { a: 23, b: 24 } },
        { name: '王五', age: { a: 23, b: 24 } }
      ]
    }).mount()
  </script>

  <div v-scope>
    <!-- Support -->
    <li v-for="{ age } in userList">
      {{ age.a }}
    </li>
    <!-- Not supported -->
    <li v-for="{ age: { a } } in userList">
      {{ a }}
    </li>
  </div>
</body>

Not supported

In order to be more lightweight and compact, petite-vue does not support the following features:

ref(), computed
Render function, because petite-vue does not have a virtual DOM
Does not support Map, Set and other response types
Transition, KeepAlive, Teleport, Suspense
v-on="object"
v-is &
v-bind:style auto-prefixing

Summarize

The above is a brief introduction and use of petite-vue. It is up to you to discover more new explorations.

In general, petite-vue retains some basic features of Vue, which allows Vue developers to use it at no cost. In the past, when we wanted to reference Vue when developing some small and simple pages, we often gave up because of the package size. Now, the emergence of petite-vue may save this situation. After all, it is really small, only 5.8kb in size, which is about half of Alpine.js.

This is the end of this article about the implementation of Youdada’s new petite-vue. For more related vue petite content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: