前端框架面学习笔记（三）

1.data为什么是个函数

vue组件本质是实例化，如果data不是函数，使用时会互相影响。因为是函数，相当于两个闭包，不会互相影响。

2.何时需要使用beforedestoryed

• 解绑自定义事件防止内存泄漏event.$off
• 清除定时器
• 解绑自定义dom事件，如window.scroll

3.前端路由的实现原理

目前前端路由的实现方法主要有两种方法，location.hash和window.history。

        1、通过location.hash实现前端路由

        hash就是一个url中#后面的部分，也叫做url的锚部分，锚部分在服务器端会被自动忽略，但是在浏览器中是可以通过loaction.hash来获取的。通过hash方法实现前端路由主要是用到的是onhashchange事件，这个事件可以实时监听url中hash值的变化，由此来根据hash值的变化进行一些DOM的切换操作。

　　2、通过window.history和popstate实现前端路由

        浏览器窗口会为用户提供一个history对象，用来保存用户操作页面的历史，我们在浏览网页时的前进后退操作都是基于这个对象来实现的。在前端路由的实现过程中主要用到了history对象里的history.pushState()和history.replaceState()，这两个接口。

                                        history.replaceState(dataObj,title,url);

                                        history.pushState(dataObj,title,url);

        pushState()和replaceState()方法很类似，二者均接受三个参数，分别是state、title和url。其中state用来存放将要插入的history实体的相关信息，它是一个json格式的参数；title就是传入history实体的标题，需要注意的是firefox现在会自动忽略掉这个参数；url用来传递新的history实体的相对路径，如果其值为null则表示当前要插入的history实体与前一个实体一致，没有改变。replaceState()方法与pushState()方法的唯一区别在于，replaceState()方法会将最新一条的history实体覆盖掉，而不是直接添加，这种情况在处理例如登录页面这些不需要记录到history中的情况时非常有用。

        这里需要注意的是history提供的这两个方法不会主动出发浏览器页面的刷新，只是history对象包括地址栏的内容会发生改变，当出发前进后退等history事件时才会进行相应的响应。另外，作为参数传入的url也会受到同源策略的限制，如果出现跨域等情况会导致报错。

        popstate是官方提供的事件，当history中的记录发生改变时就会触发该事件。

 4.diff算法时间复杂度O（n），在O（n∧3）基础上优化，优化方式：1.同一层级对比2.tag不同直接销毁重建3.比较tag，key判断是否同一组件，相同则不去对比减少操作。

 5.vue常见性能优化

•  v-if v-show
• computed使用，缓存机制
• v-for中使用key，避免和v-if同时使用
• 自定义事件及时销毁
• 合理使用异步组件
• keep-alive
• data不要层级太深，减少递归次数
• vue-loader预编译

6.webpack层级优化（后续更新