2020-09-03

tech2023-11-28  81

A类:

A1. let和var的区别?

相同点: 作用都是定义变量关键字

区别点:

    作用域只限制于当前代码块{}   -----   var的作用域则是函数体function(){}

    使用let声明变量的作用域不会提示  -----   而var会自动提升

    在相同的用作用域下不能有相同的变量,否则报错  ------   而var中则可以出现相同变量名,且不会报错。

    for循环提现父子作用域。

A2. 解构赋值是什么? 

      ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring )。

      只要等号两边的模式相同,左边的变量就会被赋予对应的值。

A3. 基本数据类型和引用数据类型的区别? 

   ECMAScript变量包含两种不同类型的值:基本类型值、引用类型值;

   基本类型值:指的是保存在**栈**内存中的简单数据段;

   引用类型值:指的是那些保存在**堆**内存中的对象,意思是,变量中保存的实际上只是一个指针,这个指针指向内存堆中实际的值

A4. 子组件如何传值给父组件

    $emit方法传递参数

A5. v-if和v-show的区别及使用场景?

     当一个元素会被频繁的显示和影藏时,使用v-show。

     当元素在响应式网页的操作过程中,根据不同用户的需求,可能永远不会被显示或被隐藏,则选择使用v-if。

A6. v-clock有什么作用? 

     v-clock能够解决插值表达式闪烁的问题,需要在style中设置样式[v-clock]{display:none}

A7. 组件之间的通讯分几种分别是什么? 

     父传子                  子传父                    兄弟组建传值

A8. Vue-router共有几种模式?默认是哪种? 

     2种 hash history                 hash

A9. Vuex是什么?   

     全局状态管理工具

A10. vue.js的两个核心是什么

    数据驱动、组件系统

A11. vue如何自定义过滤器

    局部的 全局的  filters Vue.filter  

A12. vue如何新增自定义指令

​           局部全局

​           directives

​           Vue.directive

A13. 路由对象route和router的区别

    路由信息对象 路由实例

A14. params和query的区别?  

     get传参 动态路由传值

A15. axios常用的请求方式有哪些?

     axios.get axios.post  axios.all

A16. $nextTick的作用?  

     应用场景:需要在视图更新之后,基于新的视图进行操作。

A17. vue路由的跳转方式有几种

    两种 router-link   编程式导航  

B类:

B1. 什么是vue的计算属性

    在模板中放入太多的逻辑会让模板过重且难以维护,在需要对数据进行复杂处理,且可能多次使用的情况下,尽量采取计算属性的方式

B2. set数据结构有哪些常用的属性和方法?

   size: 返回Set实例的成员总数。

   add(value):添加某个值,返回 Set 结构本身。

   delete(value):删除某个值,返回一个布尔值,表示删除是否成功。

   has(value):返回一个布尔值,表示该值是否为Set的成员。

   clear():清除所有成员,没有返回值。

B3. 箭头函数和function区别或新增了哪些特性? 

   写法不同

   this的指向不同

   箭头函数不可以当构造函数

   变量提升

B4. Promise常用方法有哪些及作用是什么?

   ​    Promise 是异步编程的一种解决方案,其实是一个构造函数,自己身上有all、reject、resolve这几个方法,原型上有then、catch等方法。

B5. 简述虚拟DOM?

    Virtual DOM是对DOM的抽象,本质上是JavaScript对象,这个对象就是更加轻量级的对DOM的描述

B6. Vue中双向数据绑定是如何实现的?  

      vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过`Object.defineProperty()`来劫持各个属性的`setter`,`getter`,在数据变动时发布消息给订阅者,触发相应的监听回调

B7. keep-alive是什么? 

      <keep-alive>`是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。

     <keep-alive> 包裹动态组件时,会**缓存不活动的组件实例**,而不是销毁它们。

B8. Props验证类型都有哪些? 

     String

     Number

     Boolean

     Function

     Object

     Array

     Symbol

B9. created和mounted区别? 

       created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。

      mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作

B10. assets和static的区别?  

     assets中的文件会经过webpack打包,重新编译,推荐在assets存放js等需要打包编译的文件。

     static中的文件,不会打包编译。static中的文件只是复制一遍。static中建议放一些外部第三方文件,自己的放assets里,别人的放static中。(图片推荐放在static里)

B11. vuex中如何异步修改数据? 

     首先, 概括下 vuex基本使用流程为: 在action中分发异步请求, 在异步回调中提交mutation,在mutation中修改state, 使用getters对state的值进行计算封装.

B12. 简述拦截器是什么,共有几个拦截点,分别是什么? 

      在数据发出之前或者响应之后处理

      请求拦截器

      响应拦截器

B13. vue的双向绑定原理   

​         Object.defineProperty() 来劫持各个属性的 setter / getter,在数据变动时发布消息给订阅者,触发相应的监听回调

B14. 路由的守卫有几种

​        3种 全局的 独享的 组件内的

B15. 如何让css只在当前vue组件起作用

    在style标签中写入scoped即可 例如:<style scoped></style>

B16. vue常用的修饰符

    .prevent: 提交事件不再重载页面;.stop: 阻止单击事件冒泡;.self: 当事件发生在该元素本身而不是子元素的时候会触发;.capture: 事件侦听,事件发生的时候会调用

B17. 怎么定义 vue-router 的动态路由? 怎么获取传过来的值

    在 router 目录下的 index.js 文件中,对 path 属性加上 /:id,使用 router 对象的 params.id 获取

C类:

C1. 路由钩子函数共有几种?分别是什么?参数to、from、next分别是什么意思?  

      全局钩子

     某个路由的钩子

     组件内钩子

     to:router即将进入的路由对象

     from:当前导航即将离开的路由

     next:Function,进行管道中的一个钩子,如果执行完了,则导航的状态就是 confirmed (确认的);否则为false,终止导航

C2. Element UI完整引入步骤及按需引入步骤是什么?  

      1、完整引入

     在 main.js 中写入以下内容:

         import Vue from 'vue';

         import ElementUI from 'element-ui';

         import 'element-ui/lib/theme-chalk/index.css';

         import App from './App.vue';

     Vue.use(ElementUI);

         new Vue({

         el: '#app',

         render: h => h(App)

     });

         以上代码便完成了 Element 的引入。需要注意的是,样式文件需要单独引入。

    2、 按需引入

     借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。

     首先,安装 babel-plugin-component:

     npm install babel-plugin-component -D

     然后,将 .babelrc 修改为:

     {      "presets": [["es2015", { "modules": false }]],

             "plugins": [

         [

           "component",

           {

             "libraryName": "element-ui",

             "styleLibraryName": "theme-chalk"

           }

         ]

       ]

     }

     接下来,如果你只希望引入部分组件,比如 Button 和 Select,那么需要在 main.js 中写入以下内容:

 

     import Vue from 'vue';

     import { Button, Select } from 'element-ui';

     import App from './App.vue';

 

     Vue.component(Button.name, Button);

     Vue.component(Select.name, Select);

     /* 或写为

 

      * Vue.use(Button)

      * Vue.use(Select)

         */

 

     new Vue({

       el: '#app',

       render: h => h(App)

     });

 

C3. 介绍Vuex的核心概念及其作用?

        state 数据源载体

        getters 用于改变state的值,派生出多个数据源

        mutation 唯一可以提交可以改变state的状态,也就是数据的属性值

        actions 提交的是mutation,用commit提交 而不是直接变更状态,可以包含任意异步出操作

        modules 拆分成多个模块   

C4. Vue与Angular以及React的区别

     React采用特殊的JSX语法,Vue.js在组件开发中也推崇编写.vue特殊文件格式,对文件内容都有一些约定,两者都需要编译后使用;中心思想相同:一切都是组件,组件实例之间可以嵌套;都提供合理的钩子函数,可以让开发者定制化地去处理需求;都不内置列数AJAX,Route等功能到核心包,而是以插件的方式加载;在组件开发中都支持mixins的特性。

    不同点:

    React采用的Virtual DOM会对渲染出来的结果做脏检查;Vue.js在模板中提供了指令,过滤器等,可以非常方便,快捷地操作Virtual DOM。

C5. 对keep-alive 的了解

    keep-alive是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。

    在vue 2.1.0 版本之后,keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存,优先级大于include) 

C6. 简述MVVM和MVC?

   mvc

       Model(模型)

       View(视图)

       Controller(控制器)

       简单的理解:视图请求数据,将请求发送至控制器,控制器再将请求发送给模型,模型去查找数据,找到之后传给控制器,控制器再传给视图进行渲染。

   mvvm

      Model 代表数据模型

      View 代表UI视图

      ViewModel 负责监听 Model 中数据的改变并且控制视图的更新(桥梁,可以理解成mvc中的控制器)

      简单理解:视图请求数据,将请求发送至控制器,在控制器的两端具有监听机制,直接调用模型的数据,一端改变全部改变,利用数据劫持,结合订阅者和发布者模式,实现数据的双向绑定

C7. 兄弟组件如何传值

    eventBus,就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。项目比较小时,用这个比较合适

C8. 写出常用的指令

    v-model 多用于表单元素实现双向数据绑定(同angular中的ng-model)

    v-for 格式: v-for="字段名 in(of) 数组json" 循环数组或json(同angular中的ng-repeat),需要注意从vue2开始取消了$index

    v-show 显示内容 (同angular中的ng-show)

    v-hide 隐藏内容(同angular中的ng-hide)

    v-if 显示与隐藏 (dom元素的删除添加 同angular中的ng-if 默认值为false)

    v-else-if 必须和v-if连用

    v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误

    v-bind 动态绑定 作用: 及时对页面的数据进行更改

    v-on:click 给标签绑定函数,可以缩写为@,例如绑定一个点击函数 函数必须写在methods里面

    v-text 解析文本

    v-html 解析html标签

    v-bind:class 三种绑定方法 1、对象型 '{red:isred}' 2、三元型 'isred?"red":"blue"' 3、数组型 '[{red:"isred"},{blue:"isblue"}]'

    v-once 进入页面时 只渲染一次 不在进行渲染

    v-cloak 防止闪烁

    v-pre 把标签内部的元素原位输出

C9. 生命周期共有几个?分别在什么时候使用? 

     beforeCreate(创建前),

     created(创建后),

     beforeMount(载入前),

     mounted(载入后),

     beforeUpdate(更新前),

     updated(更新后),

     beforeDestroy(销毁前),

     destroyed(销毁后)

C10. 自定义指令 有哪些钩子函数,及自定义指令的使用场景? 

      bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

     inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。

     update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

     我们会在稍后讨论渲染函数时介绍更多 VNodes 的细节。

     componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。

     unbind:只调用一次,指令与元素解绑时调用。

     使用场景

     代码复用和抽象的主要形式是组件

     当需要对普通 DOM 元素进行底层操作,此时就会用到自定义指令

     但是,对于大幅度的 DOM 变动,还是应该使用组件

C11. 单页面应用和多页面应用区别及优缺点? 

     单页面应用(SPA),通俗一点说就是指只有一个主页面的应用,浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候,还是会分开写(页面片段),然后在交互的时候由路由程序动态载入,单页面的页面跳转,仅刷新局部资源。多应用于pc端。

     多页面(MPA),就是指一个应用中有多个页面,页面跳转时是整页刷新

     单页面的优点:

     1,用户体验好,快,内容的改变不需要重新加载整个页面,基于这一点spa对服务器压力较小

     2,前后端分离

     3,页面效果会比较炫酷(比如切换页面内容时的专场动画)

     单页面缺点:

     1,不利于seo

     2,导航不可用,如果一定要导航需要自行实现前进、后退。(由于是单页面不能用浏览器的前进后退功能,所以需要自己建立堆栈管理)

     3,初次加载时耗时多

     4,页面复杂度提高很多

C12. 渐进式框架的理解? 

      每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式。

     使用vue,你可以在原有大系统的上面,把一两个组件改用它实现,当jQuery用;也可以整个用它全家桶开发,当Angular用;

     还可以用它的视图,搭配你自己设计的整个下层用。

     也可以函数式,都可以。

     它只是个轻量视图而已,只做了自己该做的事,没有做不该做的事,仅此而已。

     你不必一开始就用Vue所有的全家桶,根据场景,官方提供了方便的框架供你使用。

C13. methods computed watch的区别? 

     computed是在HTML DOM加载后马上执行的,如赋值;

     而methods则必须要有一定的触发条件才能执行,如点击事件;

     watch呢?它用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。

     所以他们的执行顺序为:默认加载的时候先computed再watch,不执行methods;等触发某一事件后,则是:先methods再watch。

C14. 列举常用指令以及作用? 

     v-model 多用于表单元素实现双向数据绑定(同angular中的ng-model)

    v-for 格式: v-for="字段名 in(of) 数组json"  循环数组或json(同angular中的ng-repeat),需要注意从vue2开始取消了$index

    v-show 显示内容 (同angular中的ng-show)

    v-hide  隐藏内容(同angular中的ng-hide)

    v-if    显示与隐藏  (dom元素的删除添加 同angular中的ng-if 默认值为false)

    v-else-if  必须和v-if连用

    v-else  必须和v-if连用  不能单独使用  否则报错   模板编译错误

    v-bind  动态绑定  作用: 及时对页面的数据进行更改

    v-on:click 给标签绑定函数,可以缩写为@,例如绑定一个点击函数  函数必须写在methods里面

    v-text  解析文本

    v-html   解析html标签

    v-bind:class   三种绑定方法  1、对象型  '{red:isred}'  2、三元型   'isred?"red":"blue"'   3、数组型  '[{red:"isred"},{blue:"isblue"}]'

    v-once  进入页面时  只渲染一次 不在进行渲染

C15. 简述虚拟DOM?

    Virtual DOM是对DOM的抽象,本质上是JavaScript对象,这个对象就是更加轻量级的对DOM的描述

C16. 请描述一下你对webpack的理解? 

   Webpack 是什么

   webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。 

   简单说就是模块加载器,通过使用Webpack,能够像Node.js一样处理依赖关系,然后**解析出模块之间的依赖**,将代码打包。

   为什么需要打包?

   - 像sass,JSX等代码虽然极大的提高了开发效率,但是本身并不被浏览器所识别,需要我们对其进行编译和打包,变成浏览器识别的代码

   - 模块化(让我们可以把复杂的代码细化为小的文件)

   - 优化加载速度(压缩和合并代码来提高加载速度,压缩可以减少文件体积,代码合并可以减少http请求)

   - 使用新的开发模式

最新回复(0)