上一周开始做 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将文字居左。