一文学会使用Vue3，CSS浮动实战

最新推荐文章于 2024-06-01 16:44:48 发布

2301_79098879

最新推荐文章于 2024-06-01 16:44:48 发布

阅读量713

点赞数 18

分类专栏：程序员文章标签： css vue.js 前端

本文链接：https://blog.csdn.net/2301_79098879/article/details/137388462

版权

程序员专栏收录该内容

284 篇文章 0 订阅

订阅专栏

};

});

ref

作用

定义一个响应式的数据(一般用来定义一个基本类型的响应式数据Undefined、Null、Boolean、Number和String)

语法

const xxx = ref(initValue):

注意：script中操作数据需要使用xxx.value的形式，而模板中不需要添加.value

用一个例子来演示：实现一个按钮,点击可以增加数字

<button @click=‘updateCount’>增加

在Vue2中

data() {

return {

conunt: 0,

};

methods: {

updateCount() {

this.conunt++;

在Vue3中

setup() {

// ref用于定义一个响应式的数据，返回的是一个Ref对象，对象中有一个value属性

//如果需要对数据进行操作，需要使用该Ref对象的value属性

const count = ref(0);

function updateCount() {

count.value++;

}

return {

count,

updateCount,

};

在Vue2中我们通过this.$refs来获取dom节点，Vue3中我们通过ref来获取节点

首先需要在标签上添加ref='xxx'，然后再setup中定义一个初始值为null的ref类型,名字要和标签的ref属性一致

const xxx = ref(null)

注意：一定要在setup的return中返回，不然会报错。

还是用一个例子来演示:让输入框自动获取焦点

App

—

reactive

语法

const proxy = reactive(obj)

作用

定义多个数据的响应式，接收一个普通对象然后返回该普通对象的响应式代理器对象(Proxy)，响应式转换是“深层的”：会影响对象内部所有嵌套的属性,所有的数据都是响应式的。

代码演示

姓名:{{user.name}}

年龄:{{user.age}}

wife:{{user.wife}}

<button @click=“updateUser”>更新

setup() {

const user = reactive({

name: ‘hzw’,

age: 18,

wife: {

name: ‘xioaohong’,

age: 18,

books: [‘红宝书’, ‘设计模式’, ‘算法与数据结构’],

});

const updateUser = () => {

user.name = ‘小红’;

user.age += 2;

user.wife.books[0] = ‘金瓶梅’;

};

return {

user,

updateUser,

};

computed函数:

与Vue2中的computed配置功能一致，返回的是一个ref类型的对象

计算属性的函数中如果只传入一个回调函数表示的是get操作

import { computed } from ‘vue’;

const user = reactive({

firstName: ‘韩’,

lastName: ‘志伟’,

});

const fullName1 = computed(() => {

return user.firstName + user.lastName;

});

return {

user,

fullName1,

};

计算属性的函数中可以传入一个对象,可以包含set和get函数,进行读取和修改的操作

const fullName2 = computed({

get() {

return user.firstName + ‘_’ + user.lastName;

set(val: string) {

const names = val.split(‘_’);

user.firstName = names[0];

user.lastName = names[1];

});

return {

user,

fullName2,

};

watch函数:

与Vue2中的watch配置功能一致,

参数1:要监听的数据
参数2:回调函数
参数3:配置

作用

监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调

默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次

通过配置deep为true, 来指定深度监视

import { watch, ref } from ‘vue’;

const user = reactive({

firstName: ‘韩’,

lastName: ‘志伟’,

});

const fullName3 = ref(‘’);

watch(

user,

({ firstName, lastName }) => {

fullName3.value = firstName + ‘_’ + lastName;

{ immediate: true, deep: true }

);

return {

user,

fullName3,

};

watch监听多个数据,使用数组

watch监听非响应式数据的时候需要使用回调函数的形式

watch([()=>user.firstName,()=>user.lastName,fullName3],()=>{console.log(‘我执行了’)})

watchEffect函数:

作用

监视数据发生变化时执行回调，不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据，默认初始时就会执行第一次, 从而可以收集需要监视的数据。

import { watchEffect, ref } from ‘vue’;

const user = reactive({

firstName: ‘韩’,

lastName: ‘志伟’,

});

const fullName4 = ref(‘’);

watchEffect(() => {

fullName4.value = user.firstName + ‘_’ + user.lastName;

});

return {

user,

fullName4,

};

watchEffect可以实现计算属性set方法

watchEffect(() => {

const names = fullName3.value.split(‘_’);

user.firstName = names[0];

user.lastName = names[1];

});

生命周期对比:

注意:3.0中的生命周期钩子要比2.X中相同生命周期的钩子要快

Composition API还新增了以下调试钩子函数：但是不怎么常用

onRenderTracked
onRenderTriggered

代码演示

setup() {

onBeforeMount(() => {

console.log(‘–onBeforeMount’)

})

onMounted(() => {

console.log(‘–onMounted’)

})

onBeforeUpdate(() => {

console.log(‘–onBeforeUpdate’)

})

onUpdated(() => {

console.log(‘–onUpdated’)

})

onBeforeUnmount(() => {

console.log(‘–onBeforeUnmount’)

})

onUnmounted(() => {

console.log(‘–onUnmounted’)

})

}

toRefs

作用

把一个响应式对象转换成普通对象，该普通对象的每个属性都是一个 ref

应用

我们使用reactive创建的对象，如果想在模板中使用，就必须得使用xxx.xxx的形式,如果大量用到的话还是很麻烦的,但是使用es6解构以后,会失去响应式,那么toRefs的作用就体现在这,，利用toRefs可以将一个响应式 reactive 对象的所有原始属性转换为响应式的ref属性。当然小伙伴们可以自行开发更多应用场景。

代码演示

name:{{name}}

provide 与 inject

作用

实现跨层级组件(祖孙)间通信

代码演示

父组件

当前颜色: {{color}}

<button @click=“color=‘red’”>红

<button @click=“color=‘yellow’”>黄

<button @click=“color=‘blue’”>蓝

子组件

孙子组件

孙子组件: {{color}}

其他特性

===============================================================

Teleport(瞬移)

作用

Teleport 提供了一种干净的方法, 让组件的html在父组件界面外的特定标签(很可能是body)下插入显示换句话说就是可以把 子组件 或者 dom节点 插入到任何你想插入到的地方去。

语法

使用to属性引号内使用选择器

代码演示

//父组件

App

//子组件

点我打开对话框

class=“looklook”>

看看我出现在了哪里

可以看到在子组件中的looklook元素跑到了body下面,而之前的位置默认出现了两行注释

Suspense(不确定的)

作用

它们允许我们的应用程序在等待异步组件时渲染一些后备内容，可以让我们创建一个平滑的用户体验

语法

LOADING...

vue3中引入异步组件的方式

const AsyncComp = defineAsyncComponent(() => import(‘./AsyncComp.vue’))

代码演示

父组件

LOADING...

子组件

AsyncComp22

通过下图可以看到在异步组件加载出来之前,显示的是fallback中的内容

响应式数据的判断

作用

isRef: 检查一个值是否为一个 ref 对象
isReactive: 检查一个对象是否是由 reactive 创建的响应式代理
isReadonly: 检查一个对象是否是由 readonly 创建的只读代理
isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理

代码演示

setup() {

const state1 = ref(1);

console.log(‘isref:’, isRef(state1));//isref: true

const state2 = reactive({});

console.log(‘isReactive:’, isReactive(state2));//isReactive: true

const state3 = readonly({});

console.log(‘isReadonly:’, isReadonly(state3));//isReadonly: true

const state4 = reactive({});

console.log(‘isProxy:’, isProxy(state2));//isProxy: true

console.log(‘isProxy:’, isProxy(state4));//isProxy: true

return {};

其他不常用特性

还有很多很多不常用的新特性，我在日常开发中是没有用到的，很多都是用来做优化的，感兴趣的小伙伴们自行去官网查看，或者大佬们可以介绍一下应用场景。

shallowReactive
shallowRef
readonly
shallowReadonly
markRaw
customRef
…

语法糖

==============================================================

虽然Composition API用起来已经非常方便了，但是我们还是有很烦的地方，比如

组件引入了还要注册
属性和方法都要在setup函数中返回，有的时候仅一个return就十几行甚至几十行
…
不想写啊怎么办

好办，Vue3官方提供了script setup语法糖

只需要在script标签中添加setup，组件只需引入不用注册，属性和方法也不用返回，setup函数也不需要，甚至export default都不用写了，不仅是数据，计算属性和方法，甚至是自定义指令也可以在我们的template中自动获得。

但是这么过瘾的语法糖，还是稍微添加了一点点心智负担，因为没有了setup函数，那么props，emit，attrs怎么获取呢，就要介绍一下新的语法了。

setup script语法糖提供了三个新的API来供我们使用：defineProps、defineEmit和useContext

defineProps 用来接收父组件传来的值props。
defineEmit 用来声明触发的事件表。
useContext 用来获取组件上下文context。

代码演示

父组件

我是父组件！

<Child msg=“hello”

@child-click=“handleClick” />

子组件

<span @click=“sonClick”>msg: {{ props.msg }}

我们点击一下子组件

可以看到context被打印了出来，其中的attrs、emit、slots、expose属性和方法依然可以使用。 props也可以输出在页面上，事件也成功派发。

其他知识点

================================================================

接下来介绍一下我使用Vue3过程中遇到的问题或者小技巧，不全面，想起什么就写什么吧

script setup语法糖请注意

如果在父组件中通过ref='xxx'的方法来获取子组件实例，子组件使用了script setup语法糖,那么子组件的数据需要用expose的方式导出，否则会因为获取不到数据而报错。

代码演示

父组件

我是父组件！

子组件先不使用语法糖

我是子组件{{msg}}

可以看到现在是获取不到子组件定义的msg属性的

我们可以看看尤大大怎么说

Emit派发事件可以对参数进行验证

父组件

我是父组件！

子组件

我是子组件{{ msg }}

<button @click=“handleClick(1)”>我是按钮1

<button @click=“handleClick(2)”>我是按钮2

我们分别点一下按钮1和按钮2，可以看到当我们点了按钮2的时候，控制台会发出警告，但是程序会继续执行，还没想到什么适合的应用场景，但是要知道这个知识点，小伙伴们可以在这搞事情。

跨组件通讯mitt.js

Vue2中怎么实现跨组件通讯呢,很多人第一想法就是event bus。但是Vue3移除了$on,$once,$off导致不能使用这个方法。但是Vue官方给大家推荐了mitt.js,它的原理就是event bus。

代码演示

先安装

npm i mitt -s

然后封装一个hook

//mitt.js

import mitt from ‘mitt’

const emitter = mitt();

export default emitter;

父组件

我是父组件！

子组件1

我是子组件1

子组件2

我是子组件2

<button @click=‘changeMsg’>点击修改msg

演示

自定义指令

先看看Vue2自定义指令的钩子

bind：当指令绑定在对应元素时触发。只会触发一次。
inserted：当对应元素被插入到 DOM 的父元素时触发。
update：当元素更新时，这个钩子会被触发（此时元素的后代元素还没有触发更新）。
componentUpdated：当整个组件（包括子组件）完成更新后，这个钩子触发。
unbind：当指令被从元素上移除时，这个钩子会被触发。也只触发一次。

在 Vue3 中，官方为了更有助于代码的可读性和风格统一，把自定义指令的钩子名称改的更像是组件生命周期，尽管他们是两回事

bind => beforeMount
inserted => mounted
beforeUpdate: 新的钩子，会在元素自身更新前触发
update => 移除！
componentUpdated => updated
beforeUnmount: 新的钩子，当元素自身被卸载前触发
unbind => unmounted

过渡动画

这个没有什么大的改动，只是修改了两个class名字，正是因为没有什么大的改动，导致我曾经在这里栽了大跟头，写完了怎么都不对，后来查官网才知道。

以下是直接引用 官网的原文

v-enter-from：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

v-enter-to：定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter-from 被移除)，在过渡/动画完成之后移除。

v-leave-from：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

v-leave-to：离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave-from 被删除)，在过渡/动画完成之后移除。

特别注意的是v-enter改成了v-enter-form，v-leave改成了v-leave-from。

其他小知识

Vue3移除了filter

获取组件实例方法getCurrentInstance()

这个方法可以获取到当前组件的实例，相当于Vue2中的this，但是要注意在 开发环境 和 生产环境 的使用方法是不同的。

毕竟是个人总结，难免会出现纰漏和错误，期待各路大神的补充和纠正。

文末福利

===============================================================

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了**《95页前端学习笔记》**电子稿文件。

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

完整版面试题资料免费分享，只需你点赞支持，动动手指点击此处就可免费领取了。

前端实习面试的套路

回顾项目

往往在面试时，面试官根据你简历中的项目由点及面地展开问答，所以请对你做过的最好的项目进行回顾和反思。回顾你做过的工作和项目中最复杂的部分，反思你是如何完成这个最复杂的部分的。

面试官会重点问你最复杂的部分的实现方法和如何优化。重点要思考如何优化，即使你项目中没有对那部分进行优化，你也应该预先思考有什么优化的方案。如果这部分答好了，会给面试官留下很不错的印象。

重点在于基础知识

这里指的基础知识包括：前端基础知识和学科基础知识。

前端基础知识：html/css/js 的核心知识，其中 js 的核心知识尤为重要。比如执行上下文、变量对象/活动对象（VO/AO）、作用域链、this 指向、原型链等。

学科基础知识：数据结构、计算机网络、算法等知识。你可能会想前端不需要算法，那你可能就错了，在大公司面试，面试官同样会看重学生这些学科基础知识。
你可能发现了我没有提到React/Vue这些框架的知识，这里得说一说，大公司不会过度的关注这方面框架的知识，他们往往更加考察学生的基础。
这里我的建议是，如果你至少使用或掌握其中一门框架，那是最好的，可以去刷刷相关框架的面试题，这样在面试过程中即使被问到了，也可以回答个 7788。如果你没有使用过框架，那也不需要太担心，把重点放在基础知识和学科基础知识之上，有其余精力的话可以去看看主流框架的核心思想。

特别注意的是v-enter改成了v-enter-form，v-leave改成了v-leave-from。

其他小知识