vue知识点杂记

更新日志

2024/3/9

• 修改：新增对象属性的内容只适用于vue2；

Computed 和 Watch 的区别

1. 缓存：computed有缓存，所以只有在数据和之前不一样的时候才会执行；
   watch无缓存，所以改变这个监听的数据哪怕是没有变化，也会执行回调函数；

2. 异步：computed不支持异步；watch支持异步监听（异步监听：也就是回调函数里有异步操作。）
   原因：
   因为computed是靠对比缓存的数据执行回调的，所以执行完函数后要存回缓存，所以不能异步；
   但是watch只要改变就能执行，不需要等上一次watch的异步结束，所以可以异步监听）

3. watch的特殊性：
   watch可以设置immediate和deep两个参数
   immediate可以设置为true和false，表示第一次加载组件的时候会不会执行回调；
   deep表示是否开启深度监听，比如一些对象，数组等复杂数据结构，能靠deep监听具体内部数据有没有改变，比如深度监听obj，如果obj里面的某个属性变了，或者某个属性的某个属性（多层的情况）变了都会执行回调

4. computed的特殊性：computed可以自动监听函数的依赖项是否与缓存有变化然后进行回调；

slot

slot也就是插槽，有三类，默认插槽（父组件给子组件传递的时候不加v-slot），具名插槽（如下代码所示），作用域插槽（v-slot使用变量，并且可以在插槽中使用这个变量）

<!-- 父组件 -->
<ChildComponent>
      <!-- 使用具名插槽 -->
      <template v-slot:header>
        <h2>这是头部</h2>
      </template>
      <template v-slot:footer>
        <p>这是底部</p>
      </template>
    </ChildComponent>

<!-- 子组件 -->
        <!-- 使用具名插槽 -->
        <div class="header">
          {slots.header && slots.header()}
        </div>
        <div class="footer">
          {slots.footer && slots.footer()}
        </div>

filter过滤器

这里的过滤器不是数组的过滤器，是对前端的插值运算里面的一种过滤器
用法：在插值运算中用|进行分割，左边是参数，右边是过滤器函数名，过滤器return的返回给html显示

<div>{{item.a | filterA}}</div>

 filters: {
    filterA (num) {
      return num? (num * 5 + '...') : '--'
    }
  }

cookies和session

cookies：

1. 存储在浏览器中；
2. 可以设置过期时间，可以是会话级别的（浏览器关闭时失效）或持久性的（指定过期时间）
3. 每个域名下的浏览器对 Cookies 数量和大小都有限制，通常每个域名下的 Cookies 总大小限制在几十到几百 KB 之间。
4. 可以设置为具有过期时间，并且可以设置为安全的（Secure），以防止被跨站点脚本访问。

session:

1. 存储在服务器端
2. 会话级别的，通常在用户关闭浏览器或长时间不活动时失效。
3. 存储在服务器端，通常没有明确的大小限制，但会受到服务器内存或数据库容量的限制
4. 相对于 Cookies 更安全，因为数据存储在服务器端，用户无法直接访问或修改会话数据

LocalStorage和SessionStorage

LocalStorage：

1. 关闭浏览器不会消失
2. 在同一个浏览器的相同源（相同协议、主机和端口）下的所有页面共享数据。

SessionStorage：

1. 数据仅在当前会话（当前标签页或窗口）有效，关闭标签页或窗口后数据会被清除。
2. 每个标签页或窗口拥有独立的 SessionStorage 存储空间，不同标签页或窗口之间的数据不共享。

keep-alive

用来缓存动态组件，以防重新渲染；一般在需要频繁切换的两个组件中使用
keep-alive有以下三个属性：
● include 字符串或正则表达式，只有名称匹配的组件会被匹配；
● exclude 字符串或正则表达式，任何名称匹配的组件都不会被缓存；
● max 数字，最多可以缓存多少组件实例。

采用LRU策略
● 新数据插入到链表头部
● 每当缓存命中（即缓存数据被访问），则将数据移到链表头部
● 链表满的时候，将链表尾部的数据丢弃。

nextTick

和setTimeout时间给0差不多，但是setTimeout是插入到事件队列中（等到微任务做完才执行），而nextTick是插入到事件队列的头部，就是变成下一个就要做的事

vue2新增对象属性

比如：obj = {a:1}
这时候我执行obj.b = 2；你打印obj.b可以得到2，但是页面中却显示不出来
这时候你就需要使用set方法，把属性放到对象中

原因：
页面能渲染出来的一定是响应式数据，但是一开始这个属性不属于响应式的，所以前端渲染不出来；

// vue2
this.$set(this.obj, 'b', 2)
// 或
Vue.set(obj, 'b', 2);