vue实用技巧

路由缓存 keepalive

keep-alive 是 Vue 提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在 v 页面渲染完毕后不会被渲染成一个 DOM 元素。

<keep-alive>
  <router-view></router-view>
</keep-alive>

当组件在  keep-alive 内被切换时组件的 activated、deactivated 这两个生命周期钩子函数会被执行

1. 使用参数include/exclude

• include: 字符串或正则表达式。只有匹配的组件会被缓存。
• exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。

<keep-alive include="a,b">
  <router-view></router-view>
</keep-alive>
<keep-alive exclude="c">
  <router-view></router-view>
</keep-alive>

include 属性表示只有 name 属性为 a，b 的组件会被缓存，（注意是组件的名字，不是路由的名字）其它组件不会被缓存。exclude 属性表示除了 name 属性为 c 的组件不会被缓存，其它组件都会被缓存。

2. 使用$route.meta 的 keepAlive 属性

需要在 router 中设置 router 的元信息 meta

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello,
      meta: {
        keepAlive: false // 不需要缓存
      }
    },
    {
      path: '/page1',
      name: 'Page1',
      component: Page1,
      meta: {
        keepAlive: true // 需要被缓存
      }
    }
  ]
})

在 app.vue 进行区别缓存和不用缓存的页面

<div id="app">
  <router-view v-if="!$route.meta.keepAlive"></router-view>
  <keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
</div>

 【注意】需要在 router.js 里面修改 scrollBehavior 函数，否则 keep-alive 可能不生效

　scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    }else{
      return { x: 0, y: 0 };
    }
  },

ios 键盘换行变为搜索

1、input type="search"

2、input 外面套 form ,必须要有 action , action="javascript: return true"

3、表单提交阻止默认提交事件

<form action="javascript:return true" @submit.prevent="formSubmit">
  <input type="search" placeholder="请输入诉求名称" id="search" />
</form>

路由参数变化组件不更新

同一 path 的页面跳转时路由参数变化，但是组件没有对应的更新。

原因：主要是因为获取参数写在了created 或者 mounted 路由钩子函数中，路由参数变化的时候，这个生命周期不会重新执行。

解决方案1：watch 监听路由

watch: {
 // 方法1  监听路由是否变化
  '$route' (to, from) { 
    if(to.query.id !== from.query.id){
    　　this.id = to.query.id;
    　　this.init();//重新加载数据
    }
  }
}
//方法2  设置路径变化时的处理函数
watch: {
'$route': {
    handler: 'init',
    immediate: true
  }
}

解决方案2 ：为了实现这样的效果可以给 router-view 添加一个不同的 key ，这样即使是公用组件，只要 url 变化了，就一定会重新创建这个组件。

<router-view :key="$route.fullpath"></router-view>

scrollBehavior

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
  }
})

scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。

与 keepAlive 结合，如果 keepAlive 的话，保存停留的位置：

scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      if (from.meta.keepAlive) {
        from.meta.savedPosition = document.body.scrollTop
      }
      return { x: 0, y: to.meta.savedPosition || 0 }
    }
  }

参考文章：

Vue 项目里戳中你痛点的问题及解决办法（更新）

vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践

总结vue知识体系之实用技巧