大连网站备案,网站建设模版,建设盗号网站的模块,全网营销书籍目录 Computed 和 Watch 的区别slotfilter过滤器cookies和sessionLocalStorage和SessionStoragekeep-alivenextTick新增对象属性 Computed 和 Watch 的区别 缓存#xff1a;computed有缓存#xff0c;所以只有在数据和之前不一样的时候才会执行#xff1b; watch无缓存… 目录 Computed 和 Watch 的区别slotfilter过滤器cookies和sessionLocalStorage和SessionStoragekeep-alivenextTick新增对象属性 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:headerh2这是头部/h2/templatetemplate v-slot:footerp这是底部/p/template/ChildComponent!-- 子组件 --!-- 使用具名插槽 --div classheader{slots.header slots.header()}/divdiv classfooter{slots.footer slots.footer()}/divfilter过滤器
这里的过滤器不是数组的过滤器是对前端的插值运算里面的一种过滤器 用法在插值运算中用|进行分割左边是参数右边是过滤器函数名过滤器return的返回给html显示
div{{item.a | filterA}}/divfilters: {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);
