vue知识点杂记

目录

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

<!-- 父组件 -->
<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是插入到事件队列的头部,就是变成下一个就要做的事

新增对象属性

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/728749.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

postgressql的常用sql语句

模式 默认模式是public,可以根据业务需要,创建多个模式管理不同地区的数据(比如,public是整个湖北的数据,wh是武汉的数据,xy是襄阳的数据) --创建新模式 CREATE SCHEMA wh --模式查询 查询wh模式下的dk_info表 select max(id) FROM wh.dk_info 自增序列 --新增自增序…

同事经常让我帮忙点外卖,但总是不给钱怎么办?

在人际交往的纷繁复杂中&#xff0c;我们常常被各种琐碎的事情所困扰&#xff0c;却往往忽略了那些看似微不足道的小习惯。 事实上&#xff0c;正是这些看似不起眼的习惯&#xff0c;往往对人际关系产生着深远的影响。 其中&#xff0c;及时偿还他人帮助和借物归还便是两个极具…

【HarmonyOS】ArkTS-箭头函数

箭头函数 箭头函数是 比普通函数 更简洁 的一种函数写法 () > {}() > {// 函数体 }let 函数名 () > {// 函数体 }let 函数名 () > {// 函数体 } 函数名(实参1, 实参2)let 函数名 (形参1: 类型, 形参2: 类型) > {// 函数体 } 函数名(实参1, 实参2)let 函数名 …

变频器学习

西门子变频器 SINAMICS V20 入门级变频器 SINAMICS G120C

《Trustzone/TEE/安全-实践版》介绍

第一章&#xff1a;课程说明和准备 课程介绍和说明 资料准备 为什么使用qemu_v8环境&#xff1f; 为什么选择香橙派开发板&#xff1f; optee qemu_v8环境展示 香橙派optee环境展示 第二章&#xff1a;Qemu环境搭建 ubuntu20.04的安装(virtualboxubuntu20.04) 搭建optee qem…

利用“定时执行专家”循环执行BAT、VBS、Python脚本——含参数指定功能

目录 一、软件概述 二、VBS脚本执行设置 三、触发器设置 四、功能亮点 五、总结 在自动化办公和日常计算机任务管理中&#xff0c;定时执行脚本是一项非常重要的功能。今天&#xff0c;我将为大家带来一款名为“定时执行专家”的软件的评测&#xff0c;特别是其定时执行VB…

Unity3D学习之XLua实践——背包系统

文章目录 1 前言2 新建工程导入必要资源2.1 AB包设置2.2 C# 脚本2.3 VSCode 的环境搭建 3 面板拼凑3.1 主面板拼凑3.2 背包面板拼凑3.3 格子复合组件拼凑3.4 常用类别名准备3.5 数据准备3.5.1 图集准备3.5.2 json3.5.3 打AB包 4 Lua读取json表及准备玩家数据5 主面板逻辑6 背包…

797. 差分(acwing)

文章目录 797. 差分题目描述差分 797. 差分 题目描述 输入一个长度为 n nn 的整数序列。 接下来输入 m mm 个操作&#xff0c;每个操作包含三个整数 l,r,c, 表示将序列中 [l,r] 之间的每个数加上 c 。 请你输出进行完所有操作后的序列。 输入格式 第一行包含两个整数 n 和…

寻找旋转排序数组中的最小值[中等]

优质博文IT-BLOG-CN 一、题目 已知一个长度为n的数组&#xff0c;预先按照升序排列&#xff0c;经由1到n次 旋转 后&#xff0c;得到输入数组。例如&#xff0c;原数组nums [0,1,2,4,5,6,7]在变化后可能得到&#xff1a; 【1】若旋转4次&#xff0c;则可以得到[4,5,6,7,0,1,2…

【自然语言处理六-最重要的模型-transformer-下】

自然语言处理六-最重要的模型-transformer-下 transformer decoderMasked multi-head attentionencoder和decoder的连接部分-cross attentiondecoder的输出AT(Autoregresssive)NAT transformer decoder 今天接上一篇文章讲的encoder 自然语言处理六-最重要的模型-transformer-…

MySql分布式事务

1 seata 底层原理 Seata&#xff08;Simple Extensible Autonomous Transaction Architecture&#xff09;是一个开源的分布式事务解决方案&#xff0c;其底层原理主要基于改进的传统2PC&#xff08;Two-Phase Commit&#xff0c;两阶段提交&#xff09;协议&#xff0c;并结合…

吴恩达机器学习笔记十五 什么是导数 计算图 大型神经网络案例

假设函数 J(w)w^2&#xff0c;当 w3 时&#xff0c; J(w)3*39 当我们给w增加一个很小的量时&#xff0c;观察J(w)如何变化。 例如 w30.001&#xff0c; 则J&#xff08;w&#xff09;9.006001&#xff0c;因此当w3且增加一个变化量 ε 时&#xff0c;J(w)将会增加 6ε&#x…

Northwestern University-844计算机科学与技术/软件工程-机试指南【考研复习】

本文提到的西北大学是位于密歇根湖泊畔的西北大学。西北大学&#xff08;英语&#xff1a;Northwestern University&#xff0c;简称&#xff1a;NU&#xff09;是美国的一所著名私立研究型大学。它由九人于1851年创立&#xff0c;目标是建立一所为西北领地地区的人服务的大学。…

自动化测试_jenkins集成

时间回到此刻 你的自动化脚本已经写的差不多,已经可以实现自动化的去执行这些ui测试用例了 但是呢?结束了吗? no 少年,离结束还差得远呢! 首先我有几个问题? 此刻的你,能否做到,自动定时的执行自动化用例,能否做到执行完用例后,自动发送包含报告的邮件给相关测试人员或…

泛型 --java学习笔记

什么是泛型 定义类、接口、方法时&#xff0c;同时声明了一个或者多个类型变量&#xff08;如&#xff1a;<E>&#xff09;&#xff0c;称为泛型类、泛型接口&#xff0c;泛型方法、它们统称为泛型 可以理解为扑克牌中的癞子&#xff0c;给它什么类型它就是什么类型 如…

[Buuctf] [MRCTF2020]Transform

1.查壳 64位exe文件&#xff0c;没有壳 2.用64位IDA打开 找到主函数&#xff0c;F5查看伪代码 从后往前看&#xff0c;有一个判断语句&#xff0c;是两个数组进行比较的&#xff0c;我们双击byte_40F0E0查看里面的内容 所以能够推出byte_414040的内容&#xff0c;byte_4140…

音频库及分析软件介绍

搞音频的兄弟必须要看一下的&#xff0c;俗话说&#xff0c;工欲善其事必先利其器&#xff0c;好的音频分析软件&#xff0c;对于音频分析工程师来讲&#xff0c;可谓是非常重要的&#xff0c;下面由小编介绍一下&#xff1a;

opengl 学习(一)-----创建窗口

创建窗口 分类opengl 学习(一)-----创建窗口效果解析教程补充 分类 c opengl opengl 学习(一)-----创建窗口 demo: #include "glad/glad.h" #include "glfw3.h" #include <iostream> #include <cmath> #include <vector>using names…

数据结构与算法-线性查找

引言 在计算机科学领域&#xff0c;数据结构和算法是构建高效软件系统的核心要素。今天我们将聚焦于最基础且广泛应用的一种查找算法——线性查找&#xff0c;并探讨其原理、实现步骤以及实际应用场景。 一、什么是线性查找&#xff1f; 线性查找&#xff08;Linear Search&am…

QT6.6 android开发环境搭建

一.目标 本文目的为实现在QT6.6下搭建android开发环境&#xff0c;可以实现QT6.6开发的QT程序&#xff08;widget及qml工程&#xff09;部署到android设备中。 二.环境安装 1.QT6.6环境安装 &#xff08;1&#xff09;在线安装器下载&#xff1a; https://download.qt.io/a…