vue技巧汇总-持续更新

不一样路由的的组件复用

若是不一样路由跳转的是同一个组件，就会发现奇怪的问题，页面数据没有更新，created函数里面的方法没有执行，一般的解决的方法是采用对$route作监听，再去执行created里面的方法

• 优化

1. 给router-view绑定key

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

   若是要保证独一无二的能够再其后面加上+ +new Date()时间戳

2. 若是组件被放在<keep-alive>中的话，能够把获取新数据的方法放在activated钩子，代替原来在created、mounted钩子中获取数据的任务。

多图表resize事件复用与节流

• 随着画布大小的改变，重绘图表，那么这里就须要用到节流函数，能够采用lodash的节流throttle函数，也能够本身经过setTimeout来实现
• 开发中，有各类各样的图表，这个时候，咱们就能够将图表的建立、绘制、resize时间的绑定与解绑放到mixin中，起到复用的目的

  import Echarts from 'echarts'
  import _ from 'lodash'
  
  export default {
      computed: {
          /* 图表DOM */
          $_chartMixin_chartWrapperDom() {
          const dom = document.getElementById(this.thisDomId)
          return dom && Echarts.init(dom)
          },
  
          /** 图表resize节流，这里使用了lodash，也能够本身使用setTimout实现节流 */
          $_chartMixin_chartResize() {
          return _.throttle(() => this.$_chartMixin_chartWrapperDom.resize(), 400)
          }
      },
  
      methods: {
          /* 图表初始化 */
          $_chartMixin_initChart() {
          this.$_chartMixin_chartWrapperDom.setOption({ /* options */ })
      },
  
      mounted() {
          this.$_chartMixin_initChart()
          window.addEventListener('resize', this.$_chartMixin_chartResize)
      },
  
      destroyed() {
          window.removeEventListener('resize', this.$_chartMixin_chartResize)
      }
  }

阻止浏览器

有时候咱们输入帐号密码登陆后台系统，浏览器会弹出是否保存你的登陆信息。咱们通常会点击保存，由于下次再次登陆的时候会自动填充增长了咱们的用户体验，很好。但有时，当咱们开发某个某块（好比新增用户）时，点击新增用户按钮，显示弹框，不巧的是，在帐号，密码输入框中浏览器帮咱们填充上了。但这并非咱们想要的。因此，个人有效解决思路以下：

• 设置 <el-input/> 为只读模式
• 在 focus 事件中去掉只读模式

<el-input
  type="text"
  v-model="addData.loginName"
  readonly
  @focus="handleFocusEvent"
/>
methods: {
  // focus 的时候去掉只读
  handleFocusEvent(event) {
    event.target && event.target.removeAttribute('readonly')
  }
}

使用 <el-scrollbar> 组件

• Element 官方是没有明确提供这个组件的，可是其源码 中确实存在。关于如何使用我写了一个Demo，你能够狠狠的戳这里查看示例

父组件监听子组件生命周期

• 以created为例子，其余同样

<myInput @hook:created="handleChildCreated" :value="value" :class="class_" :style='style' :test='test' @input1="input"/>
 methods: {
    handleChildCreated (e) {
      console.log('子组件created执行完')
    }
  }