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

❝

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

❞

写代码的时候常常会神游天外，写着写着又不知道本身准备干什么来着了，这个时候我尝尝想要看一眼本身的注释（正经人谁写注释啊）。回看一眼发现，哇哦，我！@#￥#@。继上一次老板娘看到我发的《这样写离线存储，老板娘再也没有让我加过班。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 排版