学了vue2后如何快速学习vue3

一、创建一个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对响应式系统进行了改进,使用 reactiveref 可以更方便地管理状态。

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中,reactiveref 是两种用于创建响应式数据的API。它们在响应式系统中扮演了不同的角色,并且各自有其适用的场景。以下是它们的详细说明和使用示例。

3.区别和选择

  1. 数据类型和结构:

    • reactive 适用于处理复杂的对象和嵌套结构。如果你有一个包含多个属性的对象,并且这些属性之间可能有某种逻辑关联,使用 reactive 更为自然。
    • ref 适用于处理简单的单一值,尤其是基本类型的值。
  2. 嵌套和深层响应式:

    • reactive 自动处理嵌套对象的响应式,不需要额外的操作。例如,如果一个对象的嵌套属性发生变化,Vue会自动跟踪这些变化。
    • ref 对象内的嵌套属性不会自动变成响应式。如果需要处理嵌套对象的响应式,需要显式地将嵌套对象也转换为 reactiveref
  3. 组合使用:

    • 在实际应用中,reactiveref 常常一起使用。可以在一个 reactive 对象中使用 ref 引用单一值,或者在一个 ref 对象中使用 reactive 进行深层响应式处理。
示例:组合使用 reactiveref
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
    };
  }
});

十、vue2和vue3区别

1. 性能提升:

  • 更快的渲染速度: Vue 3 重写了虚拟 DOM,优化了编译和渲染过程,使得渲染速度比 Vue 2 快 1.3 ~ 2 倍。
  • 更小的体积: 通过摇树优化(Tree-shaking),Vue 3 的打包体积比 Vue 2 小了 41%。
  • 更低的内存占用: Vue 3 的内存使用量比 Vue 2 减少了 54%。

2. Composition API:

  • Vue 3 引入了 Composition API,这是一种新的组件逻辑组织方式。它允许开发者更灵活地组合和复用组件逻辑,提高了代码的可读性和可维护性。
  • Composition API 可以更好地支持 TypeScript,提供了更强大的类型推断和类型检查。

3. 响应式系统:

  • Vue 3 使用 Proxy 代替 Object.defineProperty 来实现响应式系统。Proxy 提供了更强大的功能,可以监听数组的变化和动态添加的属性。

4. 其他变化:

  • Fragments (碎片): Vue 3 支持 Fragments,允许组件返回多个根节点,无需额外的包装元素。
  • Teleport: Teleport 组件可以将子组件渲染到父组件以外的 DOM 节点中。
  • Suspense: Suspense 组件可以等待异步组件加载完成,并在加载过程中显示加载状态。
  • 全局 API 的变化: Vue 3 对全局 API 进行了一些修改,例如创建应用实例的方式、全局组件和指令的注册方式等。
  • 生命周期钩子的变化: Vue 3 对一些生命周期钩子进行了重命名和调整。

总结:

Vue 3 在性能、灵活性、可维护性等方面都比 Vue 2 有了显著的提升。如果您正在开始一个新项目,强烈建议使用 Vue 3。如果您有现有的 Vue 2 项目,可以考虑逐步迁移到 Vue 3。

  • 16
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值