个人历经面试题总结

262 阅读4分钟

关于Vue的:

v-if和v-show的区别:

v-if是条件渲染然而v-show相当于css 的display:none;

vue的生命周期?

Vue路由进行跳转时如何传递参数:

  1. 通过query参数来进行参数的传递

    我们可以在路由组件的路由配置对象里写上我们需要传递的参数,然后通过this.$route.path.query来获取到我们传递的参数。比如:

    例:
         const route=[
            {
                path:"/one",
                query:{
                    id:1,  //这样我们就可以通过this.$route.query来获取query参数
                }
            }
         ]
    
  2. 通过params传递参数

    我们需要在路由配置对象里这样写

    例:
        const route=[
            {
                path:"/one:id",//这样这个id就是params参数沃恩可以通过this.$route.params
                component:index
            }
         ]
       
    

Vue的组件通信:

Vue的组件通信分为以下三种:

  • 父子通信

    比如a组件是b组件的子组件,我们先给在b组件的组件模板中找到a组件标签然后给a组件标签绑定自定义属性,属性值是要传递的数据。然后在a组件的组件配置里通过props进行接收,然后直接把传递过来的数据当成a组件配置对象的data里的数据用即可。

    例:
     //这里是b组件的组件模板,index标签是a组件的组件标签,num是自定义属性,net是要传递的数据
     <index :num="net"></index>
     
     //这里是a组件的组件配置
     props:["num"]
     //还可以这样接收
     props:{
         num:Array
     }
    
  • 子父通信:

    比如a组件是b组件的子组件,我们需要在b组件的组件模板里找到a组件的组件标签给a组件的组件标签绑定自定义事件,然后在b组件的配置里的methods里写上自定义事件的事件函数该事件函数有一个参数就是传递过来的参数,我们需要现在a组件的组件模板中选择一个标签绑定原生事件然后在该原生事件的事件函数里调用this.$emit("在b组件的组件模板中给a组件的组件标签绑定的自定义事件",要传递的数据)

    例:
      //这里是b组件的组件模板,index标签就是a组件的组件标签
         <index @chuandi="chuandi"></index>
      //这里是b组件的组件配置
         methods:{
             chuandi(net){
                 //这个net就是传递过来的数据
             }
         }
      //这里是a组件的组件模板
         <div>
            <button @click="net"></button>
         </div>
      //这里是a组件的配置
         methods:{
             net(){
                 this.$emit("chuandi",传递的数据)
             }
         }
    
  • 非父子通信:

    想要实现一个非父子通信我们需要创建一个新的new Vue实例化对象然后通过该新创建的实例化对象去进行传递数据

    例:
     //a组件和b组件是非父子关系,然后a组件向b组件传递数据
     //bat就是新创建的实例化对象
      const bat=new Vue({})moban
      //先在a组件的组件模板中选择一个标签绑定原生事件
      
           //这里是a组件的组件模板
           <div>
            <button @click="hei"></button>
           </div>
           //这里是a组件的组件配置
           methods:{
               hei(){
                   bat.$emit("自定义事件名",传递的数据)
               }
           }
     //然后在b组件的组件配置的created里使用去监听自定义事件
         //这里是b组件的组件配置
         created(){
             this.$on("自定义事件名",(da)=>{
             
                 da就是传递过来的数据
             })
         }
      
      
    
  • 我们还可以使用veux去进行组件与组件之间的相互通信。

关于上线打包的:

使用webpack进行打包web app:

一般都是使用vue-cli配置好的,直接输入命令行npm run build

这个问题深入研究webpack后会进行更新。

关于js和jquery的

ES6是什么:

ES6是ECMA组织为javascript定制的第六个版本,ES6之后所有的ES2015,ES2016,ES2017,ES2018,ES2019,ES10,等都可以统称为ES6。

原生js的dom选择和jquery的dom选择的区别:

jquery获取到的DOM对象是一个数组,里边有jquery封装好的方法,原生js获取到的DOM对象是一个对象里边有DOM元素的方法。jqury获取到的DOM不能使用原生的方法需要转换下才能使用。

如何解决跨域:

一般使用jsonp去解决跨域,或者是后端允许的情况去解决跨域。

关于xml和json的区别:

json是一种轻量级的数据交换格式,xml是扩展标记语言。xml是标签包含的数据比如:< name > 红龙将 < / name >.json是这样的:{name:"红龙将"}

cookie和localStorage还有sessionStorage的区别:

cookie的存储大小只有5K并且会携带在http中,如果给cookie设置了过期时间那么cookie会在过期时间后消失,如果没有设置过期时间则在关闭页面时会消失。sessionStorage不能设置过期时间在关闭页面时就会删除,localStorage能够设置过期时间。localStorage和sessionStorage是本地存储并且能够存储的大小比cookie大。

关于css的:

css中三种定位都根据什么进行定位的

css中有三种定位:relative;(相对定位),absolute;(绝对定位),fixed(固定定位)。fixed是根据浏览器窗口去进行定位的,asolute回去找父元素去相对于父元素去进行定位前提是父元素有定位,如果父元素没有定位会逐级去找有定位的元素去相对于该有定位的元素去进行定位。相对定位相对于它原有的位置去进行定位,不管元素使用定位时是否移动都要占据它原来的位置。

移动端适配屏幕的临界值:

  • < 768px的称为超小屏幕,在bootstarp中为xs
  • >=768px的称为小屏幕,在bootstarp中为sm
  • >=992px的称为中等屏幕,在bootstarp中为md
  • >=1200px的称为大屏幕,在bootstarp中为lg

关于小程序的:

小程序的用户登录流程:

1.登陆只需发送code到后台,后台获取openid,根据openid到数据库中查找用户信息,若有则返回用户信息,若没有将该openid插入数据库, 2.后台生成token(可以是用户id和其他随机串组合的加密字符串),返回前台token,和用户信息 3.前台判断用户信息是否包含用户名称,用户城市。。。等信息,若包含则登陆成功 4.若不包含,则调用 wx.getUserInfo,发送encryptedData,iv,token到后台,后台根据token找到用户openid解密encryptedData和iv获取用户其他信息 5.然后更新数据库,并返回用户信息

关于react的

React是如何渲染dom的?

React的声明周期?

setState是同步还是异步的?

React的哪个声明周期用来进行性能优化的