vue3(2022年10月国庆节在家学习VUE3)

管理员 2022-10-02 22:51:44 0

经历了几年的VUE2的**,VUE3的官方文档终于同大家见面了。一个全新的时代又到来了,如果不抓紧时间学习只有被淘汰的份。**7天假期正是一个恶补的黄金时期。下面是VUE3官网截图。

2022年10月**节在家学习VUE3

VUE3官网截图

2022年10月**节在家学习VUE3

VUE3官网截图

那问题来了,VUE3如何学习呢?

1,如何学习VUE1-1,小白如何学习

如果你是一个前端小白,可能在学习VUE3之前需要有下列知识基础:

HTML基础CSS基础Javascript基础TypeScript基础1-2,老手快速入门

如果你是一个前端老手,那你就可以开始了。按照VUE3的官方文档描述,官网提供了2种风格的书写**:选项式 API 和组合式 API。对于刚入门VUE3的同学或者之前有VUE2****的同学,可以选择选项式 API风格阅读。组合API**,更适合复杂项目的**。

不管是新手还是老手都是可以通过网络视频学习,如*课网,*讯课堂,*度课堂,**3课堂等等……

1-3,官网对API风格和组合API**做了下面的描述:1-3-1,选项式 API (Options API)

使用选项式 API,我们可以用包含多个选项的对象来描述组件的逻辑,例如 data、methods 和 mounted。选项所定义的属性都会**在函数内部的 this 上,它会指向当前的组件实例。

1-3-2,组合式 API (Composition API)

通过组合式 API,我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中,组合式 API 通常会与 <script setup> 搭配使用。这个 setup attribute 是一个标识,告诉 Vue 需要在编译时进行一些处理,让我们可以更简洁地使用组合式 API。比如,<script setup> 中的导入和顶层变量/函数都能够在模板中直接使用。

下面我们以官方文档组合式API文档**VUE3细节的变化。

2,VUE3细节变化2-1,创建应用的**变了

使用createApp()**创建。

import { createApp } from 'vue'// 从一个单文件组件中导入根组件import App from './App.vue'const app = createApp(App)2-2,模板可以有多个“根”元素。

VUE2的template中只有一个“根”标签,但是VUE3中可以有多个“根”标签。

<template> <div>root1</div> <div>root2</div> <div>root3</div> </template>2-3,VUE3的响应式设计发生变化

在 Vue 3 中,数据是基于 JavaScript Proxy(代理) 实现响应式的。我们看官网的描述,如下图:

2022年10月**节在家学习VUE3

2022年10月**节在家学习VUE3

详细信息可以点击链接下面的地址:

https://cn.vuejs.org/guide/extras/reactivity-in-depth.html#runtime-vs-compile-time-reactivity

官方给我提供了一个非常重要的信息:在 JavaScript 中有两种劫持 property 访问的**:getter / setters 和 Proxies。

getter/setters对于VUE2 的同学应该非常清楚。Proxies大家可以到MDN上恶补。

2-4,生命周期发生了变化

将VUE2中的beforeDistroy和distoryed变成了beforeUnmount和unmounted。

下图是VUE3的生命周期图:

2022年10月**节在家学习VUE3

2-5,可以使用组合式API**

可以是setup()**或者<script setup></script>形式。

2-6,侦听器**了变化

VUE2中可以使用watch和计算属性,在vue3中watch和计算属性都可以使用,同时**了watchEffect这api。

2022年10月**节在家学习VUE3

2-7,多个v-model绑定

下面是官方的代码,足以说明问题:

<UserName v-model:first-name="first" v-model:last-name="last"/> <script setup>defineProps({ firstName: String, lastName: String})defineEmits(['update:firstName', 'update:lastName'])</script><template> <input type="text" :value="firstName" @input="$emit('update:firstName', $event.target.value)" /> <input type="text" :value="lastName" @input="$emit('update:lastName', $event.target.value)" /></template>

2-8,引入组合式函数

引入组合式函数,可以为复杂应用简化代码做好基础。关于组合式函数官方的描述:

什么是“组合式函数”?

在 Vue 应用的概念中,“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。

当构建前端应用时,我们常常需要复用公共任务的逻辑。例如为了在不同地方格式化时间,我们可能会抽取一个可复用的日期格式化函数。这个函数封装了无状态的逻辑:它在接收一些输入后立刻返回所期望的输出。复用无状态逻辑的库有很多,比如你可能已经用过的 lodash 或是 date-fns。

相比之下,有状态逻辑负责管理会随时间而变化的状态。一个简单的例子是跟踪当前鼠标在页面中的位置。在实际应用中,也可能是像触摸手势或与数据库的连接状态这样的更复杂的逻辑。

2-9,引入了内置组件

Transition,TransitionGroup,KeepAlive,Teleport,Suspense

上面是初次看VUE3中的官方文档中很容易看到的与vue2 的不同点。那么大家觉得VUE3以后能成为大型项目的首选吗?你会使用VUE3**项目吗?你会**学习VUE3吗?

相关资讯

热门资讯

热门话题