学了vue2后如何快速学习vue3

念幽

已于 2024-05-23 20:03:59 修改

阅读量1k

点赞数 16

文章标签：学习 vue.js 前端 javascript

于 2024-05-23 19:58:59 首次发布

本文链接：https://blog.csdn.net/2301_76962889/article/details/139156064

版权

一、创建一个Vue 3项目

使用npm创建一个新的Vue 3项目：

npm create vue@latest

接下来就会出现各种选项，根据需要选择

运行vue3项目

cd <your-project-name>
npm install
npm run dev

访问地址就能看见vue3的log了

二、组合式API (Composition API)

Vue 3引入了组合式API，使得逻辑组织更灵活。以下是一个简单的示例：

// HelloWorld.vue
<script setup>
import { ref } from 'vue';

const count = ref(0);
const increment = () => {
  count.value++;
};
</script>

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

三、生命周期钩子

在组合式API中，生命周期钩子函数通过 onXXX 函数使用。

import { ref, onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue 3!');

    onMounted(() => {
      console.log('Component is mounted');
    });

    onUnmounted(() => {
      console.log('Component is unmounted');
    });

    return { message };
  }
};

四、响应式系统

Vue 3对响应式系统进行了改进，使用 reactive 和 ref 可以更方便地管理状态。

`1.reactive`

reactive 用于创建响应式对象。它将一个普通的JavaScript对象转换为一个响应式对象。当对象中的属性发生变化时，视图将会自动更新。

import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0,
      user: {
        name: 'Alice',
        age: 25
      }
    });

    const increment = () => {
      state.count++;
    };

    return {
      state,
      increment
    };
  }
};

在这个示例中，state 是一个响应式对象，当你改变 state.count 的值时，绑定到这个属性的视图部分会自动更新。

`2.ref`

ref 用于创建一个包含单一值的响应式引用。它可以是基本类型的值（如字符串、数字）或对象。当引用的值发生变化时，视图也会自动更新。

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment
    };
  }
};

在这个示例中，count 是一个包含数值的响应式引用。注意我们通过 count.value 访问和修改它的值。

在Vue 3中，reactive 和 ref 是两种用于创建响应式数据的API。它们在响应式系统中扮演了不同的角色，并且各自有其适用的场景。以下是它们的详细说明和使用示例。

3.区别和选择

数据类型和结构:
- reactive 适用于处理复杂的对象和嵌套结构。如果你有一个包含多个属性的对象，并且这些属性之间可能有某种逻辑关联，使用 reactive 更为自然。
- ref 适用于处理简单的单一值，尤其是基本类型的值。
嵌套和深层响应式:
- reactive 自动处理嵌套对象的响应式，不需要额外的操作。例如，如果一个对象的嵌套属性发生变化，Vue会自动跟踪这些变化。
- ref 对象内的嵌套属性不会自动变成响应式。如果需要处理嵌套对象的响应式，需要显式地将嵌套对象也转换为 reactive 或 ref。
组合使用:
- 在实际应用中，reactive 和 ref 常常一起使用。可以在一个 reactive 对象中使用 ref 引用单一值，或者在一个 ref 对象中使用 reactive 进行深层响应式处理。

示例：组合使用 `reactive` 和 `ref`

import { reactive, ref } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: ref(0),
      user: {
        name: 'Alice',
        age: 25
      }
    });

    const increment = () => {
      state.count.value++;
    };

    return {
      state,
      increment
    };
  }
};

在这个示例中，state 是一个响应式对象，其中 count 是一个包含数值的响应式引用。

五、新的组件定义方式

Vue 3 提供了 defineComponent 方法，可以更好地支持类型推断。

import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'MyComponent',
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment
    };
  }
});

六、Teleport

Vue 3 新增了 Teleport 组件，可以将子组件渲染到指定的DOM节点。

<template>
  <div>
    <h1>My App</h1>
    <teleport to="body">
      <div class="modal">
        <p>This is a modal</p>
      </div>
    </teleport>
  </div>
</template>

七、Fragments

Vue 3 支持组件返回多个根节点，这在Vue 2中是不能实现的。

<template>
  <div>
    <p>First element</p>
    <p>Second element</p>
  </div>
  <div>
    <p>three element</p>
  </div>
</template>

八、单文件组件 (SFC) 的改进

Vue 3 对单文件组件进行了优化，包括 <script setup> 语法糖：

<script setup>
import { ref } from 'vue';

const count = ref(0);
const increment = () => {
  count.value++;
};
</script>

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

九、Vue 3 和 TypeScript

Vue 3 对 TypeScript 的支持更好，可以更方便地编写类型安全的代码。

import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'MyComponent',
  setup() {
    const count = ref<number>(0);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment
    };
  }
});