Front-end programmers must be familiar with You Yuxi and the Vue framework he developed. Vue is a progressive JavaScript framework for building user interfaces. After its release in 2014, it has won the favor of a large number of developers. It has been updated to version 3.0. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue's core library only focuses on the view layer, which is not only easy to use, but also easy to integrate with third-party libraries or existing projects. On the other hand, when combined with modern tool chains and various supporting libraries, Vue is also fully capable of providing drivers for complex single-page applications.
Recently, You Yuxi released a Vue distribution optimized for progressive enhancement—petite-vue, which is only about 5kb in size. Compared with standard Vue, petite-vue has the same template syntax and responsive mental model, and the difference between the two is that petite-vue is specifically optimized for a small amount of "sprinkle" interaction on an existing HTML page rendered on the server framework .
petite-vue is not only its small size, but also its ability to use the optimal realization for progressive enhancement. The latter is the main difference between it and the standard Vue, and also its main advantage. You Yuxi revealed that petite-vue works similarly to Vue 1, but the implementation details are better: petite-vue traverses the actual DOM and uses @vue/reactivity to attach (attach) fine-grained reactive effects, so its updates can reach each accurately binding.
After the release of the petite-vue project, it has received a lot of attention. It has appeared on the GitHub Trending list for many consecutive times, and it has received 2,300 stars within a few days.
Project address: ">https://github.com/vuejs/petite-vue
Next we look at more details of petite-vue.
Main features
petite-vue has the following features:
The size is only about 5.8kb
Vue compatible template syntax
Based on DOM (mutates in place)
Driven by @vue/reactivity
how to use?
petite-vue can be used directly without the build step, just load it from the 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>- Use v-scope to mark areas on the page that should be controlled by petite-vue.
- The defer attribute makes the script execute after the HTML content is parsed.
- The init attribute makes petite-vue automatically query and initialize all elements marked by v-scope on the page.
If you don't want to use the above automatic initialization method, you can remove the init attribute and move the script to the end of the <body >:
<script src="https://unpkg.com/petite-vue"></script>
<script>
PetiteVue.createApp().mount()
</script>Or use ES module build:
<script type="module">
import { createApp } from 'https://unpkg.com/petite-vue?module'
createApp().mount()
</script>In addition to the initialization method, the petite-vue project page also introduces CDN URL production, Root Scope, life cycle events, etc. See the GitHub project page for more details.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。