petite-vue——mini 版的vue

petite-vue

petite-vue is an alternative distribution of Vue optimized for progressive enhancement. It provides the same template syntax and reactivity mental model with standard Vue. However, it is specifically optimized for “sprinkling” small amount of interactions on an existing HTML page rendered by a server framework. See more details in how it differs from standard Vue.

  • Only ~5.8kb
  • Vue-compatible template syntax
  • DOM-based, mutates in place
  • Driven by @vue/reactivity

Status

  • This is pretty new. There are probably bugs and there might still be API changes, so use at your own risk. Is it usable though? Very much. Check out the examples to see what it’s capable of.
  • The issue list is intentionally disabled because I have higher priority things to focus on for now and don’t want to be distracted. If you found a bug, you’ll have to either workaround it or submit a PR to fix it yourself. That said, feel free to use the discussions tab to help each other out.
  • Feature requests are unlikely to be accepted at this time – the scope of this project is intentionally kept to a bare minimum.

Usage

petite-vue can be used without a build step. Simply load it from a 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 to mark regions on the page that should be controlled by .v-scopepetite-vue
  • The attribute makes the script execute after HTML content is parsed.defer
  • The attribute tells to automatically query and initialize all elements that have on the page.initpetite-vuev-scope

Manual Init

If you don’t want the auto init, remove the attribute and move the scripts to end of :init<body>

<script src="https://unpkg.com/petite-vue"></script>
<script>
  PetiteVue.createApp().mount()
</script>

Or, use the ES module build:

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

Production CDN URLs

The short CDN URL is meant for prototyping. For production usage, use a fully resolved CDN URL to avoid resolving and redirect cost:

  • Global build: https://unpkg.com/petite-vue@0.2.2/dist/petite-vue.iife.js
    • exposes global, supports auto initPetiteVue
  • ESM build: https://unpkg.com/petite-vue@0.2.2/dist/petite-vue.es.js
    • Must be used with <script type="module">

Examples

Check out the examples directory.

Features

petite-vue only

  • v-scope
  • v-effect
  • @mounted & @unmounted events

Has Different Behavior

  • In expressions, points to the current element the directive is bound to (instead of component root element)$el
  • createApp() accepts global state instead of a component
  • Components are simplified into object-returning functions
  • Custom directives have a different interface

Vue Compatible

  • {{ }} text bindings
  • v-bind (including shorthand and class/style special handling):
  • v-on (including shorthand and all modifiers)@
  • v-model (all input types + non-string bindings):value
  • v-if / v-else / v-else-if
  • v-for
  • v-show
  • v-html
  • v-text
  • v-pre
  • v-once
  • v-cloak
  • reactive()
  • nextTick()
  • Template refs

Not Supported

Some features are dropped because they have a relatively low utility/size ratio in the context of progressive enhancement. If you need these features, you should probably just use standard Vue.

  • ref(), etc.computed()
  • Render functions ( has no virtual DOM)petite-vue
  • Reactivity for Collection Types (Map, Set, etc., removed for smaller size)
  • Transition, KeepAlive, Teleport, Suspense
  • v-for deep destructure
  • v-on="object"
  • v-is & <component :is="xxx">
  • v-bind:style auto-prefixing

Comparison with standard Vue

The point of is not just about being small. It’s about using the optimal implementation for the intended use case (progressive enhancement).petite-vue

Standard Vue can be used with or without a build step. When using a build setup (e.g. with Single-File Components), we pre-compile all the templates so there’s no template processing to be done at runtime. And thanks to tree-shaking, we can ship optional features in standard Vue that doesn’t bloat your bundle size when not used. This is the optimal usage of standard Vue, but since it involves a build setup, it is better suited when building SPAs or apps with relatively heavy interactions.

When using standard Vue without a build step and mounting to in-DOM templates, it is much less optimal because:

  • We have to ship the Vue template compiler to the browser (13kb extra size)
  • The compiler will have to retrieve the template string from already instantiated DOM
  • The compiler then compiles the string into a JavaScript render function
  • Vue then replaces existing DOM templates with new DOM generated from the render funciton.

petite-vue avoids all this overhead by walking the existing DOM and attaching fine-grained reactive effects to the elements directly. The DOM is the template. This means is much more efficient in progressive enhancement scenarios.petite-vue

This is also how Vue 1 worked. The trade-off here is that this approach is coupled to the DOM and thus not suitable for platform agnostic rendering or JavaScript SSR. We also lose the ability to work with render functions for advanced abstrations. However as you can probably tell, these capabilities are rarely needed in the context of progressive enhancement.

Comparison with Alpine

petite-vue is indeed addressing a similar scope to Alpine, but aims to be (1) even more minimal and (2) more Vue-compatible.

  • petite-vue is around half the size of Alpine.
  • petite-vue has no transition system (maybe this can be an opt-in plugin).
  • Although Alpine largely resembles Vue’s design, there are various cases where the behavior is different from Vue itself. It may also diverge more from Vue in the future. This is good because Alpine shouldn’t have to restrict its design to strictly follow Vue – it should have the freedom to develop in a direction that makes sense for its goals.

    In comparison, will try to align with standard Vue behavior whenever possible so that there is less friction moving to standard Vue if needed. It’s intended to be part of the Vue ecosystem to cover the progressive enhancement use case where standard Vue is less optimized for nowadays.petite-vue

Security and CSP

petite-vue evaluates JavaScript expressions in the templates. This means if is mounted on a region of the DOM that contains non-sanitized HTML from user data, it may lead to XSS attacks. If your page renders user-submitted HTML, you should prefer initializing petite-vue using explicit mount target so that it only processes parts that are controlled by you. You can also sanitize any user-submitted HTML for the attribute.petite-vuev-scope

petite-vue evaluates the expressions using , which may be prohibited in strict CSP settings. There is no plan to provide a CSP build because it involves shipping an expression parser which defeats the purpose of being lightweight. If you have strict CSP requirements, you should probably use standard Vue and pre-compile the templates.new Function()

License

MIT

GitHub – vuejs/petite-vue: 5kb subset of Vue optimized for progressive enhancement

原创文章,作者:乔伊,如若转载,请注明出处:https://www.xjiangwz.com/archives/1229

(0)
上一篇 2021年8月29日 下午1:31
下一篇 2021年8月29日 下午3:12

发表回复

您的电子邮箱地址不会被公开。

3 + 16 =