vue的增量式学习-篇章1， 又名：写毕设到企业级前端（第4天）
当使用Vue 2的Options API和Vue 3的Composition API来编写组件时，以下是相应的示例代码，以便更好地理解它们之间的差异。
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: "Hello from Vue 2!",
};
},
created() {
console.log("Vue 2 - Component created");
},
mounted() {
console.log("Vue 2 - Component mounted");
},
updated() {
console.log("Vue 2 - Component updated");
},
beforeDestroy() {
console.log("Vue 2 - Component beforeDestroy");
},
destroyed() {
console.log("Vue 2 - Component destroyed");
},
};
</script>
上面的示例是一个Vue 2组件，使用了Options API来定义组件的数据（data）、模板（template）以及生命周期钩子（created、mounted、updated等）。生命周期钩子在组件的不同阶段执行相应的代码。
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
import { ref, onMounted, onUpdated, onBeforeUnmount } from "vue";
export default {
setup() {
const message = ref("Hello from Vue 3!");
onMounted(() => {
console.log("Vue 3 - Component mounted");
});
onUpdated(() => {
console.log("Vue 3 - Component updated");
});
onBeforeUnmount(() => {
console.log("Vue 3 - Component beforeUnmount");
});
return {
message,
};
},
};
</script>
这是一个Vue 3组件，使用了Composition API来定义组件的逻辑。注意，没有了明确的生命周期钩子，而是使用onMounted、onUpdated和onBeforeUnmount等函数来处理组件的不同生命周期阶段。这使得组件逻辑更加模块化和组织化。
这两个示例展示了Vue 2的Options API和Vue 3的Composition API之间的主要差异。Vue 3的Composition API提供了更多的灵活性和可维护性，尤其对于大型应用程序和复杂组件来说，它可以更好地组织代码。
Vue.js 和 TypeScript 是两个不同但可以很好地结合使用的前端技术。下面是它们之间的关系和如何一起使用它们：
vue.d.ts），这使得在Vue组件中使用TypeScript变得更加容易。.ts文件和编写TypeScript代码。总之，Vue.js和TypeScript可以很好地协同工作，提供了更好的开发体验和代码质量。你可以选择在Vue 2或Vue 3中使用TypeScript，具体取决于项目的需求和你的偏好。
<template>
<div>
<h1>Todo List</h1>
<input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new task" />
<ul>
<li v-for="(todo, index) in todos" :key="index">
{{ todo }}
<button @click="removeTodo(index)">Remove</button>
</li>
</ul>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
name: 'TodoList',
setup() {
// 声明和初始化响应式数据
const newTodo = ref('');
const todos = ref<string[]>([]);
// 添加待办事项
const addTodo = () => {
if (newTodo.value.trim() !== '') {
todos.value.push(newTodo.value);
newTodo.value = '';
}
};
// 删除待办事项
const removeTodo = (index: number) => {
todos.value.splice(index, 1);
};
// 返回数据和方法供模板使用
return {
newTodo,
todos,
addTodo,
removeTodo,
};
},
});
</script>
现在，示例中明确使用了TypeScript来定义类型。newTodo和todos都使用ref函数创建，它们的类型是通过TypeScript推断得出的。此外，addTodo和removeTodo方法都明确指定了参数的类型。
关于defineComponent和ref的作用：
defineComponent：
defineComponent是Vue 3的Composition API中的一个函数，用于定义组件。defineComponent帮助我们将组件的选项和逻辑组织在一起，使组件定义更加清晰和模块化。ref：
ref是Vue 3的Composition API提供的函数，用于创建响应式数据。ref用于创建newTodo和todos，使它们成为响应式数据，以便在模板中使用并自动响应数据的变化。这些工具帮助我们在Vue 3中更好地组织代码，并利用TypeScript来提高类型安全性和开发体验。
对于上面提到的四个不同的场景，以下是简单的"Hello World"示例代码以及如何进行简单的测试：
1. 配合 Electron 或 Tauri 构建桌面应用：
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Electron / Tauri Vue App</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="app.js"></script>
</body>
</html>
// app.js
const { app, BrowserWindow } = require('electron'); // 或者使用 Tauri 相应的导入
const createWindow = () => {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
});
mainWindow.loadFile('index.html');
};
app.whenReady().then(createWindow);
测试步骤：
2. 配合 Ionic Vue 构建移动端应用：
# 安装 Ionic CLI
npm install -g @ionic/cli
# 创建 Ionic Vue 应用
ionic start myApp vue
cd myApp
打开src/views/Home.vue文件，替换其中的内容：
<template>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Hello Ionic Vue</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
{{ message }}
</ion-content>
</ion-page>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Ionic Vue!'
};
}
};
</script>
测试步骤：
src/views/Home.vue中的内容。ionic serve。3. 使用 Quasar 用同一套代码同时开发桌面端和移动端应用：
# 安装 Quasar CLI
npm install -g @quasar/cli
# 创建 Quasar 项目
quasar create my-app
# 进入项目目录
cd my-app
在src/pages/Index.vue中替换内容：
<template>
<div class="q-pa-md text-h6">
{{ message }}
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Quasar!'
};
}
};
</script>
测试步骤：
src/pages/Index.vue中的内容。quasar dev。4. 使用 Vue 的自定义渲染 API 来构建不同目标的渲染器，比如 WebGL 甚至是终端命令行：
当涉及到WebGL和终端命令行时，涉及到的概念如下：
WebGL 应用示例：
webgl-scene)，它用于将Three.js渲染的WebGL场景嵌入到Vue应用中。WebGL 应用示例：
这个示例将使用Three.js库来创建一个简单的WebGL场景，并使用Vue的自定义渲染API将它渲染到Web页面上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebGL with Vue</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<div id="app"></div>
<script src="<https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js>"></script>
<script src="<https://unpkg.com/vue@3.2.22/dist/vue.global.prod.js>"></script>
<script>
const { createApp } = Vue;
const app = createApp({});
app.mount('#app');
// 创建Vue组件
app.component('webgl-scene', {
template: `
<div ref="container"></div>
`,
mounted() {
// 创建Three.js场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
this.$refs.container.appendChild(renderer.domElement);
// 创建一个简单的立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
// 渲染场景
const animate = () => {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
}
});
// 在Vue实例中使用WebGL组件
app.mount('#app', `
<div>
<webgl-scene></webgl-scene>
</div>
`);
</script>
</body>
</html>
2. 终端命令行应用示例：
App)，它用于定义应用程序的界面和逻辑。然后，我们使用Vue的自定义渲染API将这个组件渲染到终端命令行界面中。这个示例将演示如何使用Vue的自定义渲染API创建一个简单的终端命令行应用，这个应用将输出"Hello, Terminal!"。
const { createRenderer } = require('vue');
const renderer = createRenderer({
createElement(type) {
return { type };
},
patchProp(el, key, prevValue, nextValue) {
el[key] = nextValue;
},
insert(child, parent, anchor) {
parent[child.type] = child;
},
});
const App = {
data() {
return {
message: 'Hello, Terminal!'
};
},
render() {
return this.message;
},
};
const vm = renderer.createApp(App).mount();
console.log(vm); // 输出 "Hello, Terminal!"
比如桌面应用（移动端同理）：
使用Vue进行桌面开发而不使用原生的C++有以下一些潜在优点和考虑因素：
然而，要考虑的因素也包括：
总的来说，使用Vue进行桌面开发是一种灵活的选择，特别适合那些已经熟悉前端开发的团队，或者需要快速开发跨平台桌面应用的情况。然而，具体选择应根据项目需求、性能要求和团队技能来决定。
Uni-app和Vue官方推荐的组件之间有一些区别，主要体现在以下几个方面：
选择使用Uni-app还是Vue官方推荐的组件取决于你的具体需求和项目情况：
概念式的讲解学习 vue的各个模块。
接下来就是介绍各部分组件概念