时隔九月再次上手Vue

注意项

不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch(‘a’, newValue => this.myMethod())。因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。
任何复杂逻辑，你都应当使用计算属性

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

计算属性缓存 vs 方法计算属性会使用缓存，只有依赖的值更新后才会重新执行，方法每次执行
计算属性 vs 侦听属性

watch更加通用监听某个属性变化后对其它属性的关联处理计算属性有时会更加优雅例如计算输入行与名，得到全名

侦听属性当异步会开销较大需要设置中间状态时使用
truthy（真值）在 JavaScript 中，truthy（真值）指的是在布尔值上下文中，转换后的值为真的值。所有值都是真值，除非它们被定义为假值（即除 false、0、""、null、undefined 和 NaN 以外皆为真值）。
v-if vs v-show 同计算属性与方法类似，v-if 每次销毁重建，v-show值为真时渲染，之后只是渲染
js中 === 与 ==

=== 会比较类型, ==不会同时注意NaN,等特殊情况，详见https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Equality_comparisons_and_sameness

Vue复习

文章目录

时隔九月再次上手Vue

注意项