前端vue基础知识（必看）

最新推荐文章于 2024-07-28 11:20:53 发布
最新推荐文章于 2024-07-28 11:20:53 发布
阅读量970 收藏 3
点赞数
分类专栏： 面试题 文章标签： vue.js javascript node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MYmayue/article/details/120848601
版权

5.1 Vue项⽬中有封装过axios吗？主要是封装哪⽅⾯的？

axios的 API 很友好,可直接使用，但是随着项⽬规模增⼤，如果每发起⼀次HTTP 请求，就要把这些⽐如设置超时时间、设置请求头、根据项⽬环境判断使⽤哪个请求地址、错误处理等等操作，都需要写⼀遍,

这种重复劳动不仅浪费时间，⽽且让代码变得冗余不堪，难以维护。为了提⾼我们的代码质量，我们应该在项⽬中⼆次封装⼀下axios再使用

如何封装

  1. 设置接⼝请求前缀：根据开发、测试、⽣产环境的不同，前缀需要加以区分

  2. 请求头 : 来实现⼀些具体的业务，必须携带⼀些参数才可以请求(例如：会员业务)

  3. 状态码: 根据接⼝返回的不同status ， 来执⾏不同的业务，这块需要和后端约定好请求⽅法：根据get 、 post 等⽅法进⾏⼀个再次封装，使⽤起来更为⽅便

    1xx：指示信息--表示请求已接收，继续处理

    2xx：成功--表示请求已被成功接收、理解、接受

    3xx：重定向--要完成请求必须进行更进一步的操作

    4xx：客户端错误--请求有语法错误或请求无法实现

    5xx：服务器端错误--服务器未能实现合法的请求

  4. 请求拦截器: 根据请求的请求头设定，来决定哪些请求可以访问

  5. 响应拦截器： 这块就是根据 后端`返回来的状态码判定执⾏不同业务7

5.3 Vue组件之间的通信⽅式都有哪些?

  • 父传子

    1. 在父组件的子组件标签上绑定一个属性，挂载要传输的变量

    2. 在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props:["属性名"] props:{属性名:数据类型}

  • 子传父

    1. 在父组件的子组件标签上自定义一个事件，然后调用需要的方法

    2. 在子组件的方法中通过 this.$emit("事件")来触发在父组件中定义的事件，数据是以参数的形式进行传递的

  • 兄弟组件

    1. 在src中新建一个Bus.js的文件，然后导出一个空的vue实例

    2. 在传输数据的一方引入Bus.js 然后通过Bus.$emit(“事件名”,"参数")来来派发事件，数据是以$emit()的参数形式来传递

    3. 在接受的数据的一方 引入 Bus.js 然后通过 Bus.$on("事件名",(data)=>{data是接受的数据})

5.4 Vue项⽬中你是如何解决跨域的呢？

  • 跨域的概念：协议、域名、端口都相同才同域，否则都是跨域

  • jsonp的原理

    • ajax 请求受同源策略影响，不允许进行跨域请求，我们利用 script 标签的 src 属性不受同源策略的约束

  • 解决方式 jsonp、代理、反向代理、a链接处理跨域、Hash(哈希)值处理跨域、cors（ajax2）处理跨域

    • 通过服务端实现代理请求转发 以express框架为例

    • 通过配置nginx 实现代理

5.5 为什么data属性是⼀个函数⽽不是⼀个对象？

  1. 跟按引用传值有关。

  2. Vue 中的 data 是一个对象类型，对象类型的数据是按 引用传值 的。这就会导致所有组件的实例都 共享 同一份数据，这是不对的，我们要的是每个组件实例都是独立的

  3. 所以为了解决对象类型数据共享的问题，我们需要将 data 定义成一个函数，每个实例需要通过调用函数生成一个独立的数据对象

5.6 动态给vue的data添加⼀个新的属性时会发⽣什么？怎样解决

  1. 直接添加属性问题

    1. 实例化⼀个vue 实例，定义data 属性和methods ⽅法

    2. 数据虽然更新了（ console 打印出了新属性），但⻚⾯并没有更新

  2. 解决方案

    1. Vue.set()

      • Vue.set( target, propertyName/index, value )

      • {Object | Array} target

      • {string | number} propertyName/index

      • {any} value

    2. Vue.set( target, propertyName/index, value )

    3. Object.assign

      • 直接使⽤Object.assign() 添加到对象的新属性不会触发更新应创建⼀个新的对象，合并原对象和混⼊对象的属行

    4. $forcesUpdated()

  3. 小结

    • 如果为对象添加少量的新属性，可以直接采⽤Vue.set()

    • 如果需要为新对象添加⼤量的新属性，则通过Object.assign() 创建新对象

    • 如果你实在不知道怎么操作时，可采取$forceUpdate() 进⾏强制刷新 (不建议)

5.7你了解vue的diff算法吗？说说看?

diff算法: 基础虚拟DOM完成节点更新的方法

  1. 用js对象来表示真是的DOM树结构，创建一个虚拟DOM对象

  2. 当数据发生改变的时候，创建一个新的js的虚拟DOM对象

  3. 比较新旧对象的差异，记录下来，最终更新到真实的DOM树结构上

5.8你有写过⾃定义指令吗？⾃定义指令的应⽤场景有哪些？

  1. 实现

    1. 全局： vue.directive:{"",{}}

    2. 局部：directives:{指令名：{钩子函数}}

      1. bind(){} 只调用一次，指令第一次绑定到元素时调用

      2. inserted(){} 被绑定元素插入父节点时调用

      3. update(){} 被绑定元素所在的模板更新时调用，而不论绑定值是否变化

      4. componentUpdated(){} 被绑定元素所在模板完成一次更新周期时调用

      5. unbind(){}只调用一次， 指令与元素解绑时调用

  2. 应用场景

    1. 防抖——设置⼀个v-throttle ⾃定义指令来实现

    2. 图片懒加载——设置⼀个v-lazy ⾃定义组件

    3. 一键Copy的功能

    4. 拖拽指令、

    5. ⻚⾯⽔印、

    6. 权限校验

5.9 Vue中的过滤器了解吗？过滤器的应⽤场景有哪些？

  1. 过滤器（ filter ）是输送介质管道上不可缺少的⼀种装置，把⼀些不必要的东⻄过滤掉

  2. 小结

    1. ⼀个表达式可以使⽤多个过滤器。过滤器之间需要⽤管道符“|”隔开。其执⾏顺序从左往右

    2. 局部过滤器优先于全局过滤器被调⽤

  3. 应⽤场景

    1. 单位转换、数字打点、⽂本格式化、时间格式化

5.10 SPA首屏加载速度慢的原因

  1. 加载慢的原因

    1. 网络延时问题

    2. 资源文件体积是否过大

    3. 资源是否重复发送请求去加载了

    4. 加载脚本的时候，渲染内容堵塞了

  2. 解决方案

    1. 减⼩⼊⼝⽂件积

    2. 静态资源本地缓存

    3. UI框架按需加载

    4. 图⽚资源的压缩

    5. 组件重复打包

    6. 开启GZip压缩

    7. 使⽤SSR

5.11 v-if和v-for的优先级是什么？

  1. 作用

    • v-if ：指令⽤于条件性地渲染⼀块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染

    • v-for： 指令基于⼀个数组来渲染⼀个列表。 v-for 指令需要使⽤item in items形式的特殊语法，其中items是源数据数组或者对象，⽽item则是被迭代的数组元素的别名 建议设置key 并且保证每个key 值是独⼀⽆⼆的 便于diff 算法进⾏优化

  2. 优先级

    • v-for 优先级⽐v-if ⾼

  3. 注意事项

    • 永远不要把v-if v-for同时⽤在同⼀个元素上，带来性能⽅⾯的浪费（每次渲染都会先循环再进⾏条件判断）

    • 如果避免出现这种情况，则在外层嵌套template （⻚⾯渲染不⽣成dom 节点)，在这⼀层进⾏v-if判断，然后在内部进⾏v-for循环

    • 如果条件出现在循环内部，可通过计算属性computed 提前过滤掉那些不需要显示的项

5.12 说说你对keep-alive的理解是什么？

  • keep-alive是Vue提供给我们一个内置组件，

  • 作用：保存我们路由切换时组件的状态 , 比如列表页面进入详情，我们想保存列表滚动的位置，我们就可 使用keep-alive保存列表页面的滚动位置。

  • 组件使用keep-alive以后会新增两个生命周期 actived() deactived(),

  • 有两个参数—— include - 包裹的组件名会被缓存,exclude 包裹的组件名都不会被缓存

5.13 你知道vue中key的原理吗？说说你对它的理解？

  1. key是给每⼀个vnode的唯⼀id，也是diff的⼀种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点

  2. 作用

    • 在列表渲染时使用key属性

    • 使用key属性强制替换元素

    • 更新组件时判断两个节点是否相同。相同就复用，不相同就删除旧的创建新的

5.14 vue生命周期

1.创建 beforeCreate created

beforeCreate() 创建前的阶段，这个时候data中的数据，还未定义，所以不能使用
created() 最早开始使用 data和methods中数据的钩子函数

2.挂载 beforeMount mounted

beforeMount() 指令已经解析完毕内存中已经生成dom树，还没有渲染到本地
mounted() dom已经渲染完毕，最早可以操作DOM元素钩子函数

3.更新 beforeUpdate updated

 beforeUpdate() 当data的数据发生改变会执行这个钩子 内存更新，但是DOM节点还未更新
 updated() 数据更新完成以后触发的方法，DOM节点已经更新

4.销毁 beforeDestroy destroyed

 beforeDestroy()即将销毁 data和methods中的数据此时还是可以使用的，可以做一些释放内存的操作
 destroyed()已经销毁完毕

5.15 说说你对vue的mixin的理解，有什么应⽤场景？

  1. 理解

    • Mixin 是⾯向对象程序设计语⾔中的类，提供了⽅法的实现。其他类可以访问mixin 类的⽅法⽽不必成为其⼦类

    • Mixin 类通常作为功能模块使⽤，在需要该功能时“混⼊”，有利于代码复⽤⼜避免了多继承的复杂

    • mixin （混⼊），提供了⼀种⾮常灵活的⽅式，来分发组件中的可复⽤功能

    • 本质其实就是⼀个js 对象，它可以包含我们组件中任意功能选项，如data 、 components 、 methods 、 created 、 computed 等等

  2. 使用场景

    • 我们经常会遇到在不同的组件中经常会需要⽤到⼀些相同或者相似的代码，这些代码的功能相对独⽴，这时，可以通过Vue 的mixin 功能将相同或者相似的代码提出来

mixin （混⼊）来分发 Vue 组件中的可复⽤功能

倘若有些公共组件使用频率很高，使用mixin（混入）就可以很方便地引入公用部分，

5.16 Vue中的$nextTick有什么作⽤？

效果：通过 this.$nextTick 我们可以注册一个回调函数，这个回调函数会在下次 DOM 更新结束之后执行

为什么用？

答：Vue 中的数据更新是 延迟异步更新 的？就是说当我们修改了数据之后，页面并不会马上就更新，所以如果我们修改了数据之后，马上就获取页面中的数据，你会发现他还是原来的数据因为页面还没有更新，

使用场景之一、

  • 需要在视图更新之后，基于新的视图进行操作。

  • 你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。

5.17 vue要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？

    • 所谓权限控制，就是用户只能访问到被分配的资源 前端权限是请求的发起权，请求的发起可能有下面两种形式触发

      • 页面加载触发

      • 页面上的按钮点击触发 前端权限控制可以分为四个⽅⾯： 接⼝权限 按钮权限 菜单权限 路由权限

5.18 v-if和v-show有什么区别？使用场景是什么？

  1. 当条件为真的时候 没有区别 当条件为假的时候 v-if通过创建或删除DOM节点来实现元素的显示隐藏，v-show通过css中的display属性来控制

  2. v-if更适合数据的筛选和初始渲染 v-show更适合元素的切换

5.19 什么是虚拟DOM?如何实现一个虚拟DOM

虚拟dom是利用js描述元素与元素的关系。 好处：是可以快速的渲染和高效的更新元素，提高浏览器的性能

5.20 vue3有了解过吗？能说说跟vue2的区别吗？

  1. 性能提升

    • 更小巧，更快速；支持摇树优化。支持 Fragments 和跨组件渲染；支持自定义渲染器

  2. .API 变动

    • 除渲染函数 API 和 scoped-slot 语法之外，其余均保持不变或者将通过另外构建一个兼容包 来兼容 2.x。

    • 模板语法的 99% 将保持不变。除了 scoped slot 语法可能会有一些微调之外变动最大的部分将是渲染函数 (render) 中的虚拟 DOM 的格式。

  3. 重写虚拟 DOM (Virtual DOM Rewrite)

    • 随着虚拟 DOM 重写，减少 运行时（runtime）开销。重写将包括更有效的代码来创建虚拟节点

5.21 说说你对vuex的理解

  1. 用途：实现组件之间数据的共享。

  2. 为什么用：在 Vue 中我们可以通过属性和事件实现父子之间的传值，但需要一级一级的传值，如果层级较深，只通过属性和事件传值非常的麻烦，所以需要一个专门的工具来对数据进行管理，以方便的实现各层级组件之间数据的共享。

  3. 组成部分：vuex 中主要有 6 部分组成：

    state：定义数据

    mutations：定义操作数据的方法，简单的操作，不能是异步的

    actions：定义操作数据的复杂的方法，比如AJAX等异步代码

    getters：先处理state中的数据，然后返回处理之后的结果，有点类似过滤器

    modules：分模块使用

    plugins：插件

5.22 说⼀下watch,methods和computed的区别

  • computed 具有缓存性，依赖于属性值，只有属性发生改变的时候才会重新调用

  • methods 是没有缓存的，只要调用，就会执行，一般结合事件来使用

  • watch 没有缓存性 监听data中的属性 属性值只要发生变化就会执行 可以利用他的特性做一些异步的操作

MYmayue
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端程序员需要了解的Vue知识
qq_45163356的博客
05-07 3972
前言：这一篇旨在教大家快速入门Vue2，每个知识点用案例解释 一：声明式渲染 vue是单页面应用，一个vue应用直接挂载到一个dom元素上，其余的都创建在vue的实例里面 文本插值{{}}，里面可以做字符串拼接，js逻辑运算 <h1>{{ data + 1 }}</h1> <h1>{{ data + '1' }}</h1> <h1>{{ `${data}1` }}</h1> <h1&gt
前端vue框架基础知识
06-11
### 前端Vue框架基础知识详解 #### 一、前端工程化与Webpack Webpack作为现代前端项目的工程化工具，提供了一系列的功能来简化前端开发过程，包括但不限于模块化开发支持、代码压缩混淆、处理浏览器端JavaScript的...
前端开发：Vue基础
Vermont_的博客
09-12 237
如果只从体验的角度来看， Vuejs 的安装非常简单. 只需要引入一个第三方的js包即可。 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 下面是一个最简单的例子： 完整代码： 在vscode里面新建文件夹，然后建立HTML文件； <html> <head> <script src="https://cdn.js
Web前端系列之vue框架应用基础
最新发布
sinat_30844883的博客
07-28 558
vue.js读作为[vju:]与view读音相似，它是一个js库，用于实现前端单页应用，以移动端优先的原则设计app应用，最主要要的功能是实现各种网页设计之外，能够方便地加载数据并进行渲染。
前端学习——vue基础知识
weixin_46068262的博客
05-16 432
1. Vue初体验： 1.1 导入开发版本的Vue.js <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 1.2 创建vue实例对象，设置el属性和data属性 var app = new Vue({ el: "#app", //一般建议用id选择器，因为是唯一的。（其他的选择器也可以） data: {
前端Vue.js知识小节
weixin_41909712的博客
02-18 3077
一、模块语句 1、v-html="mess(名字随意)" 如：mess:'<h1>这是一个h1标签</h1>' 2、v-bind:class="{ 样式名:true/false }" 如：样式必须为类class，ID则不可以 .class1{ color:red; } 3、v-if:="自定...
Vue基础用法-指令(一)
qq_46199553的博客
08-24 425
vue 简介 1. 什么是 vue 官方给出的概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架。 构建用户界面 用 vue 往 html 页面中填充数据，非常的方便 框架 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！ 要学习 vue，就是在学习 vue 框架中规定的用法！ vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库 2. vue 的特性 vue 框架的特性，主要体现在如下两方面： ①
2024年前端VUE必看面试题
01-24
本资源“2024年前端VUE必看面试题”旨在帮助开发者准备Vue.js相关的面试，确保他们在技术面试中表现出色。以下是根据这个主题可能会涉及到的一些关键知识点，这些内容对于理解和掌握Vue.js至关重要。 1. **Vue基础...
web前端VUE框架-基础知识及核心原理
02-24
Vue(读音/vju:/，类似于view)是一套用于构建用户界面的渐进式框架特点：易用、灵活、高效全家桶：vue+components（vueelement/iview...）+vue-router+vuex+vue-cli类库：jquery、zepto、underscore...插件：dialog、...
vue基础知识-菜鸟入门
01-03
Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面。...通过深入理解和熟练掌握这些Vue基础知识，开发者能够构建出功能丰富、性能优秀的Web应用。不断学习和实践，是提升Vue技能的关键。
VUE前端知识点（初学者）
zxy_go1的博客
12-09 176
1.Vue methods方法调用其定义好的方法及this指向问题 错误代码 正确代码 总结： var vm = new vue()中在methods定义的方法使用 vm，我们需要使用this来调用，当有请求时 需要先备份this对象，不然this将不再是原来vm 这个对象。 2.export default用法的区别 相同点 不同点 例子： ...
前端vue知识点总结
谦谦的博客
11-15 1086
1.为什么在大型项目中data是一个函数而不是一个对象?        组件是一个可复用的实例，当你引用一个组件的时候，组件里的data是一个普通的对象，所有用到这个组件的都引用的同一个data，就会造成数据污染。 但是不使用return包裹的数据会在项目的全局可见，会造成变量污染；使用return包裹后数据中变量只在当前组件或作用域内中生效，不会影响其他组件。        当一个组件被
前端Vue知识点
就这样吧
05-07 363
1. vue.runtime.esm.js:619 [Vue warn]: Error in v-on handler: "TypeError: date.getFullYear is not a function" 在使用 date.getFullYear() 之前忘记添加一句 date = new Date(date) 然后就可以继续了 Vue格式化时间： //格式化日期 fun...
前端Vue相关知识
weixin_43296480的博客
11-26 119
一、MVVM模式 M：Model，模型，包括数据和一些操作。 V：View，视图，页面渲染结果。 VM：视图与模型的双向绑定。 在MVVM之前，开发人员从后端获取数据以后，要通过DOM操作Model获取数据渲染到View中，通过操作DOM从View中获取数据，同步到Model中。 VM的作用就是在于把DOM操作封装起来，开发人员不用担心Model与View之间如何连接。 当Model中有数据时...
Vue（前端框架）
qq_42925518的博客
07-28 1万+
Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如: vue-router: 跳转，vue-resource: 通信，vuex:管理)或既有项目整合[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r3HiAnlx-1658970670003)(\java\8.框架\VUE\vue\Vue的介绍.PNG)]H
前端-VUE框架
朱豪凯的博客
08-08 2627
推荐的开发工具及安装 ue开发者工具vue-devtools-4.1.4_0.crx谷歌插件下载 怎么在谷歌浏览器中安装.crx扩展名的离线Chrome插件? 使用淘宝的镜像，避免墙外安装失败 npm config set registry http://registry.npm.taobao.org/ 安装vue-cli npm install -g vue-cli 查看版本 node -...
前端学习之vue
weixin_53105591的博客
07-21 1198
前端学习之vue
前端Vue框架
热门推荐
Mr_Jin的博客
11-15 1万+
封装了HTML，CSS ，JS的代码 按需搭建 特点：是一个轻量级的前端框架，双向绑定，数据动态更新 是一个渐进式的框架，其核心是数据驱动，组件化前端开发 Vue关注的，操作的是数据， 第一步：需要将vue.js文件导入到你的工程中 并把文件引入到html中 第二步：准备解析vue的数据，渲染区 展示的形式必须是 {{xxx}} 第三步：给第二步准备数据,需要写在script中，因为vue是基....................................
【前端】Vue项目相关 纯干货 基础知识 + 面试题分享！
一个努力学习的程序猿
10-17 831
Vue项目相关 基础知识分享
vue3前端基础知识
04-28
Vue.js是一种流行的JavaScript框架，用构建用户界面。Vue 3是Vue.js的最新版本，它带来了一些重要的改进和新功能。以下是Vue 3的一些前端基础知识： 1. 组件化：Vue 3支持组件化开发，将页面划分为多个独立的组件，每个组件有自己的模板、样式和逻辑。这样可以提高代码的可维护性和复用性。 2. 响应式数据：Vue 3使用了Proxy对象来实现响应式数据。当数据发生变化时，相关的视图会自动更新。你可以通过在数据属性前加上`ref`关键字来创建响应式数据。 3. Composition API：Vue 3引入了Composition API，它提供了一种新的组织组件逻辑的方式。通过使用`setup`函数，你可以将相关的逻辑代码组织在一起，提高代码的可读性和维护性。 4. Teleport：Vue 3引入了Teleport特性，它可以将组件的内容渲染到DOM树中的任意位置。这对于创建弹出框、模态框等组件非常有用。 5. 更好的性能：Vue 3在性能方面进行了优化，比如编译器的优化、更小的包体积等。这使得Vue 3在运行时更快，并且更适合在移动端和低性能设备上使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值