vue知识点杂记

小明 2025-05-05 07:36:46 5

目录

  • Computed 和 Watch 的区别
  • slot
  • filter过滤器
  • cookies和session
  • LocalStorage和SessionStorage
  • keep-alive
  • nextTick
  • ���增对象属性

    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使用变量，并且可以在插槽中使用这个变量）

    
      
      
        
    这是头部
    
      
      
        
    这是底部
    
      
    

        
        
          {slots.header && slots.header()}
        
        
          {slots.footer && slots.footer()}

    filter过滤器

    这里的过滤器不是数组的过滤器，是对前端的插值运算里面的一种过滤器

    用法：在插值运算中用|进行分割，左边是参数，右边是过滤器函数名，过滤器return的返回给html显示

    {{item.a | filterA}}
 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是插入到事件队列的头部，就是变成下一个就要做的事

    新增对象属性

    比如：obj = {a:1}

    这时候我执行obj.b = 2；你打印obj.b可以得到2，但是页面中却显示不出来

    这时候你就需要使用set方法，把属性放到对象中

    原因：

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

    // vue2
this.$set(this.obj, 'b', 2)
// vue3
Vue.set(obj, 'b', 2);
The End

标签：

微信