资讯专栏INFORMATION COLUMN

前端面试必问题答疑(2)

techstay / 915人阅读

摘要:解决了组件之间同一状态的共享问题。当我们的应用遇到多个组件之间的共享问题时会需要状态管理核心状态管理有个核心,分别是以及。当错误出现时,我们现在也会有一个记录之前发生了什么。此外,每个实例组件仍然可以拥有和管理自己的私有状态

一,css部分 1,简单介绍下css权重优先级:
    默认样式<标签选择器<类选择器
2,实现一个不知道宽高的盒子水平垂直居中,有哪几种实现方式:
    a) 使用CSS方法:
    父盒子设置:display:table-cell;text-align:center;vertical-align:middle;
    子盒子设置:display:inline-block;vertical-align:middle;
    代码实现:=>
        .father{
            width:300px;
            height:300px;
            display:table-cell;
            text-align:center;
            vertical-align:center;
        }
        .son{
            background:red;
            display:inline-block;
            vertical-align:middle;
        }
        
    b) 使用CSS3 transform:
    父盒子设置:position:relative;
    子盒子设置:position:absolute;left:50%;top:50%;transform:transform(-50%,-50%);
    代码实现:=>
        .father{
            width:300px;
            height:300px;
            position:relative;
        }
        .son{
            background:red;
            position:absolute;
            top:50%;
            left:50%;
            transform:transform(-50%,-50%);
        }
        
    c) 弹性盒子:
    父盒子设置:display:flex;justify-content:center;align-item:center;
    子盒子设置:空,不需要设置
    代码实现:=>
        .father{
            width:300px;
            height:300px;
            display:flex;
            justify-content:center;
            align-item:center;
        }
        .son{
            background:red;
        }
        
    [参考]([https://zhuanlan.zhihu.com/p/27186791][1])
    
3,如何用css画一个三角形:
    代码实现:=>
    #eg{
    width: 0;
    height: 0;
    border: 100px solid transparent;
    border-bottom: 100px solid blue;
    }
二,JS部分: 1,请写一段代码将"2019-4-28"转成"2019年4月28日"
    代码实现:=>
    let str = "2019-4-28";
    let year = str.split("-")[0];
    let month = str.split("-")[1];
    let date = str.split("-")[2];
    let str1 =year+"年"+month+"月"+date+"日";
    console.log(str1);
    
2,写一段代码将数组 ["a","b","c"] , 变成 ["c","b","a"] 。(可使用js自带方法,也可以自己实现)
    代码实现:=>
    var arr=["a","b","c"];
    //var arr1=arr.sort();//正序
    var arr1=arr.reverse();//反序
    console.log(arr1);
    
三,Vue部分: 1,vue的生命周期钩子函数有哪些?
    answer:=>
        beforeCreate
        created
        beforeMount
        mounted
        beforeUpdate
        updated
        activated
        deactivated
        beforeDestroy
        destroyed
    [详细]([https://www.cnblogs.com/xkloveme/p/7435271.html][2])
    
2,什么是keep-alive?它有什么作用?与他对应的钩子函数是那些?
    answer:=>
        是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。
        对应的钩子函数:
        activated
            类型:func
            触发时机:keep-alive组件激活时使用;
        deactivated
            类型:func
            触发时机:keep-alive组件停用时调用;
            
3,vue的事件修饰符是什么,她能做什么事?举个栗子:在vue的click事件中,如何阻止事件传播?
    answer:=>
        事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间去处理这些烦恼的事情,
        而能有更多的精力专注于程序的逻辑处理。在Vue中事件修饰符主要有:                
        .stop:等同于JavaScript中的event.stopPropagation(),防止事件冒泡
        .prevent:等同于JavaScript中的event.preventDefault(),防止执行预设的行为
        (如果事件可取消,则取消该事件,而不停止事件的进一步传播)
        .capture:与事件冒泡的方向相反,事件捕获由外到内
        .self:只会触发自己范围内的事件,不包含子元素
        .once:只会触发一次
    举个栗子:=>
        .stop 防止事件冒泡
        冒泡事件:嵌套两三层父子关系,然后所有都有点击事件,点击子节点,就会触发从内至外  
        子节点-父节点的点击事件
        
4,什么是vue router路由导航守卫?工作中用过她吗?常用她处理什么问题?
    导航守卫即是在路由跳转的时候,根据vue-router提供的导航守卫主要用来通过跳转或取消参数
    或查询的改变并不会出触发进入/离开的导航守卫
    
    路由跳转前做一些验证,比如登录验证,是网站中的普遍需求。
    对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards)。
    
5,从路由/user跳转到/home,有几种方式?
    1.router-link
    2.this.$router.push() (函数里面调用)
    3.this.$router.replace() (用法同上,push)
    4.this.$router.go(n) ()
 [详细介绍]([https://blog.csdn.net/jiandan1127/article/details/86170336][3])
 
6,什么是vuex?他有什么作用?如何改变store中的状态(state)?
    answer:=>
        vuex是一个专为vue.js应用程序开发的状态管理模式。vuex解决了组件之间同一状态的共享问题。
        当我们的应用遇到多个组件之间的共享问题时会需要
        状态管理核心状态管理有5个核心,分别是state、getter、mutation、action以及module。
    1.state
        state为单一状态树,在state中需要定义我们所需要管理的数组、对象、字符串等等,只有在这里定义了,
        在vue.js的组件中才能获取你定义的这个对象的状态。
    2.简单的 store 模式
    var store = { 
        debug: true, 
        state: { 
        message: "Hello!" 
    }, 
    setMessageAction (newValue) {
         if (this.debug) 
         console.log("setMessageAction triggered with", newValue) 
         this.state.message = newValue 
     },
      clearMessageAction () { 
          if (this.debug) console.log("clearMessageAction triggered") this.state.message = "" 
      } 
     }
     
     所有 store 中 state 的改变,都放置在 store 自身的 action 中去管理。
     这种集中式状态管理能够被更容易地理解哪种类型的 mutation 将会发生,以及它们是如何被触发。
     当错误出现时,我们现在也会有一个 log 记录 bug 之前发生了什么。
     
     此外,每个实例/组件仍然可以拥有和管理自己的私有状态:
     var vmA = new Vue({ 
         data: { 
         privateState: {}, 
         sharedState: store.state 
         } 
     }) 
     var vmB = new Vue({ 
         data: { 
         privateState: {}, 
         sharedState: store.state 
         } 
     })
     
     End!              

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/104117.html

相关文章

  • 前端面试问题答疑(1)

    摘要:一,前端性能优化有哪些页面优化方面,减少请求数设计简化页面合理设置缓存资源合并与压缩图片嵌入,将外部脚本置底,异步执行脚本,,将外链放在中,异步请求,减少不必要的跳转,避免重复的资源请求代码优化方面,操作转为数组 一,前端性能优化有哪些? a) 页面优化方面: 1,减少HTTP请求数--设计简化页面--合理设置缓存--资源合并与压缩--css sprites--图片嵌入--Lazy L...

    voyagelab 评论0 收藏0
  • 前端面试问题答疑(1)

    摘要:一,前端性能优化有哪些页面优化方面,减少请求数设计简化页面合理设置缓存资源合并与压缩图片嵌入,将外部脚本置底,异步执行脚本,,将外链放在中,异步请求,减少不必要的跳转,避免重复的资源请求代码优化方面,操作转为数组 一,前端性能优化有哪些? a) 页面优化方面: 1,减少HTTP请求数--设计简化页面--合理设置缓存--资源合并与压缩--css sprites--图片嵌入--Lazy L...

    fuchenxuan 评论0 收藏0
  • 前端面试问题答疑(1)

    摘要:一,前端性能优化有哪些页面优化方面,减少请求数设计简化页面合理设置缓存资源合并与压缩图片嵌入,将外部脚本置底,异步执行脚本,,将外链放在中,异步请求,减少不必要的跳转,避免重复的资源请求代码优化方面,操作转为数组 一,前端性能优化有哪些? a) 页面优化方面: 1,减少HTTP请求数--设计简化页面--合理设置缓存--资源合并与压缩--css sprites--图片嵌入--Lazy L...

    付永刚 评论0 收藏0
  • 前端面试问题答疑2

    摘要:解决了组件之间同一状态的共享问题。当我们的应用遇到多个组件之间的共享问题时会需要状态管理核心状态管理有个核心,分别是以及。当错误出现时,我们现在也会有一个记录之前发生了什么。此外,每个实例组件仍然可以拥有和管理自己的私有状态 一,css部分 1,简单介绍下css权重优先级: 默认样式 .father{ width:300px; ...

    vboy1010 评论0 收藏0

发表评论

0条评论

techstay

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<