2021-08-06随记(vertical-align, 顶线、底线、中线、基线，vue原理理解)

vertical-align

父元素是inline或者是table-cel，如果是inline-block或者block则必须要设置line-height(和高度一样)子元素为inline或者inline-block才可以，vertical-align属性不继承，必须单独设置

---

顶线、底线、中线、基线

顶线：汉字的最顶部

底线：汉字的最底部

中线：英文x的中部

基线：英文x的底部

---

行高，行距，font-size,line-height

行高：两条基线之间的高度

行距：底线与下一行的顶线的距离

font-size：px指的是顶线与底线的距离，汉字正方形宽高一样，英文长方形，宽为高的一半

line-height：font-size加行距

---

vue原理理解

利用Object.defineproperty将data转换成getter,setter（object.definedProperty es5不支持，所以vue不支持ie8及以下版本），每一个vue实例都有一个watcher实例，将所有接触到的propert记录为依赖，当setter触发是会通知watcher,从而是关联的组件重新渲染

无法监听对象的增加删除，可以用set，如果是多个可以用
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
代替
Object.assign(this.someObject, { a: 1, b: 2 })

同样也无法监听到数组根据下标做的改变和数组长度的改变，可以用this.$set(arr, index, new Value)解决，也可以用arr.splice(index, 1, newValue)解决，长度改变问题同样可以用splice解决

vue不准动态添加根级响应property，必须在初始化实例前声明所有根级响应property，否则报访问不存在错误

vue异步更新队列：vue更新dom时是异步执行的，监听到数据变化，产生一个新的队列，并且缓冲同一时间循环中的所有数据更新，如果同一个watcher被多次触发，会在缓冲中进行去重，只会被推入队列中一次。在下一次’tick‘中会实际执行队列工作并更新队列，实际工作中可以用$nextTick，在dom真正刷新后触发