beforeDestoryed/ destory 生命周期钩子函数，destory后组件的所有的事件监听器会被移除。注意:如果是自己在组件内部对dom增加了事件监听，组件销毁的时候需要自己手动接触自己另外添加上去的监听程序。而且组件销毁，dom元素还被保留在页面，需要手动清除，可以调用原生js api, node.remove()清除dom节点。
原生js api包括：
target.addEventListener(type, listener[, useCapture])/removeEventListener 由于这是 DOM2 规范的基本内容，几乎所有浏览器都支持这个，而且不需要特殊的跨浏览器兼容代码。
Node.contains()返回的是一个布尔值，来表示传入的节点是否为该节点的后代节点。多用于事件监听判断是否点击了目标区域。
window.scrollY 获取文档垂直方向的滚动距离。
Element.getBoundingClientRect() 返回元素的大小及其相对于视口的位置，返回一个对象，包括width/height/left/right/top/bottom。多用于计算定位。
技术点总结
组件设计的思想包括单数据流/ eventBus事件中心，核心是组件通信。
单数据流: 数据的改变是单向的，即通过props的方式，只能让父组件来修改数据，子组件不能主动修改props。这样的例子如在collapse/tab/slide组件中，让父组件来控制选中的值。单向数据流的思想让数据修改更好设计，逻辑更加清晰。
vue插件开发：什么时候用插件开发?当组件不是显式在代码中被调用，不是直接写在template中，而是通过调用Vue原型链上的方法被挂载到文档中。
比如modal模态框/toast弹窗。插件设计的基本思路是暴露一个install方法，这个方法中在vue原型链上增加一个自定义的方法X， X中引入组件a，通过Vue.extend(a)获得组件构造器Constructor, 在通过new Constructor({propsData})获得组件实例vm, 再挂载组件实例到文档中。
import modal from '../notice/modal' export default { install (vue, options) { const Construtor = vue.extend(modal) let modalVm // 保证全局只有一个modal实例 let lastOption vue.prototype.$modal = (options) => { if (lastOption !== JSON.stringify(options)) { //! modalVm modalVm = new Construtor({ propsData: options }) modalVm.$mount() document.body.append(modalVm.$el) } lastOption = JSON.stringify(options) modalVm.isVisible = true } } }
eventBus：什么时候用eventBus?当状态的变化需要多个子组件被通知。如tab组件中，当选中的值发生变化，tab-head需要感知变化让提示的短线做个动画滑到选中的标签下，tab-item需要感知变化让文字变成选中样式，tab-pane需要感知变化让选中的面板出现。
递归：在级联组件的设计中用到。类似函数fn中用setTimout(fn,millseconds)调用自己实现setInterval的递归效果。组件只要内部提供name属性，就可以递归地调用自身。允许组件模板递归地调用自身。通过提供 name 选项，便于调试，在控制台可以看到可以获得更有语义信息的组件标签。
媒体查询 &flex布局：响应式布局的原理是媒体查询和百分比布局，介于某个尺寸的时候某个类名生效;跟布局相关的大部分用到flex,非常好用。详细看
组件类型 组件 单数据流 vue插件开发 eventBus 原生js操作dom & 事件 递归 媒体查询&flex布局基础 button按钮 - - - - - -
基础 icon图标 - - - - - -
基础 grid网格 - - - - - yes
基础 layout布局 - - - - - yes
表单 input输入框 - - - - - -
表单 cascader级联选择器 yes - - - yes -
表单 form表单 - - - - - -
表单 datepicker日期选择器 - - - yes - -
导航 tab标签页 - - yes - - -
导航 step步骤调 - - - - - -
通知 toast提示 - yes - yes - -
通知 popover弹出框 - - - yes - -
通知 modal模态框 - yes - yes - -
其他 collapse折叠面板 yes - yes - - -
其他 slide轮播图 yes - - - - -
其他 sticky粘滞 - - - - - -
组件设计三要素
props：可以参考饿了么或者antd, 需要从用户的角度考虑怎么使用方便和扩展性好，一般需要校验类型和有效值，设置默认值。