阅读 124

我的第一个Vue3组件,实现TODO-LIST

Vue3已经发布很久了,而且我已经使用Vue很多年了,对Vue框架也是尤为喜爱。今天我将通过一个最简单的组件来展示Vue3的魅力以及它和Vue2的不同之处。我们将会用到Vite、composition API、ref、computed、setup()等Vue3的新特性使用方法。

创建项目

创建项目我不使用Vue-CLI去创建,使用Vue的全新生态共建Vite来创建,Vite是一个非常棒的Web开发打包工具,它可以让我们开发的时候去使用原生的ES Module,不用去像Webpack那样去打包,可以实现秒启动,这比webpack要来得快太多了。在生产环境中使用Rollup来打包JS代码。不仅支持Vue3,还支持React等框架,优点不说了,具体了解可以去官网:vitejs.dev/

使用Vite创建Vue3项目

# npm 6.x
npm init vite@latest one-vue3-component --template vue

# npm 7+, extra double-dash is needed:
npm init vite@latest one-vue3-component -- --template vue

# yarn
yarn create vite one-vue3-component --template vue
复制代码

创建成功后,运行项目

cd one-vue3-component
npm install
npm run dev
复制代码

打开浏览器访问:http://localhost:3000/

WX20210904-214209@2x

引入组件的区别

修改src/App.vue文件

<script setup>
import ToDoList from './components/ToDoList.vue'
</script>

<template>
  <ToDoList name="傲夫靠斯"/>
</template>
复制代码

这里我使用了Vue 3 <script setup> SFCs,相比Vue2来说,我们可以用更简洁的方式来书写代码。更加的直观。

看知乎上有很多人对这个setup有争议,我觉得在开发过程中让我更爽了,也让我少些无用代码,这没什么不好的。

Vue2演示

<script>
import ToDoList from './components/ToDoList.vue'
export default {
  name: 'App',
  components: {
    ToDoList
  }
}
</script>
复制代码

实现TODO-LIST组件

src/components文件下创建ToDoList.vue文件

<script setup>
// #1: 引入ref和computed
import { ref, computed } from "vue";

// #2: 定义props
defineProps({
  name: String
})
  
// #3: 声明响应式变量
const todo = ref('');
const todoList = ref([]);

// #4: 实现函数 (相当于Vue2里methods里的函数)
function addTodo() {
    todoList.value.unshift({
      title: todo.value,
      complete: false,
    });
    todo.value = '';
}

// #5 也可以使用箭头函数
const completeTodo = (index) => {
  todoList.value[index].complete = true;;
}

// #6: 实现清空函数
function restart() {
    todo.value = '';
    todoList.value = [];
}

// #7: 定义一个computed函数(相当于Vue2里computed里的函数)
const completeTotal = computed(() => {
    return todoList.value.filter(todo => todo.complete).length;
});
</script>

<template>
  <h1>{{ name }}的TODO-LIST</h1>
  <input type="text" v-model="todo">
  <button @click="addTodo()">提交</button>
  <div>任务总数: {{ todoList.length }}</div>
  <div>完成数量: {{ completeTotal }}</div>
  <button @click="restart()">清空</button>
  <ul>
    <li v-for="(todo, index) in todoList" :key="index">
        ({{ todo.complete ? '已完成' : '待完成'}})
       {{ todo.title }}
       <button @click="completeTodo(index)">完成</button>
    </li>
  </ul>
</template>
复制代码

然后可以看到浏览器会变化成TODO-LIST组件。

Kapture 2021-09-04 at 22.41.17

总结

通过最简单的TODO-LIST去了解Vue3有哪些变化,总体来说从开发和维护层面比Vue2好很多,composition api可以更好的去实现组件复用,但老的Vue2项目去升级Vue3还是有很大挑战,需要修改的东西很多,虽然官方给了文档。但对于线上的项目改动成本巨大,不敢贸然去升级。所以目前新项目去使用Vue3还是一个非常好的选择。

Github源码:github.com/cmdfas/one-…

文章分类
前端
文章标签