【无标题】 - 技术栈

2024-8-20 打卡第十三天学习视频链接

vue2和vue3的区别

重构了响应式 Object.defineProperty -> proxy 不需要另外使用set进行触发
composition api 函数式编程 hooks Vueuse
VDOM diff 从双端比较 -> 最长递增子序列
flow -> ts
tree shaking 方便快速压缩
template compiler

composition api

vue2低成本，没有规范限制，耦合数据越多越难保证唯一性
composition api解决optional api的问题。逻辑代码的封装性
vue2 watch computed methods
hooks refs reactive

视频先过到这里，有一些跳过的因为不了解感觉强行做笔记没有用，下面整理一些面试题目和答案，也是给自己过一遍，不是标准答案，主观意识较强，仅供参考。

vue的双向绑定原理是什么？里面的关键点在哪里？

答：双向绑定在vue2中基于Object.defineProxy，在vue3中基于Proxy，关键点在于数据劫持，即拦截数据的读取和修改进行拦截，在数据更新时自动更新视图。

实现水平垂直居中的方法

flex布局中，justify-content设置主轴水平居中，默认为row，所以设置的是水平居中，align-items设置交叉轴居中，即和主轴垂直的另一条轴，在主轴是row的情况下，交叉轴为纵轴，设置垂直居中，两个一起使用就能达到水平垂直居中的效果
<style> .parent{ display: flex; justify-content: center; align-items: center; width: 100px; height: 100px; background-color: gray; } .child{ width: 50px; height: 50px; background-color: red; } </style>
transform相对margin性能上更好一些，因为margin会导致页面的重绘和重排，而transform是合成属性，会创建一个独立的复合层，发生变化的时候在GPU上进行处理，改变时只需要重新复合，相对原始的重绘重排性能优化了很多
<style> .test{ position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; background-color: gray; transform: translateY(-50%) translateX(-50%); } </style>
Grid布局，其中place-items和flex布局中的justify-content:center以及align-items:center有相同的作用
<style> .parent{ display: grid; place-items: center; height: 100vh; } .child{ width: 100px; height: 100px; background-color: gray; } </style>
使用绝对值和负边距，针对已知的尺寸，就是margin-top和margin-left都不能设置为百分比，而是要知道这个容器宽高的情况下，设置为宽高的一半，比如width是200px，而margin-left就设置为-100px，如果width设置为300px，margin-left就设置为150px
<style> .parent{ position: relative; height: 100vh; } .child{ position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; margin-top: -100px; margin-left: -100px; background-color: gray; } </style>
使用margin:auto和绝对定位，这种方法仅适用于块元素，并且仅当父元素使用相对定位时，子元素使用绝对定位和margin:auto可以实现垂直和水平居中，记得top,bottom,left,right都要设置为0才能实现margin:auto的定位
<style> .parent{ position: relative; height: 100vh; } .child{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 200px; height: 200px; margin: auto; background-color: gray; } </style>

常用伪元素

常用的伪元素有before和after

<style>
    li{
      list-style: none;
    }
    .arrow-list li::before{
      content: "->";
      margin-right: 5px;
    }
    .arrow-list li::after{
      content: "·";
      margin-right: 5px;
    }

</style>
<ul class="arrow-list">
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
</ul>

组件通信分类

父子组件：
- 父->子，通过父组件自定义属性props传递给子组件，在子组件中通过props接收数据，注意props是单向绑定的，只能由父组件传递给子组件
- 子->父，通过this.$emit触发自定义事件，传递事件作为参数，父组件中监听这个自定义事件，并在处理函数中接收数据
- 非父子组件：
  - 全局事件总线Bus
    - 通过创建一个空的vue实例作为全局事件总线，实现任意组件间的通信，创建一个vue实例并挂载到原型上，然后在任何组件中可以通过this. $bus.$ emit触发事件和this.$bus.%on监听事件来实现通信
  - vuex
    - 在vuex中，所有组件共享同一个状态树store，组件通过提交mutations改变状态，通过getters获取状态
  - provide/inject 主要用于高阶插件/组件库的开发
    - 祖先组件通过provide提供数据或者方法，后代组件通过inject接收数据

Vue中computed特点

支持缓存
依赖的数据发生变化时computed里的属性才会发生改变

Vuex的结构

state：存放全局对象
getter：获得state中的数据
mutation：同步加工state中的数据，类似computed
action：异步处理数据
module：模块化管理，允许将单一store拆分为多个store且保存在单一的状态树中

箭头函数和普通函数的区别

箭头函数没有构造体，不能构造，即不能通过new创建，this指向上一层，不能使用apply()和call()改变this，没有arguments，而使用react参数

本地存储有哪一些，他们三者有什么区别

常见的本地存储有cookie，localStorage和sessionStorage

存储有效时间：
- cookie的有效期可以设置，失效时间取决于设置时间。
- sessionStorage有效期仅保存在当前会话中，即当前浏览器标签打开时有效，关闭后就会失效。