面试题

小程序
备注： 基于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 列表滑动加载数据