1、vue的双向绑定原理是什么？里面的关键点在哪里？
Vue的双向绑定原理是基于Object.defineProperty大概Proxy来实现的，其关键点在于数据挟制，即对数据的读取和修改举行拦截，在数据发生变化时自动更新视图
2、实现程度垂直居中的方式？
实现程度垂直居中的方式有多种，好比使用Flex布局、绝对定位、margin负值等。
3、常用伪元素有哪一些？
常用的伪元素有before和after。
4、移动端怎样适配不同屏幕尺寸？
移动端可以通过设置meta标签中的viewport属性来适配不同屏幕尺寸，例如设置width=device-width、initial-scale=1等。
5、当地存储有哪一些？他们三者有什么区别？
常见的当地存储方式有cookie、localStorage和sessionStorage，它们的区别在于作用域、存储容量和过期时间等方面。
6、JS的数据类型？怎样判定js的数据类型?
JavaScript的数据类型包括Number、String、Boolean、Object、Null和Undefined等，可以使用typeof、instanceof和Object.prototype.toString.call()等方法来判定数据类型
7、说一下ES6的新特性有哪些？
ES6的新特性包括let和const关键字、箭头函数、模板字符串、解构赋值、类和继承、模块化等。
8、Let、const、var三者有什么区别？
let和const是块级作用域的关键字，var是函数作用域的关键字，let和const声明的变量不能重复声明，const声明的变量不可修改。
9、数组去重有哪些办法？
数组去重的方法包括利用构造函数Set的去重功能、使用循环遍历和对象属性去重等。
10、说一下深拷贝和浅拷贝，怎样本身实现一个深拷贝？
深拷贝和浅拷贝是指在复制对象时，是否对其内部的子对象举行递归复制。实现深拷贝可以使用JSON.parse(JSON.stringify(obj))、递归复制等方法。
11、Vue的生命周期有哪一些？说一下它们每个阶段做什么操作？
Vue的生命周期包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等阶段，每个阶段对应着不同的操作，例如数据初始化、DOM挂载和销毁等。
12、组件通讯方式有哪一些？
组件通讯方式有props、 e m i t 、 emit、 emit、parent/ c h i l d r e n 、 p r o v i d e / i n j e c t 和 children、provide/inject和 children、provide/inject和refs等。
13、Vuex有几个属性及作用？
Vuex的属性包括state、getters、mutations、actions和modules等，它们用于管理Vue应用中的状态。
14、Vue的监听属性和计算属性有什么区别？
Vue的监听属性和计算属性都用于监测数据变化，但监听属性是一个函数，需要手动调用，而计算属性是一个属性，会自动计算并缓存结果
15、说一下防抖和节流。怎么实现？
- 防抖和节流是用于控制函数执行频率的方法，防抖是在一定时间内只执行最后一次操作，节流是在一定时间内只执行一次操作。可以通过setTimeout和时间戳等方式实现。
- 防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间 应用场景： 提交按钮、用户注册时候的手机号验证、邮箱验证、 节流：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。 应用场景： window对象的resize、scroll事件 拖拽时候的mousemove 射击游戏中的mousedown、keydown事件 文字输入、自动完成的keyup事件
Vue的导航守卫包括全局前置守卫、全局后置钩子、路由独享守卫和组件内的守卫等
17、你的登录拦截怎么实现的？
登录拦截可以通过路由守卫、请求拦截和相应拦截等方式实现
18、有用过图表吗？用的多吗？
常见的图表库包括ECharts、Highcharts、D3等
19、闭包是什么？怎样实现？
闭包是指函数内部可以访问外部函数的变量，可以用于封装私有变量和实现柯里化等操作。
20、Vue2.0和vue3.0有什么区别？
Vue2.0和Vue3.0的区别在于性能优化、组合式API、相应式系统和假造DOM等方面。
21、Vue常用的指令有哪些？
Vue常用的指令包括v-model、v-for、v-if、v-show、v-bind、v-on等。
22、v-If和v-show有什么区别？
v-if和v-show的区别在于前者在条件为false时会销毁对应的DOM元素，而后者只是在样式上隐蔽元素。
23、v-for为什么要加一个key？
v-for需要加key属性是为了资助Vue识别节点的唯一性，进步渲染效率。
24、你是怎样封装一个组件的？
封装一个组件需要考虑组件的输入和输出，可以使用props和$emit等方式实现。
25、有本身从0到1搭建过项目吗？
从0到1搭建一个完备的项目需要考虑项目架构、技术选型、开发流程、测试和部署等方面
26、有用过uni-app吗？
uni-app是一款基于Vue的跨平台开发框架，可以用于快速开发小步伐、H5、APP等应用。
27、你会写背景吗？有搞过服务端渲染吗？
背景开发需要掌握服务器端语言和数据库等技术，服务端渲染可以进步页面的首屏加载速度和SEO效果。
28、说一下你项目中遇到的难点，怎样解决？
在项目中遇到的难点大概包括架构筹划、性能优化和业务逻辑等方面，需要通过调试和优化等方式解决
29、Url到浏览器的一个过程有哪些步骤？
URL到浏览器的过程包括DNS解析、创建TCP毗连、发送HTTP请求、服务器处理请求、浏览器解析渲染页面等步骤
30、怎样实现小步伐的request封装及拦截？
可以通过封装request函数和使用拦截器等方式实现小步伐的请求封装和拦截。
31、在vue的项目应用中，不使用框架，怎么封装？
在Vue项目中不使用框架可以使用原生的HTML、CSS和JavaScript来实现，需要手动处理数据和事件等方面。
32、什么是Js原型？原型链是什么？
JavaScript的原型是指每个对象都有一个原型对象，原型对象又有本身的原型，形成了一条原型链。
33、组件通讯方式有哪些？
组件通讯方式包括props、 e m i t 、 emit、 emit、parent/ c h i l d r e n 、 p r o v i d e / i n j e c t 和 children、provide/inject和 children、provide/inject和refs等。
34、用闭包的原理做过哪些？
闭包可以用于实现柯里化、封装私有变量和缓存等操作。
35、作用域是什么？
作用域是指变量的可访问范围，JavaScript中有全局作用域和函数作用域等
36、操作数组的方式有哪些？
操作数组的方式包括遍历数组、添加和删除元素、数组去重和排序等。
37、0.1 + 0.2 等于 0.3吗？为什么？怎样解决？
0.1 + 0.2不等于0.3，这是由于JavaScript接纳的是IEEE 754浮点数尺度，存在精度问题。可以使用toFixed方法处理。
38、keep-alive是什么？有哪几个生命周期阶段？
keep-alive是Vue中的一个组件，用于缓存组件实例，进步组件的渲染效率，其生命周期包括activated和deactivated等阶段
39、判定一个变量是否是数组，有哪些办法？
判定一个变量是否是数组可以使用Array.isArray和instanceof等方法。
40、判定一个变量是否是对象，有哪些办法？
判定一个变量是否是对象可以使用typeof和Object.prototype.toString.call()等方法。
41、对象/数组常用方法有哪些？
对象/数组常用方法包括push、pop、shift、unshift、slice、splice、concat、map、filter、reduce等。
42、创建一个空数组/空对象有哪些方式？
创建一个空数组可以使用[]或new Array()，创建一个空对象可以使用{}或new Object()。
43、哪些遍历方式会改变原数组？
使用forEach、map、filter、reduce等遍历方式不会改变原数组，而使用push、pop、shift、unshift、splice等方法会改变原数组
44、Set和Map各是什么？
Set是一种数据结构，用于存储唯一值，Map是一种键值对数据结构，用于存储恣意类型的键和值
45、介绍一下promise。
Promise是一种异步操作管理的解决方案，用于解决回调地狱问题，其特点是链式调用和状态机制
46、Promise通常会解决三种问题
(1)链式回调
(2)同时发起几个异步请求，谁先有结果就拿谁的
(3)发起多个请求，等到所有请求后再做下一步处理
这三种方式promise是怎么处理的？
Promise可以通过then方法实现链式回调，通过Promise.all方法实现同时发起多个异步请求，通过Promise.race方法实现等候多个异步请求的结果
47、怎样改变一个函数a的上下文？
可以使用bind、apply和call等方法改变一个函数的上下文
48、Call和replay有什么区别？
call和apply都是用于改变函数上下文的方法，区别在于传入参数的方式不同
49、Evenbus是什么东西？
EventBus是一种事件发布/订阅的机制，可以实现组件之间的通讯
50、Vue中普通的生命周期大概有哪些？
Vue中普通的生命周期包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等阶段。
51、父子组件生命周期执行顺序是怎么样的？
父子组件生命周期执行顺序是父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted。
52、mixins有几个生命周期阶段？
mixins有beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等生命周期阶段。
53、弹性布局，一行两列，一列固定宽，怎样实现？
实现一行两列，一列固定宽的程度垂直居中布局可以使用Flex布局，父元素设置display: flex、align-items: center和justify-content: center，左侧元素设置flex: 1，右侧元素设置固定宽度
54、Flex：1 包罗哪三种属性
Flex：1包罗flex-grow、flex-shrink和flex-basis三个属性，分别表现元素在剩余空间中的占比、元素在空间不足时的缩放比例和元素的基准巨细。
55 vue3和vue2对相应式的区别?
Vue2 相应式系统的核心是通过 Object.defineProperty 来实现数据挟制。然而，在 Vue 3 中，尤雨溪团队选择使用 Proxy 来重写相应式系统。这个紧张的技术决策背后有着深刻的原因。
Object.defineProperty 的范围性
1. 对数组的有限支持
在 Vue 2 中，Object.defineProperty 无法直接监听数组的变化。Vue 2 不得不重写数组的以下方法来实现相应式：push()pop()shift()unshift()splice()sort()reverse()
这意味着某些数组操作无法被自动检测到：
通过索引直接修改数组元素：arr[index] = newValue
修改数组长度：arr.length = newLength
2. 动态属性限制
使用 Object.defineProperty 时，必须预先知道对象的所有属性才气将其转换为相应式。这导致了以下问题：
无法检测对象属性的添加和删除
需要使用特别的 Vue.set() 和 Vue.delete() 方法
降低了开发体验和代码直观性
3. 性能开销
Vue 2 中的相应式系统需要：
深度遍历对象的所有属性,为每个属性创建 getter 和 setter,对嵌套对象举行递归处理.
这导致了初始化时的性能开销，特别是在处理大型对象时更为显着。
Proxy 的优势
1.完备的数组支持
Proxy 可以完全监听数组的所有操作，包括：
索引访问和修改
- List item
- 长度修改
- 所有数组方法
不需要特别处理即可实现完备的相应式
- 动态属性追踪
Proxy 提供了更强大的本领：
可以监听对象属性的添加和删除
无需预先定义所有属性
不再需要 Vue.set() 和 Vue.delete()
提供了更天然的对象操作体验
- 更好的性能
Proxy 的优势在于：
懒处理：只有在访问属性时才举行署理
无需递归遍历对象的所有属性
减少了初始化时的性能开销
提供更高效的属性访问机制
- // vue2
- function defineReactive(obj,key, val){
- object.defineProperty(obj,key，{
- enumerable: true,
- configurable:true,
- get:function(){
- // 依赖收集
- return val
- }，
- set:function(newVal){
- if(val === newVal)return;
- val = newVal
- // 触发更新
- }
- })
- }
- //vue3
- function reactive(target){
- return new Proxy(target，{
- get(target，key，receiver){
- // 依赖收集
- const result=Reflect.get(target,key,receiver)
- return result
- },
- set(target，key，value，receiver){
- const oldValue =target[key]
- const result=Reflect.set(target,key,value, receiver)
- if(oldValue !== value){
- // 触发更新
- }
- return result
- }
- })
- }
|
