面试题

菜鸟000
137 阅读8分钟

闭包

什么是闭包

1、函数里面包含的子函数，子函数访问父函数的局部变量
2、通过return将子函数暴露在全局作用域，子函数就形成闭包
3、通过闭包，父函数的局部变量没有被销毁，可通过闭包去调用，但同时，这个局部变量也不会被全局变量污染

闭包例子

  function aaa() {
                var a = 0;
                return function () {
                    alert(a++);
                };
            }
            var fun = aaa();
            fun(); //1
//简单点就是return一个函数

闭包的优点和缺点

优点：避免全局变量的污染，同时，局部变量没有被销毁，驻留内存中，还可以被访问
缺点：使用不当会造成内存泄露

简单介绍一下盒模型

1.盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)
2.类型：IE盒子模型、标准W3C盒子模型
3.两种盒模型的主要区别是:标准盒模型的宽高是值内容宽高(content)
4.而IE盒模型的宽高是指content+padding+border
5.设置盒模型的方式是：设置box-sizing
box-sizing:content-box  标准盒模型
box-sizing:border-box IE盒模型
6.盒子模型的定位：网页默认的布局方式、 浮动、 Position定位

display 的几种常用取值

1.none,block,inline,table,flex,inline-table

简要介绍 xss

xss表示Cross Site Scripting(跨站脚本攻击)，它与SQL注入攻击类似，SQL注入攻击中以SQL语句作为用户输入，从而达到查询/修改/删除数据的目的，而在xss攻击中，通过插入恶意脚本，实现对用户游览器的控制。
XSS 攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代 码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是 JavaScript，但实际上也可以包括 Java、 VBScript、ActiveX、 Flash 或者甚至是普通的 HTML。 攻击成功后，攻击者可能得到包括但不限于更高的权限（如执行一些操作）、私密网页内容、 会话和 cookie 等各种内容。

Vue 生命周期函数的理解

1.生命周期就是在vue实例执行过程中会触发的一批函数，这些函数可以帮助我们处理不同时间的业务逻辑
2.每个Vue实力在被创建时都要经过一系列的初始化过程，例如：需要设置数据监听，编译模板，将实例挂载到DOM并在数据变化时更新DOM等。

vue生命周期的8个阶段

  • beforeCreate：在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化，不能在这个阶段使用data中的数据和methods中的方法
  • creat :data和methods都已经被初始化好了，如果要调用methods中的方法，或者操作data中的数据，最早可以在这个阶段操作
  • beforeMount :执行到这个钩子的时候，在内存中已经编译好了模板，但是还没有挂载到页面中，此时，页面还是旧的
  • mounted:执行到这个钩子函数时，就表示Vue实例已经初始化完成了。此时，组件脱离的创建阶段，进入到运行阶段。**如果我们想要通过操作页面上的DOM节点，最早可以在这个阶段进行
  • beforeUpdate：当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步
  • updated：页面显示的数据和data中的数据已经保持同步了，都是最新的
  • beforeDestory : Vue实例从运行阶段到销毁阶段，这个时候上所有的data和methods,指令，过滤器，都是处于可用状态，还没有真正被销毁。
  • destoryed: 这个时候上所有的data和methods,指令，过滤器都是处于不可用状态，组件已经被销毁。

第一次加载页面会触发哪些钩子？

brforeCreat,created,beforeMount,mounted

生命周期经历的阶段和钩子函数(详解)

1.实例化vue(组件)对象：new Vue()
2.初始化事件和生命周期 init events 和 init cycle 3.beforeCreate函数： 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

即此时vue（组件）对象被创建了，但是vue对象的属性还没有绑定，如data属性，computed属性还没有绑定，即没有值。

此时还没有数据和真实DOM。

即：属性还没有赋值，也没有动态创建template属性对应的HTML元素（二阶段的createUI函数还没有执行）

  1. 挂载数据（属性赋值）

包括 属性和computed的运算，

  1. Created函数：

vue对象的属性有值了，但是DOM还没有生成，$el属性还不存在。

此时有数据了，但是还没有真实的DOM

即：data，computed都执行了。属性已经赋值，但没有动态创建template属性对应的HTML元素，所以，此时如果更改数据不会触发updated函数

如果：数据的初始值就来自于后端，可以发送ajax，或者fetch请求获取数据，但是，此时不会触发updated函数

  1. 检查

1）检查是否有el属性 检查vue配置，即new Vue{}里面的el项是否存在，有就继续检查template项。没有则等到手动绑定调用vm.$mount()

完成了全局变量$el的绑定。

2）检查是否有template属性

检查配置中的template项，如果没有template进行填充被绑定区域，则被绑定区域的el对象的outerHTML（即整个#app DOM对象，包括

和
标签）都作为被填充对象替换掉填充区域

即：如果vue对象中有 template属性，那么，template后面的HTML会替换$el对应的内容。如果有render属性，那么render就会替换template。

即：优先关系时： render > template >el

  1. beforeMount函数：

模板编译(template)、数据挂载(把数据显示在模板里)之前执行的钩子函数

此时 this.$el有值，但是数据还没有挂载到页面上。即此时页面中的{{}}里的变量还没有被数据替换

8.模板编译：用vue对象的数据（属性）替换模板中的内容

  1. Monuted函数：

模板编译完成，数据挂载完毕

即：此时已经把数据挂载到了页面上，所以，页面上能够看到正确的数据了。

一般来说，我们在此处发送异步请求（ajax，fetch，axios等），获取服务器上的数据，显示在DOM里。

  1. beforeUpdate函数：

组件更新之前执行的函数，只有数据更新后，才能调用（触发）beforeUpdate，注意：此数据一定是在模板上出现的数据，否则，不会，也没有必要触发组件更新（因为数据不出现在模板里，就没有必要再次渲染）

数据更新了，但是，vue（组件）对象对应的dom中的内部（innerHTML）没有变，所以叫作组件更新前

  1. updated函数：

组件更新之后执行的函数

vue（组件）对象对应的dom中的内部（innerHTML）改变了，所以，叫作组件更新之后

12. activated函数：keep-alive组件激活时调用

13.  deactivated函数：keep-alive组件停用时调用

14.  beforeDestroy：vue（组件）对象销毁之前

15.  destroyed：vue组件销毁后

如何垂直居中一个浮动元素？

一： 已经知道元素高宽

/ 子盒子
#div1{
    width:200px;
    height:200px;
    position: absolute;        //父元素需要相对定位
    top: 50%;
    left: 50%;
    margin-top:-100px ;   //二分之一的height，width
    margin-left: -100px;
    }

二：未知父元素高宽

//子盒子
  #div1{
    width: 200px;
    height: 200px;
    margin:auto;
    position: absolute;        //父元素需要相对定位
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: red;
   }

三：flex使盒子居中

// 父盒子
    .da{
        width: 500px;
        height: 500px;
        background: green;
        display: flex; // 使用flex
        align-items: center; // 上下居中
        justify-content: center; // 左右居中
    }

四：css3中的新属性transform实现盒子居中

   .da{
        /*父盒子*/
        width: 500px;
        height: 500px;
        background: green;
        position: relative;
    }
      #er{
        /*我是子盒子我要居中*/
        width: 200px;
        height: 200px;
        background: red;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
       }

五：利用css3的新增属性table-cell, vertical-align:middle;

 .da{
        /*父盒子*/
        width: 500px;
        height: 500px;
        background: green;
        display: table-cell;
        vertical-align: middle; 
    }
      #er{
        /*我是子盒子我要居中*/
        width: 200px;
        height: 200px;
        background: red;
        margin: auto;
       }

vue采用了什么模型，和MVC模型有什么区别

1.MVC模型

  • MVC 是一种软件架构模式，也有人叫做设计模式
  • M ： Model 数据模型 (专门用来操作数据，数据的 CRUD) 【 Django中的Model 】
  • V ： View 视图 (对于前端来说，就是页面) 【 Django中的T 】
  • C ： Controller 控制器 (是视图和数据模型沟通的桥梁，用于处理业务逻辑) 【 Django中的V 】

2.vue采用了MVVM模型

  • MVVM ===> M/V/VM
  • M : model 数据层
  • V ： view 视图层
  • VM ： ViewModel 视图模型
  • 核心 ： M <=> VM <=> V
  • 【 通过双向数据绑定的方式，将DOM操作封装起来，提高性能。】
  • 【 通过双向数据绑定的方式，只要V、M中的一方的数据改变了，另一方的数据随之改变。】

3.MVVM 优势

  • MVC 模式 将应用程序划为三个部分，实现职责分离
    。但是，在前端中，经常要通过js代码来进行一些逻辑操作，最终还要把这些逻辑操作展示页面中， 也需要频繁的操作DOM
    。 DOM是前端性能的瓶颈 。比如 ： ajax 请求、添加、修改、设置样式、动画
  • MVVM 提出来 通过 数据双向绑定 让数据自动的双向同步 的思想 【只要V、M其中一方修改了数据，另一方就会跟着修改。】
    。V (修改视图) --> M 。M(修改数据) -->V

4.Vue 中的 MVVM

  • 注意： 不推荐直接手动操作 DOM
  • 每个人操作 DOM 的方法不一样，会造成性能不一样 官网 ： 虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发，因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

5.学习 Vue 要转化思想

  • 采用的是 ： 数据驱动视图 的思想， 数据是核心
  • 以后如果想要操作 DOM， 立马想到的不是应该是拿到元素设置，而是数据
  • 数据驱动视图 ： 不要再想着怎么操作 DOM， 而是想着如何操作数据
avatar
文章
阅读
粉丝