认知vue系列1

对MVVM的理解

1. 萌芽于WPF，WPF基于Windows的用户界面
2. 最早的MVVM框架–KO(knockout)，可以和jQuery兼容
3. 由三部分组成：model(模型层)、view(视图层)、viewmodel(暴露view层的数据，处理具体的业务逻辑)

MVVM优缺点

1. 解放双手(数据变化，不需要在频繁的操作dom)
2. view层和model层代码分离，降低了耦合
3. 缺点是对bug的排查达不到及时性，遇到bug时，不能立即判断bug是出自view层还是model层

computed和watch

1. computed自带缓存机制，在经过getter之后，会对属性值进行缓存，当下次属性值没有发生改变时，不会再次执行，适用于计算比较频繁的场景
2. watch没有缓存机制，进入页面就会执行，可以用来监控某一属性值的变化

vue优雅的监听组件的生命周期

<child @hook:mounted='doSomeThing' @hook:updated='doSomeThing'></child>

vue优雅的卸载绑定事件

window.addEventListener('resize', doSomeThing)
this.$on('hook:destroyed', () => {
  window.removeEventListener('resize', doSomeThing)
})

watch页面初始化时，立即执行

watch: {
  list: {
    handler: 'fetchList',
    immediate: true
  }
}

// 上述写法等价于下面这种
created() {
  this.fetchList()
}
watch: {
  list: 'fetchList'
}