关注互联网应用及运维技术的个人博客

Vue3新的特性及使用评测

前言

从去年开始就有 Vue3 各种消息,一直比较期待 V3 的版本,因为 V2 针对 TypeScript 不是太完善,支持不是太好,一直没用上。其次针对 React 来比, V2 又显然太死板,并且在大项项目构架上来看,复用性很差。所以在之前的 Vue3 PPT 讲到诸多特性,知道前几天的 Beta 版本出现,虽然 Alpha 版本尝鲜过,无奈问题太多。所以趁此机会折腾一波,前置学习下。

建立

最近的 Beta 版本不需要建立 Webpack 项目,所以直接基于 Vue-CLI 脚手架生成的项目,直接注入相关插件就支持 Vue3 项目了。

使用 Vue Cli 建立项目:

vue create vue3-demo

Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, CSS Pre-processors, Lin
ter
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfi
lls, transpiling JSX)? No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated confi
g files
? Save this as a preset for future projects? No


vue add vue-next # 安装插件

安装上去发现 package.json 添加几个依赖以及 App.vue 发生改变,但还需要进行进一步配置:

  • 删除 shims-tsx.d.ts 文件,控制台一直显示错误,新版本存在兼容性问题,等官方说明,删掉不影响使用;
  • 修改 App.vue 内容:
<template>
  <div class="home">
    <img src="./assets/logo.png" alt="logo">
    <h1>Hello Vue 3!</h1>
    <button @click="inc">Clicked {{ count }} times.</button>
    <div class="todo-area">
      <todo-list/>
    </div>
  </div>
</template>a

<script lang="ts">
import { ref } from 'vue'
import TodoList from '@/components/TodoList.vue'

export default {
  setup () {
    const count = ref(0)
    const inc = () => {
      count.value++
    }
    return {
      count,
      inc
    }
  },
  components: {
    TodoList
  }
}
</script>

<style lang="scss" scoped>
.home {
  img {
    width: 200px;
  }

  h1 {
    color: #41b983;
    font-family: Arial, Helvetica, sans-serif;
  }
}
</style>

@/components/TodoList.vue 随便填充点内容,启动服务 yarn dev 就可以看到新版本的页面了。

实战

打算利用新的 Api 做个简单的 Todo List 例子:

<template>
  <div class="todo-list">
    <h3>Todo List</h3>
    <div class="add-todo-area">
      <label>
        <input v-model="addTodoName"/>
      </label>
      <label>
        <button @click="addTodoAction">新增清单</button>
      </label>
    </div>
    <div class="todo-area">
      <h3>任务清单</h3>
      <ul class="todo-list">
        <li
           v-for="item in undoneTodoList"
           :key="item.id"
           class="todo-item"
        >
          {{ item.name }}
          <button @click="doneTodo(item)">已完成</button>
          <button @click="delTodoAction(item, true)">删除</button>
        </li>
      </ul>
    </div>
    <div class="done-todo-area">
      <h3>已完成的任务清单</h3>
      <ul class="todo-list">
        <li
           v-for="item in completedTodoList"
           :key="item.id"
           class="todo-item"
        >
          {{ item.name }}
          <button @click="delTodoAction(item, false)">删除</button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, reactive } from 'vue'

import { TodoList } from './types/TodoList'

export default {
  setup () {
    const addTodoName = ref<string>('')
    const undoneTodoList: TodoList[] = reactive([]) // 清单列表
    const completedTodoList: TodoList[] = reactive([]) // 已完成的清单列表

    const addTodoAction = () => {
      const obj = {
        id: new Date().valueOf(),
        name: addTodoName
      }
      undoneTodoList.push(JSON.parse(JSON.stringify(obj)))
      addTodoName.value = ''
    }

    const delTodoAction = (item: TodoList, todo: boolean) => {
      if (todo) {
        undoneTodoList.splice(undoneTodoList.findIndex(i => i.id === item.id), 1)
      } else {
        completedTodoList.splice(completedTodoList.findIndex(i => i.id === item.id), 1)
      }
    }

    const doneTodo = (item: TodoList) => {
      undoneTodoList.splice(undoneTodoList.findIndex(i => i.id === item.id), 1)
      completedTodoList.push(item)
    }

    return {
      addTodoName,
      addTodoAction,
      delTodoAction,
      doneTodo,
      undoneTodoList,
      completedTodoList
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
赞(0)
未经允许不得转载:飞天狒狒 » Vue3新的特性及使用评测

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址