不是大佬，也得知道，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 排版