Petite-Vue实现TodoMVC应用的技术解析

Petite-Vue实现TodoMVC应用的技术解析

petite-vue 6kb subset of Vue optimized for progressive enhancement 项目地址: https://gitcode.com/gh_mirrors/pe/petite-vue

前言

TodoMVC是一个经典的Web应用示例，用于展示不同前端框架的实现方式。本文将深入分析如何使用Petite-Vue这一轻量级框架来实现TodoMVC应用，帮助开发者理解Petite-Vue的核心特性和最佳实践。

Petite-Vue简介

Petite-Vue是Vue.js作者开发的一个轻量级替代方案，专为渐进式增强现有HTML页面而设计。与完整版Vue相比，它具有以下特点：

• 体积极小（约6KB）
• 无需构建步骤
• 提供Vue核心功能（响应式、模板、组件）
• 专为服务端渲染(SSR)页面添加交互而优化

应用结构分析

1. 数据管理

应用使用localStorage持久化存储待办事项数据：

const STORAGE_KEY = 'todos-petite-vue'
const todoStorage = {
  fetch() {
    const todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
    todos.forEach((todo, index) => {
      todo.id = index
    })
    todoStorage.uid = todos.length
    return todos
  },
  save(todos) {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
  }
}

这种设计模式实现了：

• 数据持久化
• 自动生成唯一ID
• 简洁的API接口

2. 核心状态管理

应用的核心状态通过createApp创建：

createApp({
  todos: todoStorage.fetch(),
  newTodo: '',
  editedTodo: null,
  visibility: 'all',
  // ...其他计算属性和方法
}).mount('#app')

这里展示了Petite-Vue的响应式系统：

• 数据自动响应
• 计算属性自动更新
• 方法可直接绑定到DOM事件

3. 计算属性实现

应用使用计算属性来派生状态：

get filteredTodos() {
  return filters[this.visibility](this.todos)
},
get remaining() {
  return filters.active(this.todos).length
},
get allDone() {
  return this.remaining === 0
},
set allDone(value) {
  this.todos.forEach(function (todo) {
    todo.completed = value
  })
}

这些计算属性实现了：

• 列表过滤功能
• 剩余待办项计数
• 全选/全不选功能

关键功能实现

1. 路由管理

Petite-Vue通过监听hashchange事件实现简单路由：

setupRouting() {
  const onHashChange = () => {
    var visibility = window.location.hash.replace(/#\/?/, '')
    if (filters[visibility]) {
      this.visibility = visibility
    } else {
      window.location.hash = ''
      this.visibility = 'all'
    }
  }
  window.addEventListener('hashchange', onHashChange)
  onHashChange()
}

这种轻量级路由方案非常适合简单的单页应用。

2. 待办项编辑

编辑功能展示了Petite-Vue的模板指令和事件处理：

<li :class="{ editing: todo === editedTodo }">
  <div class="view">
    <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
  </div>
  <input
    class="edit"
    v-model="todo.title"
    @blur="doneEdit(todo)"
    @keyup.enter="doneEdit(todo)"
    @keyup.escape="cancelEdit(todo)"
  />
</li>

关键点：

• 使用v-model实现双向绑定
• 多种事件处理方式
• 动态类名绑定

3. 自动保存机制

通过v-effect指令实现数据变更自动保存：

<div id="app" v-effect="save()">

v-effect是Petite-Vue特有的指令，会在依赖变更时重新执行表达式。

性能优化技巧

1. v-cloak指令：防止初始化时的闪烁

   <div id="app" v-cloak>
   

   [v-cloak] {
     display: none;
   }
   

2. 条件渲染：使用v-show优化性能

   <section class="main" v-show="todos.length">
   

3. 列表渲染：使用key提高diff效率

   <li v-for="todo in filteredTodos" :key="todo.id">
   

总结

通过这个TodoMVC实现，我们可以看到Petite-Vue的几个核心优势：

1. 渐进式增强：可以直接在现有HTML上添加交互
2. 简洁API：学习曲线平缓，概念少
3. 轻量高效：适合小型到中型交互需求
4. Vue生态兼容：语法与Vue高度一致

对于需要在传统服务器渲染页面上添加交互的场景，或者小型项目开发，Petite-Vue是一个非常合适的选择。它保留了Vue的核心响应式特性，同时大幅减少了运行时体积，是轻量级前端开发的优秀解决方案。

petite-vue 6kb subset of Vue optimized for progressive enhancement 项目地址: https://gitcode.com/gh_mirrors/pe/petite-vue