引用链接不知是否侵权(纯当笔记用哈 如有麻烦评论下我马上删)
1. JavaScript相关问题
1. 普通函数的this：指向它的调用者，如果没有调用者则默认指向window.
2. 箭头函数的this: 指向箭头函数定义时所处的对象，而不是箭头函数使用时所在的对象，默认使用父级的this.
3. 箭头函数中的this,首先从它的父级作用域中找，如果父级作用域还是箭头函数，再往上找，如此直至找到this的指向。
1. window对象的作用：作为Global访问变量、方法，作为document访问dom节点。
2. window对象的方法：document 文档对象、location 浏览器当前URL信息、navigator 浏览器本身信息、screen 客户端屏幕信息、history 浏览器访问历史信息
2. css相关问题
1. 原因：边距重叠：一个盒子和其子孙的边距重叠。根据规范，一个盒子如果没有上补白和上边框，那么它的上边距应该和其文档流中的第一个孩子元素的上边距重叠。
2. 解决方法：为父元素设置overflow:hidden/padding/border/position:absolute/float;或子元素设置浮动/position:absolute;
3.通信方式
4. vue相关问题
dom渲染与data更新是异步的，先进行data更新然后是dom更新；只有初始化时挂载的数据变化dom会更新，后面添加的不会，需要vm.set()或this.$set()改变才会更新。
1. 隐藏方式：v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；
2. 编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
3. 编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存,编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
4. 性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
使用场景:如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
1. beforeCreate：在实例初始化之后，数据观测和event/watcher事件配置之前调用，+loading；
2. created：在实例创建完成之后被立即调用，此时可以开始调用异步的数据渲染方法。
3. beforeMount：在挂载开始之前被调用：相关的render函数首次调用；
4. mounted：实例挂载之后调用，此时可以操作dom，终止loading；
5. beforeupdate：数据更新时调用,虚拟dom打补丁之前，可访问现有dom,手动移除事件监听器;
6. updated：数据更改导致dom重新渲染和打补丁，在这之后调用；
7. beforeUnmount（beforeDestory）：在卸载组件实例前调用；
8. unmounted（destoryed）：卸载组件实例后调用；
- 由于js直接操作dom的计算成本高，所以vue中利用JS生成名为Virtual Dom的dom副本；
- 虚拟dom是轻量的js对象，由渲染函数（render）创建；它包含三个参数：元素，具有数据、prop、attr 等的对象，以及一个数组。数组是我们传递子级的地方，子级也具有所有这些参数，然后它们也可以具有子级，依此类推，直到我们构建完整的元素树为止。(将App组件通过el挂载到真实的dom中即index.html中id='app'的元素)
app.component('自定义组件名<App/>',{
render() {
return h(
'h' + this.level,
{},
[
h('header', 'A headline'),
h(router-view, {},[]),
h('footer', 'A headline'),
],
)
},
{}全局公共的具有数据、prop、attr 等的对象
})
- 如果需要更新列表项，我们可以借助前面提到的响应性在 JavaScript 中进行。我们将更改应用至 JavaScript 副本、虚拟 DOM 中，然后在它们和实际 DOM 之间执行 diff。只有这样，我们才能对已更改的内容进行更新。虚拟 DOM 允许我们对 UI 进行高效的更新！
- diff算法的更新步骤：
- 用js对象结构（虚拟DOM）表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中
- 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异
- 把所记录的差异应用到所构建的真正的DOM树上，视图就更新了
- *Diff 算法： 仅在同级的vnode间做diff，递归地进行同级vnode的diff，最终实现整个DOM树的更新*
1. 创建store.js,Vue.use(vuex)注册；
2. state：声明需要全局管理的变量；
3. mutation：同步处理state中的数据；
4. actions：异步方法触发mutation中的方法更新数据；
5. getters：获取state中的数据；
6. module：分模块管理数据；
7. export：导出stores，引入main.js,进行全局的注册
8. 可用this.$store.state访问store中的数据；
9. 组件中使用mapState、mapGetters、mapMutations、mapActions引入store中对应模块的方法；使用commit触发mutation中的方法，dispatch触发actions中方法。
- 如何避免刷新更改store中的数据：**在App.vue中监听upload事件，在刷新时进行session的存储，刷新后取session赋值store；或重新调取接口；**
1. hash方式：监听hashchange中的变化更新对应于hash值的页面组件和对应数据；
2. history：利用HTML5中新增的pushState和replaceState,实现和hash方式类似的页面更新机制，history刷新会出现404，需要后台配置一个重定向的页面；
1. 加载渲染过程：父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
2. 子组件更新过程：父beforeUpdate->子beforeUpdate->子updated->父updated
3. 父组件更新过程：父beforeUpdate->父updated**
4. 销毁过程：父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
5.HTML相关：
1. document.queryselector('
2. <object data='/a.html'><object/>
3. <link rel='text/html' src='/a.html'>
2. <ifarme url='/a.html'><ifarme/>
6.浏览器相关
7.设计模式
8.性能优化
9.移动端的兼容性
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
div {
padding-top: env(safe-area-inset-top)或constant(safe-area-inset-top)
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
}
10.小程序相关
1. wx.login:登录获取code；
2. wx.getuserInfo(配合button)/wx.getuserProfile/wx.getuserPhone:
获取用户信息、手记号码；
3. wx.chooseImage/wx.openlocation:选择图片、打开地图；
4. wx.request/wx.requestPayment:发送普通请求、微信支付的接口；
1. wx.login授权获取code，发送后台换取openID；
2. 发送openID及相关商品信息给后台进行下单，换取签名、随机串、支付页面路径或二维码信息等；
3. 获取随机串、签名等用wx.requestPayment发起支付，返回二维码或直接跳转支付页面进行支付，取消支付需要重新下单，如此循环；
