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等