目录
- Computed 和 Watch 的区别
- slot
- filter过滤器
- cookies和session
- LocalStorage和SessionStorage
- keep-alive
- nextTick
- 新增对象属性
Computed 和 Watch 的区别
-
缓存:computed有缓存,所以只有在数据和之前不一样的时候才会执行;
watch无缓存,所以改变这个监听的数据哪怕是没有变化,也会执行回调函数; -
异步:computed不支持异步;watch支持异步监听(异步监听:也就是回调函数里有异步操作。)
原因:
因为computed是靠对比缓存的数据执行回调的,所以执行完函数后要存回缓存,所以不能异步;
但是watch只要改变就能执行,不需要等上一次watch的异步结束,所以可以异步监听) -
watch的特殊性:
watch可以设置immediate和deep两个参数
immediate可以设置为true和false,表示第一次加载组件的时候会不会执行回调;
deep表示是否开启深度监听,比如一些对象,数组等复杂数据结构,能靠deep监听具体内部数据有没有改变,比如深度监听obj,如果obj里面的某个属性变了,或者某个属性的某个属性(多层的情况)变了都会执行回调 -
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:
- 存储在浏览器中;
- 可以设置过期时间,可以是会话级别的(浏览器关闭时失效)或持久性的(指定过期时间)
- 每个域名下的浏览器对 Cookies 数量和大小都有限制,通常每个域名下的 Cookies 总大小限制在几十到几百 KB 之间。
- 可以设置为具有过期时间,并且可以设置为安全的(Secure),以防止被跨站点脚本访问。
session:
- 存储在服务器端
- 会话级别的,通常在用户关闭浏览器或长时间不活动时失效。
- 存储在服务器端,通常没有明确的大小限制,但会受到服务器内存或数据库容量的限制
- 相对于 Cookies 更安全,因为数据存储在服务器端,用户无法直接访问或修改会话数据
LocalStorage和SessionStorage
LocalStorage:
- 关闭浏览器不会消失
- 在同一个浏览器的相同源(相同协议、主机和端口)下的所有页面共享数据。
SessionStorage:
- 数据仅在当前会话(当前标签页或窗口)有效,关闭标签页或窗口后数据会被清除。
- 每个标签页或窗口拥有独立的 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);