【学不动了就回家喂猪】尤大大新活 petite-vue 尝鲜

前言

打开尤大大的GitHub，发现多了个叫 petite-vue 的东西，好家伙，Vue3 和 Vite 还没学完呢，又开始整新东西了？本着学不死就往死里学的态度，咱还是来瞅瞅这到底是个啥东西吧，谁让他是咱的祖师爷呢！

简介

【学不动了就回家喂猪】尤大大新活 petite-vue 尝鲜

从名字来看可以知道 petite-vue 是一个 mini 版的vue，大小只有5.8kb，可以说是非常小了。据尤大大介绍，petite-vue 是 Vue 的可替代发行版，针对渐进式增强进行了优化。它提供了与标准 Vue 相同的模板语法和响应式模型：

大小只有5.8kb
Vue 兼容模版语法
基于DOM，就地转换
响应式驱动

上活

下面对 petite-vue 的使用做一些介绍。

简单使用

<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>

通过 script 标签引入同时添加 init ，接着就可以使用 v-scope 绑定数据，这样一个简单的计数器就实现了。

<!--  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>

除了用 init 的方式之外，也可以用下面的方式：

<body>
  <div v-scope="{ count: 0 }">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button @click="count++">+</button>
  </div>
  <!--  放在body底部  -->
  <script src="https://unpkg.com/petite-vue"></script>
  <script>
    PetiteVue.createApp().mount()
  </script>
</body>

或使用 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>

根作用域

createApp 函数可以接受一个对象，类似于我们平时使用 data 和 methods 一样，这时 v-scope 不需要绑定值。

<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>

指定挂载元素

<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>

生命周期

可以监听每个元素的生命周期事件。

<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>

组件

在 petite-vue 里，组件可以使用函数的方式创建，通过template可以实现复用。

<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>

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

全局状态管理

借助 reactive 响应式 API 可以很轻松的创建全局状态管理

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

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

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

自定义指令

这里来简单实现一个输入框自动聚焦的指令。

<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>

内置指令

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

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

  <div v-scope>
    <!-- 支持 -->
    <li v-for="{ age } in userList">
      {{ age.a }}
    </li>
    <!-- 不支持 -->
    <li v-for="{ age: { a } } in userList">
      {{ a }}
    </li>
  </div>
</body>

不支持

为了更轻量小巧，petite-vue 不支持以下特性：

ref()、computed
render函数，因为petite-vue 没有虚拟DOM
不支持Map、Set等响应类型
Transition, KeepAlive, Teleport, Suspense
v-on="object"
v-is &
v-bind:style auto-prefixing

总结

以上就是对 petite-vue 的一些简单介绍和使用，抛砖引玉，更多新的探索就由你们去发现了。

总的来说，prtite-vue 保留了 Vue 的一些基础特性，这使得 Vue 开发者可以无成本使用，在以往，当我们在开发一些小而简单的页面想要引用 Vue 但又常常因为包体积带来的考虑而放弃，现在，petite-vue 的出现或许可以拯救这种情况了，毕竟它真的很小，大小只有 5.8kb，大约只是 Alpine.js 的一半。

写在最后

码字不易，如果本文对你有什么帮助或收获，欢迎点赞，你的点赞是我创作的动力！

【学不动了就回家喂猪】尤大大新活 petite-vue 尝鲜

【学不动了就回家喂猪】尤大大新活 petite-vue 尝鲜

前言

简介

上活

简单使用

根作用域

指定挂载元素

生命周期

组件

全局状态管理

自定义指令

内置指令

不支持

总结

写在最后

常见问题FAQ

掘金(8号的凌晨4点) SVIP

发表评论

如需帝国cms功能定制以及二次开发请联系我们

升级SVIP会员

工作时间

前言

简介

上活

简单使用

根作用域

指定挂载元素

生命周期

组件

全局状态管理

自定义指令

内置指令

不支持

总结

写在最后

常见问题FAQ

掘金(8号的凌晨4点) SVIP

相关推荐

发表评论

如需帝国cms功能定制以及二次开发请联系我们

升级SVIP会员

工作时间

请选择支付方式