update vue-tips

Blog/62.vue.js-tips.md

@@ -79,6 +79,88 @@ demo:
 [https://ccforward.github.io/demos/vue-tips/select.html](https://ccforward.github.io/demos/vue-tips/select.html)
 
 
+### 私有属性
+
+如下代码
+
+```js
+data: {
+  name: 'name',
+  _name: 'name'
+},
+mounted() {
+  console.log(this.name, this._name);
+}
+```
+
+结果输出为 "name" undefined
+
+这是因为 以 _ 或者 $ 开头的属性只能 Vue 自身使用
+
+[demo](https://codepen.io/ccforward/pen/BZqrNj)
+
+## 用 debounce 延迟计算 watch 属性
+
+debounce 去抖 尤其适合在输入这种高频的操作中实时计算属性值
+
+```js
+data: {
+  text: '',
+  inputing: false 
+},
+watch: {
+  text: _.debounce(function () {
+    this.inputing = false
+  }, 1000)
+}
+```
+
+顺手写个简单的 v-debounce 指令, 如下：
+
+```js
+const debounce = (fn, delay) {
+  let timer = null
+  return function () {
+    clearTimeout(timer)
+    timer = setTimeout(_ => {
+      fn.apply(this, arguments)
+    }, delay)
+  }
+}
+
+directive.debounce = debounce
+
+function directive (el, binding) {
+  if (binding.value !== binding.oldValue) { // change debounce only if interval has changed
+    el.oninput = directive.debounce(_ => {
+      el.dispatchEvent(new Event('change'))
+    }, parseInt(binding.value) || 500)
+  }
+}
+module.exports = directive
+```
+
+Vue.js 中使用 v-debounce: 
+
+```html
+<input v-debounce="delay" v-model="text" />
+<p> {{text}} </p>
+```
+
+```js
+import debounce from './debounce.js'
+export default {
+  data () {
+    return {
+      text: 'some words',
+      delay: 500
+    }
+  },
+  directives: {debounce}
+}
+```
+
+