vue的增量式学习-篇章1

2024-01-02 21:36:59

vue的增量式学习-篇章1

vue的增量式学习-篇章1，又名：写毕设到企业级前端（第4天）

学习 vue 1
- 1. Vue 2的Options API和Vue 3的Composition API
- 2. Vue和 TypeScript的关系
- 3. 有关 vue相关的一些重要组件
学习 vue 1
1. Vue 2的Options API和Vue 3的Composition API
- Vue 2 的生命周期（Options API 写法）示例：
- Vue 3 的生命周期（Composition API 写法）示例：
2. Vue和 TypeScript的关系
- 在 Vue 2 中使用 TypeScript：
- 在 Vue 3 中使用 TypeScript：
- 好处：
3. 有关 vue相关的一些重要组件
- 用例：
如何选择
比如桌面应用（移动端同理）：
WebGL 应用示例
终端命令行应用示例

1. Vue 2的Options API和Vue 3的Composition API

当使用Vue 2的Options API和Vue 3的Composition API来编写组件时，以下是相应的示例代码，以便更好地理解它们之间的差异。

Vue 2 的生命周期（Options 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等）。生命周期钩子在组件的不同阶段执行相应的代码。

Vue 3 的生命周期（Composition API 写法）示例：

<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提供了更多的灵活性和可维护性，尤其对于大型应用程序和复杂组件来说，它可以更好地组织代码。

2. Vue和 TypeScript的关系

Vue.js 和 TypeScript 是两个不同但可以很好地结合使用的前端技术。下面是它们之间的关系和如何一起使用它们：

Vue.js 和 TypeScript 的关系：
- Vue.js 是一个流行的前端框架，用于构建交互式的用户界面。它提供了一种组件化的开发方式，使开发者可以更轻松地构建复杂的Web应用程序。
- TypeScript 是一个开源的编程语言，是 JavaScript 的超集。它添加了静态类型检查和其他强大的工具，以提高代码质量和可维护性。TypeScript可以与JavaScript一起使用，但也可以与Vue.js结合使用，以增强Vue.js项目的类型安全性和开发体验。
在 Vue 2 中使用 TypeScript：
- 在Vue 2中，你可以使用TypeScript编写Vue.js应用程序。Vue 2有一个官方的TypeScript声明文件（vue.d.ts），这使得在Vue组件中使用TypeScript变得更加容易。
- 你可以通过以下方式来创建Vue 2应用程序并与TypeScript结合使用：
  - 使用Vue CLI的TypeScript模板：Vue CLI是一个强大的开发工具，可以轻松创建Vue项目。Vue CLI提供了TypeScript模板，可以让你从头开始创建Vue 2项目，并配置TypeScript支持。
  - 手动配置：如果你已有一个Vue 2项目，你可以手动配置TypeScript支持，包括安装相关依赖、创建.ts文件和编写TypeScript代码。
在 Vue 3 中使用 TypeScript：
- Vue 3在设计上更加友好地支持TypeScript。Vue 3的核心代码是用TypeScript编写的，并且Vue 3的Composition API更容易与TypeScript集成。
- 你可以通过以下方式来创建Vue 3应用程序并与TypeScript结合使用：
  - 使用Vue CLI 3：Vue CLI 3提供了对Vue 3的支持，并且可以轻松创建Vue 3项目，其中包含了TypeScript的配置。
  - 手动配置：如果你更喜欢手动配置，你可以使用Vue 3的Composition API和TypeScript一起工作，创建具有类型安全性的Vue 3组件。
好处：
- 使用TypeScript与Vue.js结合可以带来以下好处：
  - 类型安全性：TypeScript可以帮助你在编码阶段捕获潜在的类型错误，减少运行时错误。
  - 更好的开发工具支持：TypeScript提供了更丰富的开发工具支持，包括自动完成、类型检查和重构。
  - 更好的代码维护性：使用静态类型可以提高代码的可读性和可维护性，尤其是在大型项目中。
  - 文档自动生成：结合TypeScript和Vue.js的JSDoc注释可以生成更好的文档，便于团队协作。

总之，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提供的函数，用于创建响应式数据。
- 响应式数据是Vue中非常重要的概念，它使数据的变化能够自动更新视图。
- 在示例中，ref用于创建newTodo和todos，使它们成为响应式数据，以便在模板中使用并自动响应数据的变化。

这些工具帮助我们在Vue 3中更好地组织代码，并利用TypeScript来提高类型安全性和开发体验。

3. 有关 vue相关的一些重要组件

对于上面提到的四个不同的场景，以下是简单的"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);

测试步骤：

安装 Electron 或 Tauri。
创建一个目录，将上述代码保存到对应的文件中。
运行 Electron 或 Tauri 应用，你将看到一个包含Vue的"Hello World"应用窗口。

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>

测试步骤：

创建Ionic Vue应用。
替换src/views/Home.vue中的内容。
运行应用：ionic serve。
打开浏览器，访问http://localhost:8100，你将看到一个Ionic Vue的"Hello World"应用。

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>

测试步骤：

创建Quasar项目。
替换src/pages/Index.vue中的内容。
运行应用：quasar dev。
打开浏览器，访问http://localhost:8080，你将看到一个Quasar的"Hello World"应用。

4. 使用 Vue 的自定义渲染 API 来构建不同目标的渲染器，比如 WebGL 甚至是终端命令行：

当涉及到WebGL和终端命令行时，涉及到的概念如下：

WebGL 应用示例：

WebGL：WebGL是一种用于在Web浏览器中渲染3D和2D图形的API。它允许开发者使用JavaScript来创建交互式的3D场景和图形应用程序。
Three.js：Three.js是一个用于简化WebGL开发的JavaScript库。它提供了许多方便的工具和功能，使得创建3D场景更加容易。
Vue组件：Vue组件是Vue框架中的基本构建块，用于构建用户界面。在上面的示例中，我们创建了一个Vue组件(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. 终端命令行应用示例：

终端命令行应用：终端命令行应用是一种在终端或命令行界面中运行的应用程序，通常通过文本输入和输出与用户进行交互。
Vue的自定义渲染API：Vue的自定义渲染API允许开发者将Vue组件渲染到不同的目标上，包括终端命令行。它提供了一种方式来在非浏览器环境中使用Vue组件。
Vue组件：同样，在终端命令行示例中，我们创建了一个Vue组件(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结合Electron等桌面应用框架可以实现跨平台的桌面应用开发。这意味着你可以使用相同的代码库构建适用于多个操作系统的应用程序，而无需编写针对每个平台的不同代码。
Web技术栈：使用Vue，你可以利用Web技术栈（HTML、CSS、JavaScript）来构建桌面应用。这对于前端开发者来说是一种有利的情况，因为他们已经熟悉这些技术，并且可以将他们的前端开发技能应用于桌面开发。
快速开发：Vue具有简单的语法和组件化的开发模式，使开发人员能够更快地构建用户界面。这可以加快桌面应用的开发速度，尤其是对于小型或中型项目。
社区和生态系统：Vue拥有一个庞大的社区和丰富的生态系统，这意味着你可以轻松地获得支持、插件和第三方库，以满足应用程序的需求。
UI库和组件：Vue生态系统中有许多UI库和组件，可以加速桌面应用的开发，提供丰富的界面元素和功能。

然而，要考虑的因素也包括：

性能要求：对于某些性能敏感的应用程序，如游戏或大规模数据处理应用程序，原生的C++可能更适合，因为它们可以更好地优化性能。
特定平台功能：原生应用程序可以更轻松地访问特定平台的硬件和功能，如文件系统、摄像头、传感器等。如果你需要充分利用这些功能，原生开发可能更合适。
开发团队技能：如果你的团队已经熟悉原生桌面开发技术，可能会更倾向于使用这些技术，因为它们已经具备相关经验。

总的来说，使用Vue进行桌面开发是一种灵活的选择，特别适合那些已经熟悉前端开发的团队，或者需要快速开发跨平台桌面应用的情况。然而，具体选择应根据项目需求、性能要求和团队技能来决定。

不得不提的 uniapp

Uni-app和Vue官方推荐的组件之间有一些区别，主要体现在以下几个方面：

跨平台支持：
- Uni-app专注于跨平台开发，允许你使用一套代码构建小程序、移动端应用和H5网页应用。
- Vue官方推荐的组件和库通常是为Web开发设计的，尽管可以通过一些工具和框架将它们用于移动端开发，但它们的主要关注点是Web。
生态系统：
- Vue官方推荐的组件和库是Vue生态系统的一部分，与Vue框架完美集成，可以充分利用Vue的特性。
- Uni-app有自己的生态系统，其中包括适用于多平台的组件和插件。虽然可以使用Vue.js语法，但不完全与Vue的生态系统一致。
用例：
- Uni-app适用于那些希望一次编写多平台应用的开发者，如同时开发小程序和移动应用的情况。
- Vue官方推荐的组件和库更适合单一平台的Web应用开发，例如构建响应式的网站或Web应用。
社区和支持：
- Vue拥有庞大的社区和活跃的维护者，因此可以获得广泛的支持、文档和插件。
- Uni-app的社区相对较小，可能会受到一些限制，但在跨平台开发领域有自己的用户群体。

选择使用Uni-app还是Vue官方推荐的组件取决于你的具体需求和项目情况：

如果你需要在多个平台上构建应用，Uni-app可能是更合适的选择，因为它专门为跨平台开发而设计。
另外，你还可以考虑项目规模、团队技能以及对特定平台功能的需求。 Uni-app和Vue官方推荐的组件都有其独特的优势，根据具体情况进行选择。
如果你接的是小单子，团队小，业务只需要考虑当下（毕竟大部分 app都是昙花一现），那么你就只要用 uniapp。最近微信小程序那么单子也都是这个。

概念式的讲解学习 vue的各个模块。

接下来就是介绍各部分组件概念

文章来源:https://blog.csdn.net/lixiemang8887/article/details/135323915
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！