• 前端知识学习05


    1.BFC:块级格式化上下文

    BFC决定了元素如何对其内容进行定位,以及与其它元素的关系和相互作用,当涉及到可视化布局时,BFC提供一个环境,html在这个环境中按照一定的规则进行布局。

    怎样触发BFC:

    • overflow:hidden
    • display:inline-block
    • position:absolute
    • position:fixed
    • display:table-cell
    • display:flex

    BFC解决了什么问题:

    • 使用float的时候脱离文档流,高度塌陷
    • margin边距重叠

    2.proxy

    proxy对象是创建一个对象的代理,用来监听这个对象的相关操作

    3..call() .aply() .bind()的区别

    • call与apply唯一的区别就是它们的传参方式不同,call从第二个参数开始都是传给函数的,apply只有两个参数,第二个参数是一个数组,传给函数的参数都写在这个数组里面

    • call与apply改变了函数的this指向后会立即执行,而bind是改变函数的this指向并返回这个这个函数,不会立即执行

    • call与apply的返回值是函数的执行结果,bind的返回值是改变了this指向的函数的拷贝

    4。数组的方法?

    • includes 查找数组中是否有某元素
    • flat 扁平化数组
    • forEach 遍历数组
    • push 添加到数组的末尾
    • pop 删除末尾元素
    • shift 删除头部元素
    • unshift 添加元素到数组的头部
    • indexof 查找某个元素在数组中的索引
    • splice 删除某个元素 从一个索引位置删除多个元素
    • slice 复制一个数组

    5.js闭包

     function f1(){
    
        var n=999;
    
        function f2(){
          alert(n);
        }
    
        return f2;
    
      }
    
      var result=f1();
    
      result(); // 999
    

    f2函数就相当于闭包,闭包就是能够读取其他函数内部变量的函数

    在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。

    6.组件之间的传值

    子组件向父组件传值props

    父组件向子组件传值$emit

    7.vuex是什么

    Vuex 是专门为 Vue.js 设计的状态管理库,它采用集中式存储管理应用的所有组件的状态。

    8.watch和computed区别

    • watch的意思是监听,当发生变化的时,监听并且执行
    • computed是计算属性,用来计算一个属性的值
    • 如果一个值依赖多个属性(多对一),用computed方便。
    • 如果一个值变化引起一系列值的变化(一对多),用watch方便。
    • computed有缓存

    9.路由守卫

    全局路由钩子:

    beforeEach(to,from, next)、beforeResolve(to,from, next)、afterEach(to,from);

    独享路由钩子:

    beforeEnter(to,from, next);

    组件内路由钩子:

    beforeRouteEnter(to,from, next)、beforeRouteUpdate(to,from, next)、beforeRouteLeave(to,from, next)

    导航守卫回调参数

    to:目标路由对象;

    from:即将要离开的路由对象;

    next:他是最重要的一个参数,他相当于佛珠的线,把一个一个珠子逐个串起来。以下注意点务必牢记:

    1.但凡涉及到有next参数的钩子,必须调用next() 才能继续往下执行下一个钩子,否则路由跳转等会停止。

    2.如果要中断当前的导航要调用next(false)。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到from路由对应的地址。(主要用于登录验证不通过的处理)

    3.当然next可以这样使用,next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。意思是当前的导航被中断,然后进行一个新的导航。可传递的参数与router.push中选项一致。

    4.在beforeRouteEnter钩子中next((vm)=>{})内接收的回调函数参数为当前组件的实例vm,这个回调函数在生命周期mounted之后调用,也就是,他是所有导航守卫和生命周期函数最后执行的那个钩子。

    5.next(error): (v2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

    10.js运行机制

    (1)所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。

    (2)主线程之外,还存在一个"任务队列"(task queue)。只要异步任务有了运行结果,就在"任务队列"之中放置一个事件。

    (3)一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列",看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。

    (4)主线程不断重复上面的第三步。

    11.js碰到异步怎么处理

    1. 回调函数
    2. promise
    3. async/await

    12.new操作符做了什么

    创建一个新对象

    新对象的原型指向构造函数原型对象

    将构造函数的this指向新对象

    根据返回值判断

    function mynew(func,...args){
        //创建一个新对象
        const obj={}
        //将对象的原型指向构造函数的原型对象
        obj.__proto__ = func.prototype
        //将构造函数的this指向新对象
        let reslut = func.apply(obj,args)
        //根据返回值类型判断
        return reslut instanceof Object?reslut : obj
    }
    function Person(name,age){
        this.name = name
        this.age = age
    }
    Person.prototype.say = function (){
        console.log(this.name)
    }
    let p  = mynew(Person,'张三',12)
    console.log(p)
    p.say()
    
    

    13.vue操作数据或者操作dom在哪个生命周期

    mounted

  • 相关阅读:
    set与map
    统计一个字符串中出现了多少个不同的字符
    求序列中所有不同的连续子串的数量
    79、idea IDE Eval Reset
    78、idea控制台报 java: 无效的目标发行版: 14
    16、docker安装minio
    77、idea中添加maven项目右侧无maven
    76、mysql5.7安装教程
    74、js向上递归
    72、解决IntelliJIDEA没有Spring Initializr
  • 原文地址:https://www.cnblogs.com/ma1998/p/16256174.html
Copyright © 2020-2023  润新知