面试题

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Zhooson/article/details/80353253

小程序
备注: 基于wepy的方法来实现!!!! 所以写法有些区别

  1. 当前的page的页面有个textarea的标签和按钮(点击按钮的作用是显示一个弹层,弹层会覆盖在textarea上面),当点按钮在手机页面会展示什么情况?
原因: textarea标签小程序有个层级最高的问题,手机会出现textarea的标签出现在弹层上面
方案: 监听弹层是否显示隐藏,判断是textare的的显示隐藏,同时得使用一个临时变量来记录这个textarea的数据
  1. 一个列表中每个数据里面有个多张图片的功能,列表滑动一定的位置,使用 wx.previewImage 的预览图片,关闭预览图片的功能,列表返回到顶部?什么情况导致的?解决办法是什么?
原因:在调取接口的方法写在onShow,此方法每次进入页面的都会触发,当previewImage的时候执行了onShow的方法,重新刷新数据接口了
方案:data 设置一个设置一个‘开关‘变量,可以onLoad的时候此变量变为true,onShow 只有true的时候才调取列表的接口
  1. 小程序如何页面如何解决缓存5个页面的限制?
 问题重现: 一直使用wx.navigateTo的方法跳转,突然发现5次之后就不能跳转了
 方案: 合理使用wx.navigateTo /wx.redirectTo/wx.reLaunch/wx.switchTab/wx.navigateBack 五种方法跳页面
  1. wx.navigateTo /wx.redirectTo/wx.reLaunch/wx.switchTab/wx.navigateBack 的区别?

 - wx.navigateTo: 跳转新页面,缓存上一个页面
 - wx.redirectTo  跳转新页面,销毁上一个页面
 - wx.reLaunch 跳转新页面,销毁以前所有打开的页面
 - wx.switchTab 只能跳转tabbar的页面
 - wx.navigateBack 可以回退的上一页面或者多个页面

vue

  1. vue的双向绑定原理?
 vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。

具体步骤:

第一步:需要observe的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter
这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化

第二步:compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图

第三步:Watcher订阅者是Observer和Compile之间通信的桥梁,主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。

第四步:MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果。
  1. active-class是哪个组件的属性?嵌套路由怎么定义?
vue-router模块的router-link组件
  1. 请详细说下你对vue生命周期的理解?
总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后。
创建前/后: 在beforeCreated阶段,vue实例的挂载元素$el和数据对象data都为 undefined ,还未初始化。在created阶段,vue实例的数据对象data有了,$el还没有。
载入前/后:在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。在mounted阶段,vue实例挂载完成,data.message成功渲染。
更新前/后:当data变化时,会触发beforeUpdate和updated方法。
销毁前/后:在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在
  1. 你是怎么认识vuex的?
vuex可以理解为一种开发模式或框架。比如PHP有thinkphp,java有spring等。
通过状态(数据源)集中管理驱动组件的变化(好比spring的IOC容器对bean进行集中管理)。
应用级的状态集中放在store中; 改变状态的方式是提交mutations,这是个同步的事物; 异步逻辑应该封装在action中。
  1. mint-ui是什么?怎么使用?说出至少三个组件使用方法?
基于vue的前端组件库。npm安装,然后import样式和js,vue.use(mintUi)全局引入。在单个组件局部引入:import {Toast} from ‘mint-ui’。组件一:Toast(‘登录成功’);组件二:mint-header;组件三:mint-swiper
  1. v-model是什么?怎么使用? vue中标签怎么绑定事件?
可以实现双向绑定,指令(v-class、v-for、v-if、v-show、v-on)。vue的model层的data属性。绑定事件:<input @click=doLog() />
  1. 说出至少4种vue当中的指令和它的用法?
v-if:判断是否隐藏;v-for:数据循环出来;v-bind:class:绑定一个属性;v-model:实现双向绑定
  1. vue中的通讯方式有哪几种?
$emit  /  vuex  /  eventBus 的方式  

资料: vue 兄弟组件之间的通讯

  1. 一个列表如何做到回退保留滚动位置?
    router的文件中
  scrollBehavior(to, from, savedPosition) {
    // 后退页面时, 保留滚动位置
    if (savedPosition) {
      return savedPosition;
    }
    return { x: 0, y: 0 };
  },
  1. keep-alive 的使用方法
<keep-alive exclude="seat" >
     <router-view></router-view>
</keep-alive>

-include - 字符串或正则表达式。只有匹配的组件会被缓存。
-exclude - 字符串或正则表达式。任何匹配的组件都不会被缓存。
- 对应的方法: 不能使用mounted,因为mounted 只有加载一次的,进而要使用activated keep-alive 组件激活时调用。
  1. vue 当url 变化时候,如何重定向到指定的router
    //router.js
    {
        path: '*',
        redirect: {
          name: 'home', //或者为 path:'home'
        },
  }



12. keep-alive 和 activated 是配套的 只有keep-alive 之后才会出现的activated的生命周期的

13. 组件的按需加载


const home = resolve =>
  import ('src/views/home/home.vue' /* webpackChunkName: 'group-first' */ );
  1. 监听路由的变化
 watch: {
  $route() {
    console.info("改变");
  }
},
  1. vue 中 如何引入第三方的资源包
    查看如何在vue中引入第三方jquery,swiper等库

  2. vue的登陆拦截
    Vue 实现登录拦截

  3. 如何实现短信验证码倒计时
    vue 验证码倒计时60s

  4. vue 中如何实现边输变搜索(截流函数)
    vue 实现边输入边搜索功能

  5. 如何实现列表一边滑动一边加载数据?
    vue 列表滑动加载数据

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页