[TOC]

父组件中的数据变化了是会动态更新到子组件的props上的，但是如果你在子组件的data中又定义了个变量引用了props中的值，这个子组件中的data变量是不会跟着props动态更新的。

解决办法就是子组件中使用watch跟踪下props中的变量。

[TOC]

多行超出添加省略号的css代码：

1
2
3
4

display: -webkit-box;
-webkit-box-orient: vertical; 
-webkit-line-clamp: 3; 
overflow: hidden;

vue项目中经过webpack打包后，发现样式没有生效，在浏览器调试模式下，发现-webkit-box-orient: vertical;该属性消失了。

[TOC]

历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。

下面比较现有的三种模块化编程方案：

• CommonJS
• AMD
• ES6

[TOC]

[TOC]

vue中的key是DOM更新时识别是否复用的标志，如果key一样则认为该DOM可以复用。如果key加在组件上是可以使得该组件的每个副本都有自己的生命周期，如在组件上有v-for：

1

<componentA v-for="item in items" :key="item.id"></componentA>

如果不加上key的话那这些循环出来的组是共用一个生命周期的，可能会产生干扰。

[TOC]

vue官方说：

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

[TOC]

[TOC]

使用el-table做一个表格，当表头内容过长时会换行，在不设置的宽度的时候每一列的宽度是等比例分配的，虽然element-ui中提供了width和min-width这个属性可以自由设置。

但是因为要做的表格很多，而且要一一计算比例然后再赋值给width也是一件很繁琐的事。

[TOC]

在用echarts折线图的时候，一开始往echarts的series中输入的是6条数据，然后动态更新数据后，往echarts的series中输入的是3条数据，重新setOption后发现图表上还是6条数据。

接着开始console.log，发现确实只有3条数据的值，说明值已变更但是图表没有更新

[TOC]

今天在使用某个对象obj的数据控制table的列动态显示的时候，无论obj怎么变化，表格都不会动态更新。找大佬查了半天，发现是数据响应式的问题，在vue官方文档中还特别提过这个坑，还是要多看看文档的。
https://cn.vuejs.org/v2/guide/reactivity.html