深入解析 BFC 模式、forceupdate 作用、HTTP 状态码等前端知识点

hwyzw · 发表于 2024-11-21 09:31:32

文章涉及的信息均来自网络及个人总结。旨在总结个人的学习和经验。如有侵权，请联系我删除。谢谢你！

1、BFC模式 1、BFC（Block），即块级格式化上下文，是页面上的一个渲染区域，有自己的一套渲染规则： 2、功能 3、HTTP状态码 4、可以v-if和v-for 一起使用吗？ 5、vue路由的底层原理是什么？传递参数的方法有哪些？跳跃方法有哪些？什么是路由生命周期？ 6. vue 中常用的生命周期钩子函数： 7. vue 和 vue 的区别 8. vue 中的数据为什么是一个函数 9. 什么是 keep-alive 10. vue 执行流程 11. Vue 常用指令 12. es6 如何使用实现类以及如何实现类继承 13. vue2如何获取dom元素 14. Vue的单向数据流 15. 节流与防抖16、组件通信 17. var.let.const 的区别 18. 说一下箭头函数和普通函数的区别 19. axios 拦截器的作用 20. 判断数据类型有多少种方法？ 21. 什么是 npm 22. 什么是回流和重绘？ 23.它和手表的区别。 24.Vue内置组件。 25、页面首次加载时父子组件生命周期的执行顺序。 26. 输入 Vue。 27.Vue过滤器的作用是什么 28.在组件上写name有什么好处？ 29.什么是模块化？ 30. th 理解 is 指向什么 31. 什么是 mvvm 模式 32. 理解 new 操作符 33. 什么是槽 34. Vue 双向数据绑定原理 35. 什么是 seo 爬虫 30 6. 传递的方法Vue路由中以及获取参数 37. js中同步和异步的区别 38. for...of 和 for... 中的区别三十九、 v-show和v-if，四十，js数据类型和存储的区别，四十一，深拷贝和浅拷贝，四十二，同源策略和非同源策略，如何解决非标准策略交叉- 域问题 43. = 之间的差异。 ==。 === 44.网站优化的三大标签

标题、（描述）、（关键字）

45。 Vue的路由模式。四十六岁。小程序中wxss和css的区别。四十七。如何用css画一个三角形。

 <pre><code class="prism language-js"><style>
.border {
width: 50px;
height: 50px;
border: 2px solid;
border-color: #96ceb4 #ffeead #d9534f #ffad60;
}
</style>
<div class="border"></div>
</code></pre>
48. 路由与路由与路由的区别 49. 什么是xss攻击？如何避免呢？ 50.什么是函数重载？

- 同一个函数接收不同的参数，执行不同的服务，这就是函数重载。

51. 什么是函数尾数调用？ 52.数组降维？ 53.数组去重？五十四，什么？ 54. 本地存储有什么区别？ 55.对象、原型、原型链、构造函数之间有什么关系？构造函数实际上是一个在调用普通函数时使用new的对象。对象就是通过构造函数new出来的对象。它有一个指向构造函数的对象。对象只有对象的原型，也称为隐式原型。函数只有对象，称为显式。原型对象有一个指向构造函数的原型链：当我们在对象上查找属性时，如果对象本身没有该属性，我们会沿着正确的路径查找。如果我们找不到它，就会报告错误。 55.js范围？

变量所在的空间

56. 与箭头功能的区别 57. 常见的布局有哪些？五十八、vue2生命周期

创作阶段

在运行阶段只要数据被修改就会触发。

破坏阶段

除了这八个之外，还有三个

如果组件使用keep-alive进行缓存，就会有这两个钩子函数。

组件激活

组件停用

当子组件发生错误时，会触发该钩子函数。

59. 如何防范XSS攻击？

XSS攻击也称为前端注入攻击，通常发生在提交表单或上传富文本内容时。

(1)在网页可以由用户输入的地方，需要对输入数据进行转义(html转换成字符编码)和过滤。

（2）后台输出页面时，输出内容也需要进行转义和过滤（因为攻击者可能会通过其他方式向数据库写入恶意脚本）

(3)前端验证html标签属性和css属性的赋值。

六十、vue中的sum（依赖注入）

 <pre><code class="prism language-js">provide / inject 为依赖注入，说是不推荐直接用于应用程序代码中，但是在一些插件或组件库里却是被常用，所以我觉得用也没啥，还挺好用的
provide：可以让我们指定想要提供给后代组件的数据或方法
inject：在任何后代组件中接收想要添加在这个组件上的数据或方法，不管组件嵌套多深都可以直接拿来用
要注意的是 provide 和 inject 传递的数据不是响应式的，也就是说用 inject 接收来数据后，provide 里的数据改变了，后代组件中的数据不会改变，除非传入的就是一个可监听的对象
</code></pre>
六十一、vue-、vue-原理、vue脚手架本地开发跨域请求设置

 <pre><code class="prism language-js">//在根目录创建vue.config.js
///在module.exports中配置devserver的内容 
//主要是通过 proxy
devServer: {
 host:'0.0.0.0',
 port: 8080,//端口号
 open: true,//运行项目自启
 proxy:{
 '/api':{
 target:'http://localhost:3000/',//跨域请求资源地址
 ws:false,//是否启用websockets
 changeOrigin:true,//开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
 pathRewrite:{
 '^/api':''//注册全局路径
 }
 }
 }
}
</code></pre>
62. token 的由来 63. token 中的值是什么 64. 使用 token 来记住密码：一定不是在本地存储密码 65. 哪些场景需要登录？

（1）进入客服时，首先要确定是否登录

(2) 输入订单时，您需要

(3) 购物车时，必填

所以登录成功后，应该跳回第一次被拦截的地方。

六十六，什么是六十七，

1.mkdir-演示

2.CD-演示版

3.npm init -y 初始化

4.npm i --save-dev -cli 下载

5. -v 查看版本号

6.新建src目录和index.js入口文件

7、零配置打包：在.json配置文件中配置“build”:“”，通过命令npm run build进行打包（打包后的文件变成一行，变成一个自执行函数）

8.默认只能打包js和json文件，其他类型的文件需要用and处理

9.默认只能打包js和json文件，其他类型的文件需要用and处理

 <pre><code class="prism language-js">// 安装：
npm install style-loader css-loader -D //解析处理css文件的
npm install --save-dev html-webpack-plugin //处理html模块的插件
npm install --save-dev file-loader //解析字体图片等其他文件
//想解析 css 需要用到 style-loader 和 css-loader， css-loader 是把 css 文件转成 css 代码，style-loader 是把 css 代码插入到页面。
//想有一个自己的模板就需要用到 plugins 插件，plugins 是用来扩展自身没有的功能
</code></pre>
10.新建一个..js；

 <pre><code class="prism language-js">commonjs语法导入导出不是用的es6模块
var test = require('模块名') //导入 
var HtmlPlugin = require('html-webpack-plugin');
var path = require('path');
module.exports = {
// loader用于处理模块的
module:{
// 匹配各种类型文件的规则
rules:[ // 规则
{
test: /\.css$/, // 正则
// loader执行顺序是从右向左，从下向上执行 
use:[ 'style-loader','css-loader','sass-loader' ]
}
]
},
plugins:[new HtmlPlugin({
tempalte:'./src.index.html'
})],
//开启本地服务，自动编译
//path是node自带的路径管理模块
devServer: {
 static: {
 directory: path.join(__dirname, 'dist'),//监听dist目录
 },
 compress: true, //压缩代码
 port: 8080, //开启后的端口号
 open:true //程序执行完自动在浏览器打开
},
//模式必须配置
 mode:"development"//开发环境模式 | 生产环境模式production 
}
</code></pre>
68.启动本地服务

npm -dev- --save-dev

启动命令：npx服务