❝
你一定要好好赚钱，那样我和他才会 * 福 —— 网络圣人
❞

写代码的时候经常会神游天外，写着写着又不知道自己准备干什么来着了，这个时候我尝尝想要看一眼自己的注释（正经人谁写注释啊）。回看一眼发现，哇哦，我！@#￥#@。继上一次老板娘看到我发的《这样写离线存储，老板娘再也没有让我加过班。localForage 的使用》之后，我已经连续加了一个月的班了，哎~。乘着今天没加班，开始记录一些可能能让我少加五分钟班的小操作。emmm.......

Vue 的 watch

常规使用

watch,通常在 vue 内疯狂塞入就行了，就像这样这样这样，我要监听老板娘的年龄变化

 watch: {
    age (val, old) {

    }
  }

假装高级使用

我用上 immediate 和 deep,这样我就有火眼金睛，就算老板娘的年龄隐藏的再深，也不可能逃得过我的法眼。在这个世界，我说了算！

watch: {
    age: {
      handler (val, old) {

      },
      immediate: true,
      deep: true
    }
  }

老板还要更高级的

哇哦，看来肯定是老本控制不住 watch，不然按理说应该够用了呀。毕竟老板才是给我发工资的，老板娘算啥，我还是得支支招

export default {
  data: () => ({
    age: 18
  }),
  methods: {
    myWatch () {
      const unwatch = this.$watch('age', function (val, old) {
        console.log(val, old)

        if (val > 40) {
          unwatch && unwatch()
        }
      }, {
        immediate: true,
        deep: true
      })
    }
  },
  created () {
    setInterval(() => {
      this.age++
    }, 2000)

    this.myWatch()
  }
}
</script>

$watch方法，监听数据变化。返回的是一个可以关闭此监听的函数，执行后此监听就会被立即关闭。

vm.$watch接受三个参数，分别为被监听对象，监听触发的函数，监听配置项。

差不多可以了，交给老应衣服一下老板娘问题不大应该

其实开发中难免我们会遇到需要取消监听的这类操作，虽然在普通的watch的handler内，用条件判断是否要进行下一步操作，但总归这个handler还是一直在被执行的。这个时候倒不妨直接用vm.$watch的返回值，直接一刀切。又比如我们可以在触发的函数内直接写 unwatch && unwatch()就能做到只监听一次啦，其中妙用就看掘友们自己见仁见智啦。

Vue模板中的注释

要保留注释？

这个问题，其实大多数时候都不是问题，基本不太会碰到，但要是一不小心真碰到了，那也尴尬了，就像我说不加班的，结果加了一个月，所以还是了解下吧。

<template comments>
<!--注释注释注释-->
</template>

单文件内这样就可以保留注释了

其实vue的文档上还提到了一个东东：comments，但他不太适合单文件的样子，在实例化Vue的时候使用即可。

记得以前我在测试的时候发现在main.js实例化的时候使用了这个东东，模板中的注释还是不能展示，后来，。。。

不过这个属性现在看来貌似没有太大的意义，我超懒，权当听过了

Vue的name属性

基本作用

最基本的作用，那当然就是给组件命名啦，hhhh。配合keep-alive组件的时候，我用可以结合keep-alive的include和exclude用来做一些过滤

递归组件

递归组件，顾明思议，这个组件内调用自个儿这个组件。适合树形结构的数据

<template>
  <div class="my-self">
    <my-self v-if=""></my-self>
  </div>
</template>
<script>
export default {
  name: 'my-self'
}
</script>

注意的是v-if不能少，递归，总要让它有个盼头吧...

v-model指令

给自己的组件实现v-model

自己实现v-model，通常有事件的时候就可以很方便的这样

<template>
  <div class="input">
    <input type="text" :value="value" @input="onInput">
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String
    }
  },
  methods: {
    onInput (e) {
      this.$emit('input', e.target.value)
    }
  }
}
</script>

结合计算属性实现v-model

其实很多时候没有必要这么做，这么做可能还会造成性能的浪费。不过如果遇到这样一种情况——我们使用了某现成的组件，这个组件支持v-model，我们想要对其进行二次封装，可是它又没有提供触发value改变的方法，这个时候就可以利用计算属性的get和set中转一下v-model，就像这样：

<template>
  <div class="input">
    <input type="text" v-model="text">
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String
    }
  },
  computed: {
    text: {
      set (data) {
        this.$emit('input', data)
      },
      get () {
        return this.value
      }
    }
  }
}
</script>

本文使用 mdnice 排版

不是大佬，也得知道，Vue的一些小操作（一）