2024年前端最新vue技术栈--》从vue2(1)，作为字节跳动面试官

计算机网络

• HTTP 缓存

• 你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？

• HTTP 常用的请求方式，区别和用途？

• HTTPS 是什么？具体流程

• 三次握手和四次挥手

• 你对 TCP 滑动窗口有了解嘛？

• WebSocket与Ajax的区别

• 了解 WebSocket 嘛？

• HTTP 如何实现长连接？在什么时候会超时？

• TCP 如何保证有效传输及拥塞控制原理。

• TCP 协议怎么保证可靠的，UDP 为什么不可靠？

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

算法

• 链表

• 字符串

• 数组问题

• 二叉树

• 排序算法

• 二分查找

• 动态规划

• BFS

• 栈

• DFS

• 回溯算法

  

Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示

const v = new Vue({

data:{

    name:''

}

})

v.mount(‘#root’)

2.2 data的两种写法

-------------



### 2.2.1 对象式

new Vue({

el:'#id',

data:{

    name:''

} 

})

### 2.2.2 函数式

new Vue({

el:'#id',

data:function(){

    return{

        name:''

    }

}

})

**如何选择**：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。子组件中的data必须写成函数式，因为data如果是对象的话，会影响其它组件的数据。



一个重要的原则：由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。



3.Vue的数据绑定方式

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



3.1 单向数据绑定(v-bind)

------------------



数据只能从data流向页面。譬如以以下代码为例：

单向数据绑定：<input type="text" v-bind:value="name">

打印在网页上为：



![](https://img-blog.csdnimg.cn/5d20c90f0cbe4127b72775fac69a637d.png)在网页hello输入内容刷新依然为hello



在vue插件上保存修改数据，页面上的数据才会改变，所以才叫做单向数据绑定。



![](https://img-blog.csdnimg.cn/d8d4af8e7df243089e881c129ee0a4bb.png)



 3.2 双向数据绑定(v-model)

--------------------



数据不仅能从data流向页面，还可以从页面流向data。

双向数据绑定：<input type="text" v-model:value="name">

ps：1. 双向绑定一般都应用在表单类元素上(如：input、select等)   2.v-model:value 可以简写为v-model，因为v-model默认收集的就是value值。

双向数据绑定：

4\. vue实例实现快捷化

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



这里以vscode举例，vscode不仅操作界面简洁，而且内含丰富的前端插件，支持多种语言编写，被誉称“宇宙最强编译器”



1.打开左下角设置选择用户代码片段



![](https://img-blog.csdnimg.cn/df4021a84e4645938aea8deecf5375a1.png)



 2.点击之后正上角出现一排选项，选择如下



![](https://img-blog.csdnimg.cn/424d96ddfddd4c93b417febc3cee2e1b.png)



 3.进入之后根据注释提示编写相关代码，这里我直接给出两种对象式编译Vue实例的方法，你们可以根据自己的需求进行取舍，快捷按键v1或v2生成固定代码，这样编写的速度和效率是不是提高了呢？

{

// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 

// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 

// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 

// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 

// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 

// Placeholders with the same ids are connected.

// Example:

// "Print to console": {

// 	"scope": "javascript,typescript",

// 	"prefix": "log",

// 	"body": [

// 		"console.log('$1');",

// 		"$2"

// 	],

// 	"description": "Log output to console"

// }

"v1": {

	"prefix": "v1",

	"body": [

		"Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示",

		"new Vue({",

		"   el:'#root',",

		"   data:{",

		"		name:''",

	    "	}",

		"})",

	]

	"description": "v1"

}

"v2": {

	"prefix": "v2",

	"body": [

		"Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示",

		"const v = new Vue({",

		"   data:{",

		"		name:''",

	    "	}",

		"})",

TCP协议

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

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

浏览器篇

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

• 说说 Nagle 算法和延迟确认？
• 如何理解 TCP 的 keep-alive？

[外链图片转存中…(img-YtjNvetI-1715595575037)]

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

浏览器篇

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

[外链图片转存中…(img-7SWtI6Un-1715595575038)]