2024年Web前端最全Vue3(4)，阿里P7大牛手把手教你

最后

资料过多，篇幅有限

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。

运行结果，看着是正常的，并无异常。但我们都知道，vue 项目中，之所以采用组件形式，就是为了重复多次使用，所以我们多次使用我们的组件试试。

神奇的效果发生了，当我们改变第一个组件的数值时，第二个组件的数据也被修改。修改第二个组件的时候，第一个组件的数据也同步更新。

**原因：**同一个组件被复用多次，会创建多个实例，如果data是一个对象的话，这些实例用的是同一个构造函数，指针指向的就会是同一个地方，就导致了两个组件的数据会同时更新。

为了保证组件内的数据各自独立，不会相互影响，要求每个组件的data必须是函数形式，目的就是把数据放入一个新对象内，这样就不会出现上述问题了。

说这的主要意义就是告诉我们，在 Vue3.x 中的 data 选项总是为函数形式，返回响应式数据。

Vue2.x VS Vue3.x 实例创建

二、函数式组件的变化

---

在Vue3.x中，functional:true 组件选项被移除。vue3.x 不推荐使用函数式组件。

有些小伙伴就会惊叹，妈呀，俺都不知道函数式组件是啥，你说得再简单我也不懂呐，所以就讲讲函数式组件干啥的，原来的 functional 属性放哪？

2.1、在Vue2.x中的函数式组件：

函数式组件也是组件的一种类型，主要用来定义那些没有响应数据，也不需要任何生命周期钩子函数，只 props 来接收传递来的数据。

类型1：基于模板的函数式组件

函数式组件内容

类型2：组件注册

Vue.componenet(‘fun-comp’:{

functional:true,

props:{

msg:{

type:String,

default:‘组件数据’

}

},

render:(h,context)=>{

return h(‘div’,[‘组件内容’,‘++’,context.props.msg])

}

})

类型3：中间件实现 render 方法

// FunComps.js 文件代码

export default {

functional:true,

props:{

render:{

type:Function

},

params:{}

},

render:(h,ctx)=>{

return ctx.props.render(h,ctx.props.params)

}

}

//组件调用

renderHandle 这个函数，在外层可以任意控制，这样不但节省开销，而且复用性也很高。

2.2、在Vue3.x中的函数式组件：

在 SFC 中不能使用 functional 特性声明是函数式组件，移除了 functional:true 特性。

// 新建一个 FunComp.vue 文件

//使用函数式组件

Vue3.x函数式组件内容

这下应该清楚到底移除的属性在哪了！接着看看异步组件有什么改变。。。

三、异步组件的变化

---

Vue3.x 异步组件要求使用 defineAsyncComponent 方法创建。

由于 Vue3 中函数式组件必须定义为纯函数，所以异步组件有如下变化：

1. 必须明确地使用 defineAsyncComponent 方法包裹

2. component 选项已经被重命名为 loader

3. loader 函数不再接收 resolve 和 reject 回调方法 。且必须返回一个 Promise 对象 。

3.1、不带配置的异步组件对比

在 Vue2.x中异步组件使用：

{

path:‘/’,

component: ()=> import(“@/view/home/index”)

TCP协议

• TCP 和 UDP 的区别？
• TCP 三次握手的过程？
• 为什么是三次而不是两次、四次？
• 三次握手过程中可以携带数据么？
• 说说 TCP 四次挥手的过程
• 为什么是四次挥手而不是三次？
• 半连接队列和 SYN Flood 攻击的关系
• 如何应对 SYN Flood 攻击？
• 介绍一下 TCP 报文头部的字段
• TCP 快速打开的原理(TFO)
• 说说TCP报文中时间戳的作用？
• TCP 的超时重传时间是如何计算的？
• TCP 的流量控制
• TCP 的拥塞控制
• 说说 Nagle 算法和延迟确认？
• 如何理解 TCP 的 keep-alive？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

浏览器篇

• 浏览器缓存?
• 说一说浏览器的本地存储？各自优劣如何？
• 说一说从输入URL到页面呈现发生了什么？
• 谈谈你对重绘和回流的理解
• XSS攻击
• CSRF攻击
• HTTPS为什么让数据传输更安全？
• 实现事件的防抖和节流？
• 实现图片懒加载？

[外链图片转存中…(img-ylx5BasM-1714832725075)]

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

浏览器篇

• 浏览器缓存?
• 说一说浏览器的本地存储？各自优劣如何？
• 说一说从输入URL到页面呈现发生了什么？
• 谈谈你对重绘和回流的理解
• XSS攻击
• CSRF攻击
• HTTPS为什么让数据传输更安全？
• 实现事件的防抖和节流？
• 实现图片懒加载？

[外链图片转存中…(img-yOL8spxW-1714832725076)]