1.vue生命周期
beforeCreate 创建 注入依赖 初始化非响应式数据 beforeCreate created 数据请求，初始化数据
设置全局时间监听 beforeMount挂载 模版编译完成后的调试 操作 dom初始化 操作dom初始化第三方插件 更新 在更新前查看
DOM 状态，不建议修改数据 操作更新后的 DOM，检查更新后的效果 销毁 清理定时器、事件监听、断开 WebSocket
检查销毁状态，调试用途
2.resizeObserver
resizeObserver ResizeObserver 是一个 JavaScript
API，允许你观察一个元素的尺寸变化。当被观察的元素的尺寸（宽度或高度）发生变化时，ResizeObserver 会触发相应的回调函数。这个
API 可以用于响应页面元素的尺寸变化，类似于监听 resize
事件，但它更加精确地关注元素本身的尺寸变化，而不是整个视口或窗口的大小变化。 主要特点：
精确的尺寸变化监听：它可以监控特定元素的大小变化，而不仅仅是浏览器窗口的大小。
回调触发时机：当被观察的元素的尺寸变化时，ResizeObserver 会异步地调用回调函数。这个回调会提供相关的尺寸信息。
避免重复监听：通过 ResizeObserver，你可以精确地检测某个元素的尺寸变化，而不需要频繁地使用像 window.resize
这样的全局事件监听器来监听所有元素。
参数： entries：ResizeObserver 的回调函数接收一个 entries 数组，其中包含所有被观察元素的尺寸变化数据。每个
entry 包含以下信息： target: 发生变化的元素。 contentRect: 该元素的新尺寸，通常包含
width、height、top、left 等属性。 你还可以访问一些其他信息，例如 borderBoxSize 和
contentBoxSize，具体取决于浏览器的实现。 何时使用 ResizeObserver？
动态布局：当页面中某个元素的大小会根据内容或用户交互动态变化时，可以使用 ResizeObserver
来做相应的处理（如重绘、重新布局等）。 响应式设计：监控某些元素的尺寸变化，可以根据元素大小调整页面布局，类似于响应式设计中的布局调整。
元素大小变化的动画或效果：当需要根据元素大小的变化来控制动画或其他动态效果时，ResizeObserver 是一个非常合适的工具。
typescript
// 创建 ResizeObserver 实例
const resizeObserver = new ResizeObserver(entries => {
// 处理尺寸变化的逻辑
entries.forEach(entry => {
console.log('Element:', entry.target); // 被观察的元素
console.log('Content Rect:', entry.contentRect); // 元素的新尺寸
});
});
// 观察一个元素
const element = document.querySelector('.my-element');
resizeObserver.observe(element);
// 停止观察
// resizeObserver.unobserve(element);
typescript
// 创建 ResizeObserver 实例
const resizeObserver = new ResizeObserver(entries => {
// 处理尺寸变化的逻辑
entries.forEach(entry => {
console.log('Element:', entry.target); // 被观察的元素
console.log('Content Rect:', entry.contentRect); // 元素的新尺寸
});
});
// 观察一个元素
const element = document.querySelector('.my-element');
resizeObserver.observe(element);
// 停止观察
// resizeObserver.unobserve(element);参数：
entries：ResizeObserver 的回调函数接收一个 entries 数组，其中包含所有被观察元素的尺寸变化数据。每个 entry 包含以下信息：
target: 发生变化的元素。
contentRect: 该元素的新尺寸，通常包含 width、height、top、left 等属性。
你还可以访问一些其他信息，例如 borderBoxSize 和 contentBoxSize，具体取决于浏览器的实现。
何时使用 ResizeObserver？
动态布局：当页面中某个元素的大小会根据内容或用户交互动态变化时，可以使用 ResizeObserver 来做相应的处理（如重绘、重新布局等）。
响应式设计：监控某些元素的尺寸变化，可以根据元素大小调整页面布局，类似于响应式设计中的布局调整。
元素大小变化的动画或效果：当需要根据元素大小的变化来控制动画或其他动态效果时，ResizeObserver 是一个非常合适的工具。加粗样式
typescript
const debounce = (callback: (...args: any[]) => void, delay: number) => {
let tid: any;
return function (...args: any[]) {
const ctx = self;
tid && clearTimeout(tid);
tid = setTimeout(() => {
callback.apply(ctx, args);
}, delay);
};
};
const _ = (window as any).ResizeObserver;
(window as any).ResizeObserver = class ResizeObserver extends _ {
constructor(callback: (...args: any[]) => void) {
callback = debounce(callback, 20);
super(callback);
}
};// 监听某个元素的尺寸变化并更新其背景颜色
typescript
const resizeObserver = new ResizeObserver(entries => {
entries.forEach(entry => {
const width = entry.contentRect.width;
if (width < 500) {
entry.target.style.backgroundColor = 'lightblue';
} else {
entry.target.style.backgroundColor = 'lightgreen';
}
});
});
const element = document.querySelector('.resize-element');
resizeObserver.observe(element);
ResizeObserver 和 resize 事件都是用来响应尺寸变化的，但它们的使用场景、触发时机、目标和性能表现有一些显著的区别。
- 目标对象不同
resize 事件：resize 事件是监听 窗口（即浏览器视口）的大小变化。当浏览器窗口的大小发生变化时，resize 事件会被触发。它不关心页面上某个特定元素的大小变化，而是全局监听整个视口的尺寸变化。
操作
typescript
const arr = [1, 2, 3, 4]
// const newFilterArray = [...new Set(arr)];
// console.log("运用Set集合过滤元素",newFilterArray)
// const newFilterArray = arr.filter((value,index,arr)=>{
// return arr.indexOf(value) === index;
// })
//reduce + includes： 使用 reduce 和 includes 进行去重
/*
array.reduce((accumulator, currentValue, currentIndex, array) => {
// 回调函数体
}, initialValue);
accumulator：累加器，保存上一次调用回调函数时返回的值，第一次调用时是 initialValue（如果提供了）。
currentValue：当前数组元素的值。
currentIndex（可选）：当前元素的索引。
array（可选）：原始数组。
initialValue（可选）：累加器的初始值。如果未提供，reduce() 会以数组的第一个元素作为初始值。
const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, 0); // 初始值为 0
const sum = srr.reduce((nextSum,currentSum)=>{
return nextSum + currentSum;
},0)
console.log(sum); // 输出 15
示例：求最大值
const arr = [1, 9, 4, 6, 2];
const max = arr.reduce((accumulator, currentValue) => {
return accumulator > currentValue ? accumulator : currentValue;
}, arr[0]); // 初始值为数组的第一个元素
解释：
accumulator 存储当前找到的最大值。
每次遍历数组时，比较当前元素 currentValue 和 accumulator，并返回较大的值
console.log(max); // 输出 9
const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = arr.reduce((accumulator, currentValue) => {
if (!accumulator.includes(currentValue)) {
accumulator.push(currentValue);
}
return accumulator;
}, []);
console.log(uniqueArr); // 输出 [1, 2, 3, 4, 5]
考察点：
如何高效地去重，考虑时间复杂度。
对于较大的数据集，你如何选择适当的数据结构（比如 Set、Map）来提高效率。
处理对象去重时如何确保每个对象唯一。
*/
// console.log("运用Set集合过滤元素",newFilterArray)
const arrw = [
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' },
{ id: 1, name: 'John' },
]
// const newFilterArray = Array.from(new Map(arrw.map(item=>[item.id,item])).values())
// const uniqueArr = Array.from(new Map(arrw.map(item => [item.id, item])).values());
// console.log(uniqueArr); // [{ id: 1, name: 'John' }, { id: 2, name: 'Jane' }]
/*
数组反转 arr.reverse()
字符串反转
字符串本身是不可变的通常将字符串转为数组反转 拼接成字符串
const str = 'hello'
const reversedStr = ste.split('').reverse().join('')
console.log(reverseStr)
深拷贝（深复制）
深拷贝和钱拷贝是数据处理中常见的考点 面试中经常会问如何进行正确的使用深拷贝操作 尤其是处理对象和数组
确保不出现引用问题
常见方法
JSON方法 使用JSON.parse()和JSON.stringify()进行深拷贝
const obj = {a:1,b:{c:2}}
const cloneObj = JSON.parse(JSON.stringify(obj))
递归方法： 通过递归遍历对象的每一层并手动进行深拷贝：
const arr = [3, 1, 4, 1, 5, 9];
arr.sort((a, b) => a - b); // 数字升序
console.log(arr); // [1, 1, 3, 4, 5, 9]
const arr = [3, 1, 2, 2, 4, 3];
const result = [...new Set(arr)].sort((a, b) => a - b);
console.log(result); // [1, 2, 3, 4]3.vue2和vue3生命周期钩子的区别
4.W3C 标准
W3C 标准 概念：由万维网联盟（W3C）制定的 Web 开发标准，确保 HTML、CSS 和其他 Web 技术的兼容性和一致性。 重要性：遵循 W3C 标准可提升网页的可维护性、语义化和搜索引擎优化。 核心点： 使用语义化标签（如
<article>、<section>、<footer>）。 保证 HTML 的结构清晰，避免语法错误。 确保 CSS样式符合标准（如避免过时的属性）。
为什么要遵循
（1）、因为不管什么浏览器都是遵循HTML的标准来开发的，如果你的网页的HTML不遵循规范，就无法在浏览器中得到正确的呈现
（2）、遵循html标准能够能过让过大浏览器更好的解析；提高可阅读性；
用一个程序语言来说，我们是转换器，我们想方设法让我们的页面、我们的程序能够支持所有浏览器，能够满足尽可能多的用户。我们要满足所有的用户，即使做不到，我们也要满足我们技术范围之内的所有用户。
5.HTML5 和 CSS3比较
HTML5 新特性： 语义化标签：
<header>、<footer>、<nav>等。 多媒体：<audio>、<video>标签支持本地音视频播放。 表单增强： 的新类型（如 date、email）。 本地存储：localStorage 和
sessionStorage 提供持久数据存储能力。
CSS3
新特性： 选择器：nth-child、not 等高级选择器。 动画：@keyframes 实现复杂动画效果。
过渡与变换：transition、transform 创建交互效果。 响应式设计：@media 媒体查询支持多设备适配。
新布局：flexbox 和 grid 布局提升页面布局效率。
6.盒模型
标准盒模型与怪异盒模型的区别。 标准盒模型：width 和 height 只包括内容区域，不包括 padding 和 border。
怪异盒模型：width 和 height 包括 content + padding + border。
7.什么情况下会使用 border-box？
- 固定布局： 当需要确保元素的宽度和高度保持固定，不因 padding 和 border 改变。 适用于复杂的网格或卡片布局。
/* 标准盒模型 */
box-sizing: content-box;
/* 怪异盒模型 */
box-sizing: border-box;
· content-box： 用于需要精确控制内容区域的场景，但要手动计算额外的尺寸。
· border-box： 更适合现代布局需求，简化宽高的计算，同时确保元素大小固定，推荐作为默认
8.Flexbox 布局：
主轴与交叉轴概念。 常用属性：justify-content、align-items、flex-grow。 示例问题：如何实现水平垂直居中
Grid 布局：
定义网格：grid-template-rows、grid-template-columns。 常见用法：实现复杂的二维布局
9.CSS 预处理器的优势
CSS 预处理器（如 Sass、Less、Stylus）扩展了 CSS 的功能，主要有以下优势：
变量（Variables）：
使用变量存储颜色、字体、间距等可复用值，方便维护和更新。
typescript
$primary-color: #3498db;.button {
background-color: $primary-color;
}嵌套规则（Nesting）：
通过嵌套编写样式，更贴近 HTML 结构，简化层级关系。
typescript
.nav {
ul {
li {
a {
color: blue;
}
}
}
}混入（Mixins）：
定义可复用的代码块，减少冗余。
typescript
@mixin border-radius($radius) {
border-radius: $radius;
}.box {
@include border-radius(10px);
}继承（Extend）：
可以继承已有的样式，减少重复代码。
typescript
%button-styles {
padding: 10px;
border: none;
}.primary-button {
@extend %button-styles;
background-color: blue;
}模块化：
支持将代码分解为多个文件，便于管理。
typescript
// 文件 _variables.scss$primary-color: #3498db;
// 文件 main.scss@import 'variables';.button {
color: $primary-color;
}数学运算：
支持基本的数学计算，用于动态调整样式。
typescript
$base-spacing: 10px;.container {
margin: $base-spacing * 2;
}条件与循环：
支持条件语句和循环，生成更复杂的样式。
typescript
@for $i from 1 through 3 {
.col-#{$i} {
width: 100% / $i;
}
}10.如何避免过度使用全局样式？
使用命名空间或前缀：
为类名添加特定的命名空间或前缀，避免与全局样式冲突。
定位布局：
相对定位：position: relative;
绝对定位：position: absolute;
固定定位：position: fixed;
粘性定位：position: sticky;
11.CSS 优化
减少重复样式，使用 Sass、Less 变量或混合。 样式的层叠与优先级： 行内样式 > ID 选择器 > 类选择器 > 元素选择器。 使用 !important 的规则会强制优先级最高，但应谨慎使用。
12.层叠上下文（Z-index）
如何解决 z-index 失效的问题 解决 z-index 失效的问题 z-index 的作用是控制元素在 z
轴上的堆叠顺序，但如果使用不当，会导致它看似"失效"。以下是常见原因和解决方法：
- z-index 必须作用在定位上下文中 问题： 如果元素没有设置 position 或者 position 的值为 static（默认值），z-index 将不会生效。 解决方法： 确保目标元素具有定位上下文，使用 position:
relative;、absolute;、fixed; 或 sticky;。
13.浏览器兼容性
常见问题： IE 不支持 flex 部分功能。 不同浏览器的私有前缀（如 -webkit-）。 解决方法： 使用 Autoprefixer
自动添加兼容前缀。 借助 CSS Polyfill 处理新特性的兼容性。 触发层叠上下文的条件： 设置 position 为
relative、absolute 或 fixed 且定义 z-index。 使用 transform、filter、opacity
等属性。
14.TypeScript (TS) 和 ES6
TypeScript 核心点： 类型系统：string、number、interface、enum。
面向对象编程：class、inheritance、decorators。 工具类型：Partial、Readonly、Pick 等内置工具。
优势： 提高代码可读性和可维护性。 在大型项目中减少运行时错误。 ES6 新特性： 块级作用域：let、const。
箭头函数：简化函数表达式。 模块化：import 和 export。 异步编程：Promise 和 async/await。
解构赋值与展开运算符：简化数组和对象的操作。 模板字符串：通过 `` 提供字符串插值。
15.Sass 预处理器
功能：
嵌套规则：清晰地表达层次关系。 变量：定义可复用的颜色、间距等。 混合（Mixin）：封装可复用的样式代码。 函数：动态生成复杂样式。
优势： 提高开发效率，减少代码冗余。 保持样式的模块化和结构化。
16.数据请求（Ajax 和 Axios）
Ajax
概念：使用原生 JavaScript 发起 HTTP 请求。
typescript
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data');
xhr.onload = () => {
console.log(xhr.responseText);
};
xhr.send();Axios
概念：基于 Promise 的 HTTP 库，简化了数据请求。
示例：
typescript
axios.get('/api/data').then(response => {
console.log(response.data);
});17. UI 框架（Element-UI、Ant Design、UView）
Element-UI：
提供 Vue 的组件库，适合管理后台开发。 组件示例：表单、表格、分页等。
Ant Design：
提供 React 的组件库，也有 Vue 版本。
强调设计语言和可扩展性。
UView：
专为 UniApp 开发的 UI 框架。 提供适配多端的组件，如 u-button、u-calendar。
Vue 和 UniApp
Vue
核心特性： 双向绑定：v-model。 组件化开发：将页面分解为独立组件。 响应式数据：通过 reactive 和 computed
管理状态。 Vue Router：管理页面路由。 Vuex：全局状态管理。
UniApp
特点：
跨平台：一次开发，生成多端（小程序、H5、App）。 内置 API：如 uni.request、uni.navigateTo。
Webpack 功能： 模块打包：整合 JavaScript、CSS、图片等资源。 提供插件系统：如 HtmlWebpackPlugin。
支持代码分割和按需加载。
typescript
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
},
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
],
},
};18. Vue生命周期
问：Vue 的生命周期有哪些阶段？每个阶段的用途是什么？ o常见生命周期钩子：
1.beforeCreate：实例初始化之前，无法访问 data 和 methods。
2.created：实例创建完成，可以访问 data 和 methods，未挂载 DOM。
3.beforeMount：模板已编译，但尚未挂载到 DOM。
4.mounted：组件挂载完成，可进行 DOM 操作。
5.beforeUpdate：响应式数据更新前触发。
6.updated：响应式数据更新后触发。
7.beforeDestroy：组件销毁前触发，适合清理定时器、事件监听等。
8.destroyed：组件销毁后触发。
19. 双向绑定
Vue 通过 Object.defineProperty 实现数据劫持，结合 发布-订阅模式 来响应视图和数据的变化。
Vue 3 使用 Proxy 代替 Object.defineProperty 提升性能和深度监听能力。
20. const var的区别？
(const定义的变量不可以修改，而且必须初始化。.var定义的变量可以修改，如果不初始化会输出undefined，不会报错。let是块级作用域，函数内部使用let定义后，对函数外部无影响。)
１１. 箭头函数的使用？追问this的指向问题，有哪几种？（作为普通函数调用 -- 返回window；使用call apply bind被调用 -- 传入什么绑定什么；作为对象方法被调用 -- 返回对象本身；在class方法中被调用 -- 返回当前实例本身；箭头函数 -- 永远会找上级作用域this的值来确定）
１２. 追问call apply bind的区别？（call 和 apply 都是为了解决改变 this 的指向。call 可以接收一个参数列表，apply 只接受一个参数数组；bind 方法会返回一个函数。bind固定某个函数的参数和this，返回原函数的拷贝）
１３.追问闭包是什莫？（函数 A 内部有一个函数 B，函数 B 可以访问到函数 A 中的变量，那么函数 B 就是闭包。闭包存在的意义就是让我们可以间接访问函数内部的变量。）再追问JS作用域有哪些？（三级作用域：全局作用域（全局都可以使用，如document对象）函数作用域（一个函数中定义的只能在当前函数使用）块级作用域（ES新增）（块：包含if while等包含大括号，在大括号外使用会报错）
１４.v-if和v-show有什莫区别，分别适用于什么情况？（渲染结果不同，对于v-if只会渲染一个dom元素；对于v-show，data是a就会显示a的dom元素，对于其他的选择会渲染display:none，只是不显示而已。对于一次选择或者数据更新不频繁时，选择v-if;如果需要频繁切换，需要v-show，用display：none控制隐藏和显示效果比较好，否则用v-if会导致dom结点频繁的销毁加载。）
１５.兄弟组件通讯的方法有哪些？（我只说了使用事件中心，这个知识点还要总结）
21. Keep-alive 是什么
Keep-alive是vue中的为你之组件 ，能在组件切换中将庄涛保留在内存中 防止重复渲染dom
Keep-alive包裹性动态组件时 会缓存不活动的实例对象 而不是销毁他们
Keep-alive可以设置以下属性 props属性
Include-字符串或正则表达式 只有名称匹配的组件
Exclude 任何符合条件的都不会缓存
Max 最多可以缓存多少组件实例
关于keep-alive的基本用法
/keep-alive>
22. Vue 组件不需要任何 polyfill polyfill是啥意思啊
在 JavaScript 和前端开发中，polyfill 是指一种代码或库，用来为那些不支持某些现代功能的浏览器提供兼容性支持。
当新的 JavaScript 特性或浏览器 API 被引入时，较旧的浏览器可能不支持这些特性。Polyfill 会检测到浏览器是否支持这些功能，如果不支持，就会加载一些额外的代码来模拟这些功能的行为，从而确保代码能够在所有浏览器中正常运行。
例如，Promise 是在 ES6 中引入的一个特性，而较旧的浏览器不支持它。这时我们可以引入一个 polyfill 来让旧版浏览器理解 Promise 的语法和功能。
在你的问题中，"Vue 组件不需要任何 polyfill" 意思是：这些组件不需要使用 polyfill 来兼容不同浏览器，因为它们已经可以在当前环境下正常工作，或者你只打算支持那些已经原生支持相关特性的现代浏览器。
在 Vue 中，property 指的是对象中的属性，而不是特指原型链上的属性。你提到的 "实例 property" 是 Vue 实例自身的属性，它们有 $ 前缀来避免与用户定义的属性冲突。
在 Vue 中，实例的 property 和 methods 是 Vue 实例直接暴露给用户的接口，供开发者调用。例如， e l 、 el、 el、refs、 w a t c h 、 watch、 watch、nextTick 等，这些属性和方法并非来自用户定义的 data，而是 Vue 框架提供的功能。
.mapCarPop
原型链和 Vue 实例的关系
虽然 Vue 实例上的这些 $ 开头的 property 和方法是 Vue 提供的功能，但它们实际上也是通过 Vue 的原型链机制实现的。在 JavaScript 中，所有对象都有一个原型对象（prototype），Vue 也不例外。当你访问一个 Vue 实例的属性或方法时，JavaScript 会首先检查实例本身是否有这个属性或方法，如果没有，便会沿着原型链向上查找，直到找到为止。
总结：
property 是指对象（在这里是 Vue 实例）上的属性，而不仅限于原型链上的属性。
Vue 中的 $ 前缀属性和方法是 Vue 框架提供的，便于与用户定义的数据区分。
Vue 实例上的某些方法和属性可能通过原型链提供，但这些方法是 Vue 内部提供的功能。
是的，property（属性）在 JavaScript 中是一个非常常见的概念。它是指对象的键-值对，每个对象都由一组属性构成。
JavaScript 中的 Property
在 JavaScript 中，几乎所有的东西都是对象，而对象是由属性（property）组成的。每个属性都有一个名字（键）和一个对应的值。
属性的类型：
数据属性：表示对象上的某个值。
const obj = {
name: 'John', // 这里的 'name' 是属性名，'John' 是属性值
age: 30
};
console.log(obj.name); // 输出 'John'
访问器属性：不直接包含值，但通过 getter 和 setter 进行访问和修改。
Property 和 Prototype（原型链）
JavaScript 中对象的属性可以存在于自身，也可以从原型链（prototype chain）继承。原型链是 JavaScript 实现继承的一种机制。
自有属性：对象自身定义的属性。
继承属性：通过原型链从另一个对象继承来的属性。
javascript
复制代码
const obj = { a: 1 };console.log(obj.hasOwnProperty('a')); // true
console.log(obj.toString()); // 'toString' 是从原型链继承的属性
在这个例子中，obj 具有自有属性 a，而 toString() 是从 Object.prototype 继承来的。
总结
在 JavaScript 中，property 是对象的核心组成部分，它代表了对象的键值对。对象的属性可以直接定义，也可以通过原型链继