上一周开始做 Vue 的项目，于是重新复习了下相关的知识，并对知识点做一个整理。供自己加深记忆与理解。
侦听器 watch
使用场景
当需要在数据变化时执行异步或开销较大的操作时，如 Ajax 获取数据
- handler回调:侦听的属性值变化的时候执行的回调。
watch: {
obj: {
handler: function(newVal, oldVal) {
console.log(newVal);
},
deep: true,
immediate: true
}
}
- deep:设置为 true 用于监听对象内部值的变化
- immediate:设置为 true 将立即以表达式的当前值触发回调
侦听器watch与计算属性computed的区别
- watch：监测的是属性值， 只要属性值发生变化，其都会触发执行回调函数来执行一系列操作。可以执行异步任务。
- computed：监测的是依赖值，依赖值不变的情况下其会直接读取缓存进行复用，变化的情况下才会重新计算。计算属性不能执行异步任务
计算属性与方法的区别
computed 是可以缓存的，只有依赖的值没有发生改变，多次访问计算属性得到的值是之前缓存的计算结果，不会多次执行，methods 不能缓存
关于组件需要特别注意的点
组件的命名中划线形式
child-component，因为不区分大小写
生命周期
Vue生命周期经历哪些阶段：
总体来说：初始化、运行中、销毁
详细来说：开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程.
-
BeforeCreated：此时vue（组件）对象被创建了，但是vue对象的属性还没有绑定，如 data 属性，computed 属性还没有绑定，即没值。数据都没有，当然更不可能有真实 Dom 了 -
Created：data，computed都执行了。属性已经赋值，但没有动态创建template属性对应的HTML元素，$el属性还不存在。所以，此如果更改数据不会触发updated函数 -
beforeMonut:此时 this.$el有值，但是数据还没有挂载到页面上。 -
Monuted:此时已经把数据挂载到了页面上,一般来说，我们在此处发送异步请求（ajax，fetch，axios等），获取服务器上的数据，示在DOM里 -
beforeUpdate:数据更新了，但是，vue（组件）对象对应的dom中的内部（innerHTML）没有变，所以叫作组件更新前 -
updated:vue（组件）对象对应的dom中的内部（innerHTML）改变了 -
activated：keep-alive组件激活时调用 -
deactivated：keep-alive组件停用时调用 -
beforeDestroy：vue（组件）对象销毁之前 -
destroyed：vue组件销毁后
关于样式
自己写 css 算是自己薄弱的地方，很需要加强。今天遇到的一点问题是如何将表单前面文字的对齐。最后采用的办法是在文字部分包裹一个 label，使用display:inline-block将 label 变成行内块元素，再设置固定宽度，设置text-align:right将文字居左。
