Vue小技巧 about blog

[rottenpen]

input 的 focus 与 blur（名字不怎么会取，看应用场景吧）

开发一个有下拉菜单的组件，我们可能想实现的需求是点击这个组件，弹出下拉菜单。点击组件外的地方收起下拉菜单。

<input @focus='show'></input> // 输入框
<div v-if='onshow'></div>

data () {
      return {
            onshow : false
      }
}
method:{
      show () {
          this.onshow = true
      }
}

第一反应，我们可能会想到 blur 事件。谁用谁知道，blur 事件的实用性真的很低。触发 blur 的可能太多了，包括我们点击下拉菜单，输入框也会失焦。

在这里，我们可以用到 contains 方法。如果A元素包含B元素，则返回true，否则false。

mounted () {
     document.addEventListener('click' ,(e) => {
         if (!this.$el.contains(e.target)) {
            this.onshow = false
         }
     } )
}

监听 document 的点击事件，如果该组件的根DOM元素，不包含点击事件的目标元素。则 this.onshow = false。（注意，这里的 this 是指向当前组件的实例的）

[rottenpen]

watch 对象内部属性小技巧

一个对象内，有很多属性，如果想监听对象内某个属性，第一反应可能会想到。watch这个属性。然而，vue 是不支持直接 watch 对象内部属性的。我们只能观测整个对象的变化，然后判断进行。

data () {
    obj:{
        a:1,
        b:2
    }
},
watch:{
    obj:{
        handler(curval , oldval) {
            if(curval.a === oldval.a){ 。。。}
        },
    deep: true
    }
}

这种写法，耦合混乱，阅读性也差。所以我们可以采用以下的方法：

computed: {
   obja：function(){
       return this.obj.a
   }
}
watch:{
    obja:{
        handler(curval , oldval) {
             。。。。
        }
   }
}

通过 computed 钩子，计算出代表 this.obj.a 的数据 obja ，我们就可以直接侦听 obja 属性了。

[rottenpen]

vue-cli 分析编译资源

在新版 vue-cli 里，想要分析编译出的包的内容，大小结构，只需要
npm run build --report
就能在localhost:8888 得到如
的分析

当然，还有所有 webpack 都通用的手段：

/* webpack.dev.conf */
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
devWebpackConfig.plugins.push(new BundleAnalyzerPlugin())

npm run dev 之后，就能看到上面的效果了

[rottenpen]

针对后端返回的怪异数据，在axios上做了点手脚，可以参考如下做数据拦截：

axiosIns.interceptors.response.use(function (rawResp = {data: {}}) {
  if (rawResp.data.success !== false) {
    if (rawResp.data.obj) {
      let str = JSON.stringify(rawResp.data.obj)
      let res = str.replace(/"null"/g, '"--"').replace(/"NaN"/g, '"--"').replace(/"undefined"/g, '"--"')
      // console.log(str.replace(/"null"/g, '"--"').replace(/null/g, '"--"').replace(/"NaN"/g, '"--"').replace(/NaN/g, '--').replace(/undefined/g, '--').replace(/"undefined"/g, '"--"'))
      try {
        rawResp.data.obj = JSON.parse(res)
      } catch (error) {
        // console.log(res)
        rawResp.data.obj = eval('(' + res + ')') // eslint-disable-line
        console.log('eval:', eval('(' + res + ')')) // eslint-disable-line
      }
      return rawResp
    } else {
      let str = JSON.stringify(rawResp.data)
      let res = str.replace(/"null"/g, '"--"').replace(/null/g, `'--'`).replace(/"NaN"/g, '"--"').replace(/NaN/g, '--').replace(/undefined/g, '--').replace(/"undefined"/g, '"--"')
      // console.log(str.replace(/"null"/g, '"--"').replace(/null/g, '"--"').replace(/"NaN"/g, '"--"').replace(/NaN/g, '--').replace(/undefined/g, '--').replace(/"undefined"/g, '"--"'))
      try {
        rawResp.data = JSON.parse(res)
      } catch (error) {
        console.log(res)
        rawResp.data = eval('(' + res + ')') // eslint-disable-line
        console.log(eval('(' + res + ')')) // eslint-disable-line
      }
      return rawResp
    }
  } else {
    return Promise.reject(rawResp.data.msg)
  }
}, function (error) {
  return Promise.reject(error)
})