Vite及其相关学习

1.vite

Vite 是一个基于现代浏览器原生 ES 模块的开发服务器和构建工具，旨在提供快速的开发体验。Vite 的设计理念是利用现代浏览器对 ES 模块的原生支持，以及通过按需编译的方式实现快速的热更新和构建速度。

Vite 可以与 Vue.js 组件开发无缝集成，是 Vue.js 3.0 推荐的开发工具。相对于 webpack，Vite 更加轻量、更加易用、更加快速。

举个简单例子：

在 Vue 2 中，通常会使用 export default 导出一个对象，对象中包含一个 data 方法，用来返回组件的数据。

export default {
  data() {
    return {
      message: 'Hello Vue.js'
    };
  },
};

因此，Vue 3 中使用 <script setup> 来定义组件的数据和逻辑，更加简洁和直观。相比于 Vue 2 中的 data 方法，Vue 3 中的 <script setup> 语法更加符合现代 JavaScript 开发的写法，同时也提供了更好的开发体验和性能优化。

注意：在 Vue 3 中，ref 和 reactive 是 Vue 提供的两种用于创建响应式数据的函数。

ref 函数用于创建一个包装对象，该对象包含一个 value 属性，用来存储基本类型数据（如数字、字符串等）。通过 ref 创建的对象是响应式的，当其值发生变化时，Vue 会自动更新相关的视图。

import { ref } from "vue";

const count = ref(0); // 创建一个包装对象，初始值为 0
console.log(count.value); // 输出 0
count.value++; // 修改值
console.log(count.value); // 输出 1

reactive 函数用于创建一个响应式的对象，可以包含多个属性和方法。通过 reactive 创建的对象是响应式的，当对象的属性发生变化时，Vue 会自动更新相关的视图。

import { reactive } from "vue";

const state = reactive({
  count: 0,
  message: "Hello"
});

console.log(state.count); // 输出 0
state.count++; // 修改 count 属性的值
console.log(state.count); // 输出 1

具体应用

<template>
  <div @click="addcount">{{ count }}</div>
  <div>obj{{ obj.num }}</div>
  <div><HelloWorld></HelloWorld></div>
</template>

<script setup>
import { ref, reactive } from "vue";
import HelloWorld from "./components/HelloWorld.vue";

const count = ref(1);
const obj = reactive({ num: 10 });

function addcount() {
  count.value++;
  obj.num++;
}
</script>

<style scoped>
/* 这里可以添加样式 */
</style>

2.一些简单的应用

<template>
  <div @click="addcount">{{ count }}</div>
  <div>obj{{ obj.num }}</div>
  <div>totalPrice{{ totalPrice }}</div>
</template>

<script setup>
import { ref, reactive, computed, watch } from "vue";

const count = ref(1);
const obj = reactive({ num: 10 });


function addcount() {
  count.value++;
  obj.num++;
}

const totalPrice = computed({
  get: () => {
    return count.value * 10;
  },
  set: (value) => {
    count.value = value / 10;
  }
});

watch(count, (newValue, oldValue) => {
  console.log(`count 从 ${oldValue} 变为 ${newValue}`);
});

</script>

<style scoped>
/* 这里可以添加样式 */
</style>

应用了computed，watch等