面试:原理类

205 阅读1分钟

1. vue双向绑定原理,复习复习(es6面试题)

6. 生命周期原理:

2. 什么是双向绑定 (es6面试题)

3. 继承要继续复习复习(js面试题1)

4. 封装过什么组件?

5. vue原理--》这个话题太大了。

7. $set原理

我讲讲思想吧?还是源码?还是数据双向绑定?

unni-app面试题

1. 条件编译
2. 生命周期
3. 项目打包


vue解决seo问题

1. 预渲染:html页面加载之前,先把数据放那里。如果整个网络慢,那就是空白的
        打包的时候可以采用webpack的插件:prerender-spa-plugin
        适合项目:某几个页面需要做seo,就是将每个路由地址写到一个数组中,打包的时候就是每个路由都会生成一个文件夹,解决接口数据存在dom中,爬虫就可以爬到,
        存在问题:解决不了动态路由,比如详情页,每一个商品详情跳转的时候都是一个新的页面,路由地址不能动态更新。动态title,描述关键字,解决不了,可以用vue-meta-info解决动态title,但是会闪烁
        适合做的项目:一个项目中只有某几个页面需要做seo,可以做,但是如果全部页面都需要做,那预渲染是做不到的
        
 2. 服务端渲染:Nuxt.js 
     解决问题:整个网站都做seo
     存在问题:很慢,压力都在服务器
     具体是这样的: 2个服务器,相当于前后端不分离,首先有静态页面和 node服务去请求后端java接口,java接口返回数据给node,然后node数据再给到客户端,接口数据有了才打开页面。压力在服务器
     了解Nuxt :
             路由跳转:nuxt.lint
             新建页面之后,自动生成路由,子路由,不需要像vue一样手动配置
             传参也是跟vue一样,只是编签改成nuxt-lint 通过query或params传,

image.png
image.png

打包问题:

1. 怎么将vue单页面打包的时候做成多页面?
打包的时候可以采用webpack的插件:prerender-spa-plugin

image.png

2. 项目打包后,页面出现空白问题:
    module.exports{
        publicPath:'./'
    }
3. 页面内容不显示【路由问题】
   打包后前端自测要使用hash路由模式,如果使用history会出现空白页
   上线后,要改成history模式,需要后端去做重定向配置
   
4.  代理请求数据,打包后请求不生效。
    需要新建两个文件来区分是.env.development还是.env.production环境,
    两个文件里面都声明一个变量问ENV,值为development,或 production
    第二变量就是设置VUE_APP_BASE_API的url来指向开发环境还是生产环境。
    设置完成后,在axios里面进行二次封装用if来判断url的值是生产环境还是开发环境。
    vue会自动通过process.env.变量是等于development还是production,去自动切换环境。
    

    
    

image.png

image.png

image.png

image.png

axios 二次封装:

image.png

 你有没有配置过代理?

image.png

补充面试题

1.变量提升之后为什么是underfinder的值?

因为在代码预编译阶段,会去全局执行上下文过程中,就直接给变量名赋值为underFinder了,所以打印的时候就是打印出underfinder。
为什么函数可以在函数声明的前面调用 也可以在后面调用?
因为 函数在预编译过程中是将函数整体提升上去,跟变量的一个区别就在这里,所以在任意一个地方都可以调用当前这个函数

2.高阶函数(函数嵌套函数)???map reduce filter sort

1. 使用map(String)可以将数组的元素转字符串化:

image.png

2. map(Number),可以将字符串转数字。引用类型直接变成NaN。如果字符串不是纯数字也会变成NaN

image.png

3. reduce数组元素计算

image.png

4.**filter:筛选元素用。返回数组元素的判断(boolean):**
筛选掉空字符串、null、undefined:

image.png

4.数组去重:筛选条件:当前元素位置===数组该元素的第一个位置

image.png

5.sort:数组重排序。返回同一个数组对象。根据ascii码进行排序。
x>y:从小到大  
x<y:从大到小

image.png

英文也可以排序:

image.png

中文也可以排序:

image.png

项目:

茶七网 项目介绍:

茶七网
这是一个电商类项目,功能是比较多的, 从首页开始介绍:首页里面有涉及到插件的滑动,
分类页面引入了betterScroll作为上下左右分类数据联动, 用到了keep-alive 和 nextTick

nextTick:可以很好的等待页面数据数出来以后再去把插件执行 包括正常的购物,添加到购物车页面,购物车的增删改查 ,
其次是我的页面:里面有用户的登录 注册 找回密码 和退出登录 登录方式有 账号密码 和 短信验证码登录 ,
引入短信验证码sdk 登录完成后 根据用户的userinfo存储以及token的存储以及token的过期时间, 
token的过期时间:是这样的,如果过期了 后端会返回一个code码,前端去二次封装axios里面进行判断code为多少,
比如为 1000 就是过期,这样就需要跳转到login这个页面,进行重新登录。

再往下还有地址的管理,每个用户都有收货地址的地址管理,在购物车提交订单,再到下单支付,有支付的整个流程。
这就是这个项目用到的技术点比较多

项目中遇到最大困难的是什么? 我 :在之前学的时候是做过支付的,但是做的是沙箱支付demo,
在公司之前没有做过企业对接sdk支付的,在公司里面按照沙箱支付流程去走是没有什么问题的,
但是后端可能是刚培训出来的或刚工作的,对于对接支付sdk这块可能不是特别了解,给了3天时间 ,
结果5天都没有弄好,最后把之前沙箱的经验和写的demo给到他参考琢磨,多用了两三天时间把这个对接好,
这个是遇到最大的困难,因为浪费了很多时间

沙箱支付流程介绍:

image.png

待更新面试题: 【vuex的缺点是什么 自定义指令待详细补充, 关于继承了解哪些? 支付功能,分享功能 】

8. 为什么用
开发项目的时候有几个人?
前端有2人,后端3人 测试 产品 设计 老大 各一人。


######  一 说一下 vue的生命周期
1. 主要是从组件的创建到销毁的过程,系统4个阶段分别是:
   创建 beforeCreate, created
   挂载 beforeMount, mounted
   更新 beforeUpdate, updated
   销毁 beforeDestroy,destroyed
   
   beforeCreate:初始化实例,进行数据观测,可以加loading事件
   created: 这个阶段实例已经初始化,完成数据初始化
             data\methods\watch,里面的方法和数据可以访问,可以进行异步请求
             结束loading事件
             DOM没有挂载,如果需要修改就放在Nexttick回调函数里
   beforeMount:这个阶段完成DOM阶段初始化,但并没有挂载到
   mounted:完成DOM挂载渲染,可以在这里操作DOM,双向数据绑定
            发送请求,请求数据(created也可以发送请求,请求数据,但是没有dom,所以没啥用)
   beforeUpdate:可以在这里访问dom,删除一些数据监听器,更新数据必须是被渲染在模板上的(el template render之一),此时view还没有更新
                 若在beforeUpdate中再次修改数据,不会再触发更新方法
                 
   update:
       数据更新后,完成view的重新渲染,不再在这里继续修改数据,否则会在此触发更新方法(beforeUpdate/update)
   beforeDestroy: 实例销毁前,删除一些提示操作
   destroy: 销毁后,实例被删除,监听 组件 子组件 不能操作任何东西
               
  
    

image.png

十四 补充 说一下 this.store.dispatch()this.store.dispatch() 与 this.store.commit()方法的区别

总的来说他们只是存取方式不同,两个方法都是传值给vuex的mutation改变state

this.$store.commit():同步操作,
写法:this.$store.commit(‘mutations方法名’,值)
取值 this.$store.state.changeValue

this.$store.dispatch() :含有异步操作,例如向后台提交数据,
写法:this.$store.dispatch(‘action方法名’,值)
取值 this.$store.getters.getlists

二十六 说一下vue如何实现局部样式的或者说如何实现组件之间样式不冲突的和实现原理是什么?

答:css没有局部样式的概念,vue脚手架通过实现了,即在style标签上添加scoped
scoped的实现原理:vue通过postcss给每个dom元素添加一个以data-开头的随机自定义属性实现的

二十六 说一下vue第三方ui样式库如何实现样式穿透的

(ui库和less/sass穿透问题)  >>>    /deep/ ::v-deep

二十七 说一下vue转场动画如何实现的

答:vue转场动画主要通过vue中的提供的transition组件实现的,例如;

<transition name=”名称”>

        <router-view></router-view>

</transition>

其中name为转场的名称,自己定义,可通过定义进入和离开两种转场动画,格式为:

.名称-enter {   }  //将要进入动画

.名称-enter-active {   }  //定义进入的过程动画

.名称-leave {    }   //将要离开的动画

.名称-leave-active {  }  //定义离开过程中的动画

三十六 边角料面试可能会问到

1.ref是什么?
    可以用用来获取dom,使用场景项目中使用插件,并且插件要获取dom,比如betterScroll,
    可以通过this.$refs去获取,相对于原生jsdom操作优雅一点
    

三十四 Vue属性改变:页面没有渲染:this.$forceUpdate() 强制更新

二 闭包

答:闭包就是有两个函数,A函数里面创建B函数,B函数内部可以调用A函数的局部变量,内部函数被return,就是闭包
好处:如果没有闭包,作用域链这个规则就无效了。
不好的:本身调用完外部函数,标量就应该销毁,但是没有销毁,变量留在内存中,增加了内存存储(导致性能不好)
  适用场景:for循环和定时器结合使用,for循环和dom事件结合.可以在性能优化的过程中,节流防抖函数的使用,导航栏获取下标的使用

如何解决内存泄露:将暴露全外部的闭包变量置为null

image.png

image.png

image.png

image.png

image.png