vue常用面试题

最新推荐文章于 2024-06-14 10:39:01 发布

好想吃麻薯

最新推荐文章于 2024-06-14 10:39:01 发布

阅读量246

点赞数 3

分类专栏：笔记文章标签： vue.js

本文链接：https://blog.csdn.net/Sco_114/article/details/118176543

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、src和href的区别？

	1. 请求资源类型不同 :
			1)  href用于超文本引入;
			2) 请求 src 资源时会将其指向的资源下载并应用到文档中;
	2.	作用结果不同 :
			 1)href 用于在当前文档和引用资源之间确立联系;
			 2)src 用于替换当前内容;
	3. 浏览器解析方式不同 :	
 			1) 在文档中添加href ，浏览器会识别该文档为 CSS 文件，
 			就会并行下载资源并且不会停止对当前文档的处理;
 			2) 当浏览器解析到src ，会暂停其他资源的下载和处理，
 		直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容;

总结：href用于建立当前页面和引用资源的关系(链接) 而src会替换当前标签 
遇到href 页面会继续向下加载后续内容 而遇到src不同 浏览器会加载完src 后才会向下执行

二、页面元素隐藏方式和各自特点？

		1. 设置display:none;  不显示,不占位
        2. Visibility:hidden;  不显示,占位
        3. opcity:0         不显示，占位

三、用过哪些盒模型，以及他们各自的区别？

        1. IE盒子模型box-sizing:border-box;（怪异模式）
        2. W3C标准盒子模型 box-sizing:content-box;（标准模式）默认模式        
		
		区别:
		标准盒模型的高度只包括content的高度,不包括padding内边距和border边框
		IE盒模型的高度包括content的高度,也包括padding和border的宽度

        设置css宽高时 IE盒模型宽高会包括内边距 而 w3c盒子模型不会

四、谈谈你的移动端适配方案有哪些？

	        1. viewport适配
	              通过设置 initial-scale , 将所有设备布局视口的宽度调整为设计图的宽度
	        2. vw适配
	             vw是相对单位，1vw表示屏幕宽度的1%
	        4. rem适配
	             借助media实现rem适配
	        5. 弹性盒子(flex)适配
			     flex入口，加在容器上
                 display:flex;

五、js 数据类型有几种？它们之间的区别是什么？

     两种  基本数据类型和引用数据类型
     区别 :
	        1)基本类型在栈内存,引用类型在堆内存分配地址;
			2)不同的内存分配机制也带来了不同的访问机制;
			3)赋值变量时的不同;
			4)参数传递的不同（把实参赋值给形参的过程);

六、数据类型强制转化和隐式转化的分别怎么使用？

  隐式转化 :
  计算机程序自动完成的转化，但是不会在任何时候都发生，只会在特定的情况下执行
  强制转化 :
  强制转化就是手动把数据转成想要的数据类型，但不会改变原变量中存储的数据及数据类型

七、let 、const 和 var 的区别？

     1)	 Var声明属于函数作用域,let,const属于块级作用域
     2)  Var有变量提升,let,const没有
     3)  Var变量可以重复声明,而在同一块级作用域下,let变量不能重复声明,const变量不能修改

八、箭头函数和普通函数的区别？

  箭头函数的 this 永远指向其上下文的  this ，任何方法都改变不了其指向;
  普通函数的this指向调用它的那个对象;

九、解释什么叫回调地狱以及怎么解决回调地狱？

  1. 什么是回调地狱 :
  函数作为参数层层嵌套
	一个异步请求套着一个异步请求，一个异步请求依赖于另一个的执行结果，使用回调的方式相互嵌套

代码示意: 在这里插入图片描述

如何解决回调地狱 :
使用promise方式解决
promise链式调用的特点可以解决
Promise构造函数executor 函数， resolve 和 reject 两个函数作为参数传递给executor(executor 函数在Promise构造函数返回所建 promise 实例对象前被调用)
代码示意:

十、说明原生ajax的实现步骤？

       1) 创建ajax对象
       2) 告诉ajax请求地址以及请求方式
       3) 发送请求
       4) 监听数据变化
       5）返回函数

		创建ajax对象
		绑定事件
		初始化请求参数（get/post）
		发送请求

十一、什么情况下会导致跨域？

		不满足同源策略就会发生跨域，
		同源策略：协议 端口号 域名相同
       如果协议 端口号 域名不相同就会发生跨域

十二、vue 有几个生命周期以及各个生命周期的调用时机？

        beforeCreate（创建前）
		created（创建后）
		beforeMount(挂载前)
		mounted（挂载后)
		beforeUpdate（更新前）
		updated（更新后）
		beforeDestroy（销毁前）
		destroyed（销毁后）

十三、使用vue中的v-for时,为什么要绑定 :key? 如果不绑定会有什么效果？

      Key可以标识组件的唯一性,为了更好地区别各个组件 
      key的作用主要是为了高效的复用虚拟DOM保持数据的唯一
    
      不绑定会导致所有列表DOM重新渲染

十四、v-show 和 v-if 的作用和区别, v-bind 和 v-model的作用和区别？

   1. v-show 和 v-if 的作用和区别  :
	            共同点:都能控制元素的显示和隐藏
				不同点:
				v-if为DOM渲染属性,  通过添加删除DOM节点实现
				v-show属于css渲染,  通过css的display:none实现
	2.	v-bind 和 v-model的作用和区别  :
	        v-model: 外部改变数据时,影响内部;它属于双向绑定
            v-bind:  外部改变数据时,不影响内部;它属于单向绑定

			bind 用于绑定  只负责数据显示的标签
           model  用于绑定  同时负责数据显示和收集的标签
            
            简而言之，双向绑定就是model的更新会触发view的更新，
            view的更新会触发model的更新，它们的作用是相互的;
            
            而单向绑定就是model的更新会触发view的更新，
            view的更新不会触发model的更新，它们的作用是单向的.

十五、vue 组件通信如何实现，至少列举3种方式

  	 vuex 就是一个仓库，仓库里放了很多对象。在state中存放数据源，
	 当组件要更改state中的数据时,必须通过mutation进行,mutation储存的是改变state中数据的操作方法，
		之后通过actions储存的操作去触发mutation中的方法,
		由组件中的$store.dispatch('action 名称', data1)来触发。然后由commit()来触发mutation的调用 , 
		间接更新 state
		
父传子：在父组件自定义属性名传递数据，在父组件在引入和挂载子组件，在父组件使用它，
在标签上绑定你想传入的数据，在子组件上用props接受数据，并且使用它

子传父： 父组件向子组件传递事件方法，子组件通过$emit触发事件，回调给父组件

兄弟通信（需要有共同的父组件）：
			设定事件中心vue实例	中央通信	let bus = new vue()
			A：methods：{函数{bus.$emit("自定义事件名"，数据)}}  发送
			B：created（）{bus.$on("A发送过来的自定义事件名"，函数)}  进行数据接受

$refs    在input上绑定input1，然后在javascript里面这样调用：this.$refs.input1

十六、详细说明vue组件中 data ，computed 和 watch的区别

  data: vue实例的数据对象,data中的属性不会随赋值变量的改动而改动
  computed:是计算属性，它可以帮助我们将在模板中的一些稍微复杂的逻辑
  计算放回到js代码中，方便理解与修改维护
  watch:调用一次执行一次 如果监听数据变化都会执行回调


	data: 组件中存放数据的主要属性(不用处理的数据，单纯的存放)
           比如：ajax请求来，需要渲染的数据 /  通过各种传参方式过来的参数

    computed： 计算属性。 (存放着需要计算的数据)
               该数据的值, 通过依赖目标的改变，而改变。
            例如：    
                    a = 1  +  5  + 4;

    watch :  监听属性 (存放着需要监听的数据)
             当监听的数据发生改变时，其他相对应的数据也发生改变

十七、keep-alive的作用是什么？使用它的目的是什么？

keep-alive可以在组件切换时，保存其包裹的组件的状态，使其不被销毁，防止多次渲染。
 keep-alive可以实现组件缓存，当组件切换时不会对当前组件进行卸载

目的:可以使被包含的组件保留状态 避免重新渲染

十八、vue-router的作用是什么？为什么不使用a标签？

路由,主要用于页面跳转,通过设置不同的path，切换视图，
向服务器发送的不同的请求，获取不同的资源

通过a标签和vue-router对比，vue-router避免了重复渲染，
不像a标签一样需要重新渲染，导致一些动态添加路由的机制失效

十九、vuex 是什么？怎么使用？为什么用使用它？

vuex 是什么 :
           Vuex是一个专为vue.js应用程序开发的状态管理模式

 		什么是状态管理：
 		它的五个属性，state，getters，mutation，action，modules
 		状态就是数据，它相当于一个仓库，是用于存放数据用的，
 		它可以把存储的数据共享给其他组件

如何使用 :
           在main.Js引入store,只用来读取的状态集中放在store中；
           改变状态的方式是提交mutatios，这是个同步逻辑操作；异步逻辑应该封装在action中

为什么使用它:
            实现多组件状态管理，可以方便的实现组件之间的数据共享

二十、请谈一下你对使用原生js开发和使用vue开发的看法

原生js
 	    面向浏览器编程，需要写很多兼容性代码
 		操作dom更繁琐，复杂交互需要频繁操作dom，且代码不够友好
 		可扩展性和可维护性没有保证
 		团队协作困难
 		开发效率低下

vue开发
        基于MVVM 实现的数据驱动视图，解放了DOM操作
         View 与 Model 分离处理， 降低代码的耦合度
         当双向绑定时，Bug调试难度增大
         大型项目中，View和Model过多，维护成本过高

二十一、vue传参中params与query的区别

	1.	使用query传参的时候，name，path都可以引入，但使用params传参的时候只能使用name进行引入。
	2.	接收参数的时候使用this.$ route.params.name或者this.$ route.query.name
	3.	进行路由跳转的时候，我们使用this.$ router.push(‘路径’)
	4.	如果index.js配置路由时，我们能看到，params的参数是URL不可或缺的一部分，
	但是query的参数是拼接起来的，没有也不影响
	5.	query更加类似于我们ajax中get传参，params则类似于post

1）引入方式不同： query要使用path来引入，params要使用name来引入，接受参数格式类似，引用分别是this. $r o u t e . q u e r y . n a m e 和 t h i s .$ route.params.name
2）形成的路径不同（或者url地址显示不同）：
使用query传参的话，会在浏览器的url栏看到传的参数类似于get请求，使用params传参的话则不会，类似于post请求。
params传递后形成的路径：/router/123,/router/zhangsan
query传递后形成的路径：/router?id=666&name=zhangsan
3）是否受动态路径参数影响
Query传递的参数不会受路径参数的影响，会全部展示到路径上，刷新不会丢失query里面的数据；
params传递的参数会受路径参数的影响，只会展示含有动态路径参数的部分，刷新会丢失没有设置动态路径参数的params的数据

二十二、什么声明式路由，什么是编程式路由？

		声明式：用 <router-link to=’'跳转的路径 "> < /router-link>
		编程式：就是js写法，即this.$route.push(‘跳转的路径’)

二十三、vue.js的特性

	Vue.js 核心特性
   - 数据驱动视图
   - 组件化开发

   - 数据驱动视图
      - 数据变化会自动更新到对应元素中，无需手动操作DOM
      - 对于输入框等可输入的元素，可设置双向数据绑定
      - Vue.js的数据驱动视图，是基于M-V-VM模型实现
      - MVVM  是一种软件开发思想
         - Model:  代表数据
         - View :  代表视图模板
         - ViewModel： 代表业务逻辑处理的代码

    - 优点
        - 基于MVVM 实现的数据驱动视图，解放了DOM操作
        - View 与 Model 分离处理， 降低代码的耦合度
            - 什么是耦合？
               - 模块与模块之间很多是存在关联的，如果改动一个，其他若干模块都会发生改变，
               - 模块之间的关系越是紧密，独立性就越不好。(这种关系，我们称作： 耦合度)

            -  什么内聚？
            模块内部的代码，相互之间的联系越强，内聚就越高。
              - 一个模块应该尽量去独立，独立的去完成一个功能！ 如果有新的代码，
              非得引入到独立的模块中，建议拆分成多模块。
    - 缺：
        - 但双向绑定时，Bug调试难度增大
        - 大型项目中，V和M过多，维护成本过高。
     组件化开发：
        - 组件化开发，允许我们将网页中的功能，样式，标签封装成可复用的模块。
        每个模块之间是彼此独立但相互联系的

vuex的五个核心概念

	1. state：vuex的基本数据，用来存储变量
	2. geeter：从基本数据(state)派生的数据，相当于state的计算属性
	3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。
	    每个mutation 都有一个字符串的事件类型 (type) 和 一个 回调函数 (handler)。
	回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。
	4. action：和mutation的功能大致相同，不同之处在于 ==》
	           Action 提交的是 mutation，而不是直接变更状态。 			
	5.Action 可以包含任意异步操作。
	5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,
	            使得结构非常清晰，方便管理。
	state
	负责状态管理，类似于vue中的data，用于初始化数据

	mutation
	专用于修改state中的数据，通过commit触发

	action
	可以处理异步，通过dispatch触发，不能直接修改state，首先在组件中通过dispatch触发action，
	然后在action函数内部commit触发mutation，通过mutation修改state状态值

	getter
	Vuex中的计算属性，相当于vue中的computed,依赖于state状态值，状态值一旦改变，
	getter会重新计算，也就是说，当一个数据依赖于另一个数据发生变化时，就要使用getter

	module
	模块化管理

什么是同步什么是异步

	 1.同步
      同步意思是在两个或多个数据库、文件、模块、线程之间用来保持数据内容一致性的机制。
      同步就是一件事一件事的执行。只有前一个任务执行完毕，才能执行后一个任务。
     2. 异步
     例如: setTimeout就是一个异步任务, 当JS引擎顺序执行到setTimeout的时候发现他是个异步任务，
     则会把这个任务挂起，继续执行后面的代码

通过Flex布局设置水平垂直居中

   通过给父元素设置CSS样式：

	display:flex;
	align-items:center;
	justify-content:center;

好想吃麻薯

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue常用面试题

vue面试题一、src和href的区别？ 1. 请求资源类型不同 : 1) href用于超文本引入; 2) 请求 src 资源时会将其指向的资源下载并应用到文档中; 2. 作用结果不同 : 1)href 用于在当前文档和引用资源之间确立联系; 2)src 用于替换当前内容; 3. 浏览器解析方式不同 : 1) 在文档中添加href ，浏览器会识别该文档为 CSS 文件，就会并行下载资源...
复制链接

扫一扫