“This article has participated in the call for good writing activities, click to view: the back end, the big front end double track submission, 20,000 yuan prize pool waiting for you to challenge!”

The latest addition to the Vue family is Petite-Vue. Correct the pronunciation first

Thanks to the right English, the next French framework was born after Vue and Vite.

The characteristics of

When packed, it’s only 5.7K super small and super light. It’s about half the size of its competitor Alpine.

It is mainly used for ornament function of server-side rendering page.

What is server-side render embellishment

At present, mainstream MVVM frameworks such as VUE and React are focused on SPA. It is generally written in an engineered and componentized way. But this technique is unwieldy if it’s just a bit of functionality in a server-side rendered page. Let’s say you want to implement a simple counter counter. It’s written like this

<script
  crossorigin="anonymous"
  src="https://lib.baomitu.com/vue/3.1.4/vue.global.js"
></script>
<div id="counter">
  Counter: {{ counter }}
  <button @click="counter++">inc</button>
</div>

<script>
  const Counter = {
    data() {
      return {
        counter: 0}; }}; Vue.createApp(Counter).mount("#counter");
</script>

Copy the code

The composite API is not much simpler.

<script
  crossorigin="anonymous"
  src="https://lib.baomitu.com/vue/3.1.4/vue.global.js"
></script>
<div id="counter">
  Counter: {{ counter }}
  <button @click="counter++">inc</button>
</div>

<script>
  const Counter = {
    data() {
      return {
        counter: 0}; }}; Vue.createApp(Counter).mount("#counter");
</script>

Copy the code

Create instances, create components, and set up responsive data.

What if you just want to do something but the logic is not as good as jquery?

All right, now the Pretite comes out

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

Introduced in the code

When you first reference the code

Here’s an explanation of defer and init

Defer is used to keep the script download process from blocking DOM rendering and loading of other resources. Also, ensure that the Dom is parsed before executing the script. This part is critical to init later on

Init is for you to automatically instantiate petitevue or you can instantiate it manually. If it’s just a simple embellishment code it’s better to make it as simple as possible, so just init it.

The root scope is a thing where you can directly declare your responsive data model

You can then bind the data in the data model directly within this code snippet and manipulate the data by using the @click directive.

Is it convenient?

It is particularly well suited to adding some simple front-end interaction to the server-side rendered code. This is also the meaning of the so-called ornament.

What about the family bucket?

The family bucket is a must for vUE’s scale application.

Mainly divided into

  • Unified State Management

  • Routing functions

First of all, if your scenario is for simple pages, routing these complex view switches is not necessary.

However, sharing data between multiple scopes is required.

Let’s use an example to illustrate this.

In the era of VUE3, reactive data created directly by Reactive can itself meet the requirements of view response to data changes. So we just need to declare the data that needs to be shared globally.

Here’s an example;

<script type="module">
  import { createApp, reactive } from 'https://unpkg.com/petite-vue?module'
  const store = reactive({
    count: 0.increment() {
      this.count++; }});console.log('store',store)
  // add count by 1
  setInterval(() = > store.increment() , 100)
  store.increment();
  createApp({
    store,
  }).mount();
</script>
<div v-scope style="border: 3px solid">
  <! -- Output 1 -->
  <span style="font-size: 50px;">{{ store.count }}</span>
</div>
<br />
<br />
<br />
<div v-scope="{c2 : 10}" style="border: 3px solid">
  <! -- Output 1 -->
  <span style="font-size: 50px">{{ store.count }}: {{c2}}</span>
</div>
<br />
<br />
<br />
<div v-scope style="border: 3px solid">
  <button @click="store.increment">inc</button>
</div>
Copy the code

What features are not supported and does it matter?

For its compact size, the Petite dispenses with many unnecessary features. But these features don’t have much impact on simple VUE applications.

In order to be lightweight and compact, Petite-Vue does not support the following features:

  • Ref (), and computed

    In fact, ref and computed only occur in scale applications and can be replaced with Reactivy, so it doesn’t really matter

  • Render function, because Petite-Vue has no virtual DOM

    Performance is not a concern for simple applications

  • Response types such as Map and Set are not supported

    Simple applications don’t matter.

  • Transition, KeepAlive, Teleport, Suspense

    SPA when you need it

[Vue3 official tutorial] 🎄 word notes | synchronous learning video guide

Is the library complete and ready for use in production now?

Conclusion first, not at night but can be used in production.

First of all, the library is not perfect, it feels like Yoshida wrote it in a very short time, we don’t even see a single line of test cases in the library.

But if it is only used for simple server-side rendering ornament because of the simple function, the function is almost at a glance, so there is no need to worry about what hidden pit, the harvest is really slowly simple and efficient. So I don’t think it’s a problem to use it right away.

Why did Yoshida develop PetiteVue so quickly

The first is based on his deep understanding of MVVM. 95% of this crap is written by me and I’ve written it three times (Vue,Vue2, Vue3) and now it’s the fourth time.

Secondly, He practiced the modern front-end development mode of Vue3 + Vite proposed by himself in Vueconf2021.

Vue3 + Vite = Modern by Default

  • Leave engineering to Vite — feel free to use TS + Esmodule

    This time Petite can be said to be fully developed from the development, compilation, release, Demo all using Vite, can be said to be Vite is practical to do a real endorsement and example.

    Of course compilation and debugging are done at the bottom by esbuild and rollup.

    “Esbuild” to achieve. Ts, JSX,.js code conversion

    This results in a complete TS development environment with almost no engineering setup.

  • Good vuE3 code engineering — no need to reinvent the wheel

    Vue3 code using monorepo style reactivity response, render, compile for effective modular segmentation. Each part can be used separately. This time petiteVue is to use the vue3 core reactivity package to achieve responsive, no need to repeat the wheel, of course, get twice the result with half the effort.

    Of course, it is better than petite, which uses [in-place compilation] and non-virtual Dom rendering and cannot reuse VUe3.

    Better than the above three, deep understanding combined with good construction tools and reusable wheels allowed Yogod to efficiently develop this practical tool.

The articles

[Vue3 official tutorial] 🎄 word notes | synchronous learning video guide

[Vue official tutorial notes]- Yu Xi handwritten mini-vue

How to join open Source projects – How to PR Vue3.0

I did animation all night and let everyone understand Webpack in 10 minutes