Vue3 has been around for a long time, and I’ve been using Vue for years, and I love the Vue framework. Today I’m going to show you the power of Vue3 and how it differs from Vue2 through one of its simplest components. We’ll use Vite, composition API, ref, computed, setup() and other new features of Vue3.

Create a project

I do not use VUE-CLI to create the project, but use Vue’s new ecological construction Vite to create it. Vite is a very good Web development packaging tool, which allows us to use the native ES Module when developing. It does not need to be packaged like Webpack. This is much faster than WebPack. Use Rollup to package JS code in a production environment. Not only supports Vue3, but also supports React and other frameworks

Create a Vue3 project using Vite

# 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
Copy the code

After successful creation, run the project

cd one-vue3-component
npm install
npm run dev
Copy the code

Open your browser and visit http://localhost:3000/

Introduce component differences

Modify the SRC/app. vue file

< script setup > import ToDoList from '. / components/ToDoList. Vue '< / script > < template > < ToDoList name = "proud, depend," / > < / template >Copy the code

Here I used Vue 3

There’s been a lot of controversy about this setup on the web, but I think it’s made me feel better during development and less useless code, which is fine.

Vue2 demo

<script>
import ToDoList from './components/ToDoList.vue'
export default {
  name: 'App'.components: {
    ToDoList
  }
}
</script>
Copy the code

Implement the todo-list component

Create the todolist. vue file under the SRC/Components file

<script setup>
// #1: introduce REF and computed
import { ref, computed } from "vue";

// #2: define props
defineProps({
  name: String
})
  
// #3: declare reactive variables
const todo = ref(' ');
const todoList = ref([]);

// #4: implement functions (equivalent to methods in Vue2)
function addTodo() {
    todoList.value.unshift({
      title: todo.value,
      complete: false}); todo.value =' ';
}

// #5 can also use the arrow function
const completeTodo = (index) = > {
  todoList.value[index].complete = true;;
}

// #6: Implement the empty function
function restart() {
    todo.value = ' ';
    todoList.value = [];
}

// #7: Define a computed function (equivalent to a function in computed in Vue2)
const completeTotal = computed(() = > {
    return todoList.value.filter(todo= > todo.complete).length;
});
</script>

<template>
  <h1>Todo-list of {{name}}</h1>
  <input type="text" v-model="todo">
  <button @click="addTodo()">submit</button>
  <div>Total number of tasks: {{todolist.length}}</div>
  <div>{{completeTotal}}</div>
  <button @click="restart()">empty</button>
  <ul>
    <li v-for="(todo, index) in todoList" :key="index">({{todo.com plete? 'completed' : 'pending'}}, {{todo. Title}}<button @click="completeTodo(index)">complete</button>
    </li>
  </ul>
</template>
Copy the code

You can then see that the browser changes to the todo-list component.

conclusion

Vue3 is much better than Vue2 in terms of development and maintenance. The Composition API is better for component reuse. However, upgrading Vue3 from the old Vue2 project is still a big challenge, and there are many things that need to be modified, although the official documents are provided. However, for online projects, the cost of modification is huge, so I dare not upgrade them rashly. So Vue3 is still a very good choice for new projects.

Github source: github.com/cmdfas/one-…