一、專案搭建

vite是尤大大開發的一款意圖取代webpack的工具。其實現原理是利用ES6的import傳送請求載入檔案的特性。攔截這些請求，做一些編譯，省去webpack冗長的打包時間。並將其與Rollup捆綁在一起用於生產。
在開發過程中沒有捆綁。原始碼中的ES Import語法直接提供給瀏覽器，瀏覽器通過本機

1、全域性安裝vite腳手架

npm install -g create-vite-app

2、使用腳手架建立專案

create-vite-app projectName

3、進入專案資料夾

cd projectName

4、安裝依賴

npm install

5、啟動vue3.0專案

npm run dev

二、vue2.x存在的問題

2.x中的一點問題是當業務不斷增多時，資料跟邏輯分散，會很難維護。

<template>
  <div>
    <div>
      <input type="text" v-model="obj.id">
      <input type="text" v-model="obj.con">
      <button @click="submit">提 交</button>
    </div>
    <ul>
      <li v-for="(item,index) in list" :key="item.id" @click="cli(index)">
        {{item.id}}-{{item.con}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name:"filterBox",
  data(){
    return {
      list:[
        {
          id:1,
          con:"a"
        },
        {
          id:2,
          con:"b"
        }
      ],
      obj:{
        id:"",
        con:""
      }
 

更多內容請見原文，原文轉載自：https://blog.csdn.net/weixin_44519496/article/details/118755948