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 是一个非常合适的工具。

// 创建 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);

// 创建 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 是一个非常合适的工具。加粗样式

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);
  }
};

// 监听某个元素的尺寸变化并更新其背景颜色

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 事件都是用来响应尺寸变化的，但它们的使用场景、触发时机、目标和性能表现有一些显著的区别。

1. 目标对象不同
   resize 事件：resize 事件是监听 窗口（即浏览器视口）的大小变化。当浏览器窗口的大小发生变化时，resize 事件会被触发。它不关心页面上某个特定元素的大小变化，而是全局监听整个视口的尺寸变化。
   
   
   
   
   
   操作

   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？

1. 固定布局： 当需要确保元素的宽度和高度保持固定，不因 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）：

使用变量存储颜色、字体、间距等可复用值，方便维护和更新。

$primary-color: #3498db;.button {
    background-color: $primary-color;
}

嵌套规则（Nesting）：

通过嵌套编写样式，更贴近 HTML 结构，简化层级关系。

.nav {
    ul {
        li {
            a {
                color: blue;
            }
        }
    }
}

混入（Mixins）：

定义可复用的代码块，减少冗余。

@mixin border-radius($radius) {
    border-radius: $radius;
}.box {
    @include border-radius(10px);
}

继承（Extend）：

可以继承已有的样式，减少重复代码。

%button-styles {
    padding: 10px;
    border: none;
}.primary-button {
    @extend %button-styles;
    background-color: blue;
}

模块化：

支持将代码分解为多个文件，便于管理。

// 文件 _variables.scss$primary-color: #3498db;
// 文件 main.scss@import 'variables';.button {
    color: $primary-color;
}

数学运算：

支持基本的数学计算，用于动态调整样式。

$base-spacing: 10px;.container {
    margin: $base-spacing * 2;
}

条件与循环：

支持条件语句和循环，生成更复杂的样式。

@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
轴上的堆叠顺序，但如果使用不当，会导致它看似“失效”。以下是常见原因和解决方法：

1. 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 请求。

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data');
xhr.onload = () => {
  console.log(xhr.responseText);
};
xhr.send();

Axios
概念：基于 Promise 的 HTTP 库，简化了数据请求。
示例：

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。
支持代码分割和按需加载。

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 实例直接暴露给用户的接口，供开发者调用。例如，$el、$refs、$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 是对象的核心组成部分，它代表了对象的键值对。对象的属性可以直接定义，也可以通过原型链继