【Vue3】初识Vue3

Vite 构建 Vue3项目

Vite（法语意为 “迅速”，发音 /vit/）: 前端开发与构建工具

快速冷启动：Vite利用原生ES模块，无需进行打包和编译，所以它冷启动的时间很短。
快速热重载：Vite支持快速的热更新。它只会更新已经打开的文件，不会重新构建整个应用程序。
配置简单：相较于其他构建工具，Vite的配置较为简单。
支持多种开发框架：Vite适用于多种前端框架，包括但不限于Vue，React，Angular。
通用的插件：Vite在开发和构建之间共享Rollup-superset插件接口，开发者可以使用大量的通用插件来扩展Vite的功能

使用Vite快速搭建项目的命令：

# 构建项目的命令
npm create vue@latest
# 启动项目的命令
npm run dev

Vue3和Vue2在结构上的区别

<template>
  <div class="person">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>

<script lang="ts">
export default {
  name: "Person",
  setup() {
    // setup函数中的this指向的是undefined，Vue3中开始弱化了this的使用
    // 数据原来是写在data中的，现在写在setup中
    // 数据
    let name = "lily"; // 此时的name不是响应式的
    let age = 10; // 此时的age不是响应式的
    let tel = "1234567890"; // 此时的tel不是响应式的

    // 方法
    function changeName() {
      name = "lucy"; // 此时可以修改name，但由于不是响应式的，所以页面不会更新
      console.log(name);
      
    }

    function changeAge() {
      age++;
    }

    function showTel() {
      alert(tel);
    }
    return {
      name,
      age,
      changeName,
      changeAge,
      showTel,
    };
  },
};
</script>

<style scoped>
.person {
  background-color: #ddd;
  box-shadow: 0 0 10px #ddd;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 10px;
}
</style>

<template>
  <div class="person">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>

<script lang="ts">
export default {
  name: "Person",
  data() {
    return {
      name: "lily",
      age: 18,
      tel: "12345678901",
    };
  },
  methods: {
    showTel() {
      alert(this.tel);
    },
    changeName() {
      this.name = "lucy";
    },
    changeAge() {
      this.age++;
    },
  },
};
</script>

<style scoped>
.person {
  background-color: #ddd;
  box-shadow: 0 0 10px #ddd;
  border-radius: 10px;
  padding: 20px;
}
button{
  margin: 10px;
}
</style>

从上面两个Vue3和Vue2的代码块看来，Vue2采用选项式API（Options API）的形式，将代码中变量的存储放置在data(return {})中，将方法放置在methods:{}中...而在Vue3中所有的变量的定义，函数的定义和使用都放在了setup(){}中，这使得在开发中，做某一个功能的时候，相应的变量和与之相关的方法能放在一起。这种将相关的逻辑和业务封装到一起，使用更加函数式的方法来组织代码结构这也就是所谓的组合式API（Composition API）。使用组合式API进行开发，可以提高代码的可读性、可维护性和重用性。

反观Vue2，进行开发的时候，由于业务相关的方法和变量分开存放，一旦涉及到代码量大的项目，就可能会出现需要上下滚动翻找的情况。setup()语法在这点上算是一个体验优化吧。

注意：在Vue2中，常使用this来获取data()中存储的变量，但是在Vue3中，setup()中是不能使用this的

setup语法糖

通过使用vite-plugin-vue-setup-extend插件

// 安装命令
npm i vite-plugin-vue-setup-extend -D

// 在vite.config.ts 文件中做如下配置
// 1. 引入插件
import VueSetupExtend from "vite-plugin-vue-setup-extend"

export default {
  plugins:[
   VueSetupExtend() // 注册插件即可
  ]
}

使用这个插件之后可以vue3的代码模板可以这么写：

<template>
  <div class="app">
  <!-- html结构 -->
  
  </div>
</template>
<script setup lang="ts" name="ComponentName">
// ts 代码
</script>
<style scoped>
// css样式
</style>

观察上述代码可以发现，使用了vite-plugin-vue-setup-extend 插件后，省略了在export default{ }中使用setup()的写法，只需要在<script>标签内标注 "setup" 即可。同时，组件的名称可以使用name属性来声明。

Vue3学习记录（一）

【Vue3】初识Vue3

Vite 构建 Vue3项目

Vue3和Vue2在结构上的区别

setup语法糖