vue3知识点的自我总结
1. 我们对ref的错误理解
ref 经常去监听基本数据类型。
同时也可以去监听【数组】【对象】都是可以的。
ref是深度的监听。并不是大家说的那样不能去监听复杂的数据类型。
只是根据我们推荐ref去监听基本数据类型。
reactive 去监听引用数据类型。
在项目中 reactive我们使用的较多一些
2 isRef,isReactive 类型判断
//判断是否是ref类型
console.log(isRef(state));//true
//是否是reactive类型的
console.log(isReactive(state));//false
4 computed 的使用场景
判断按钮是否可以进行点击,就可以使用computed
5 watch的使用
mmediate:true 表示的是会默认执行一次watch,
这样界面初次渲染数据才能够正确的显示姓和名的拼接。
deep:true,表示的是会进行深度的监听,
当我们监听的是一个对象,对象中的任何一个值发生变化的时候。
watch就会监听到.
监听ref
const year = ref(100);
setTimeout(() => {
year.value++;
}, 1000);
watch(() => state.value, (newValue, oldValue) => {
console.log("新值:", newValue, "老值:", oldValue);
});
监听reactive
const state = reactive({ nickname: "xiaofan", age: 20 });
setTimeout(() => {
state.age++;
}, 800);
// 修改age值时会触发 watch的回调
watch(
() => state.age, //监听state中的age
(newValue, oldValue) => {
console.log("新值:", newValue, "老值:", oldValue);
}
);
监听多个值
watch(()=>[state.value, person.name ],([newAge,newName], [oldAge, oldName])=>{
console.log("年龄new:", newAge, "年龄old:", oldAge);
console.log("名称new:", newName,"年龄old:", oldName);
},);
// 如果监听多个对象,第一个函数返回一个数组,
//数组中表示监听的值 ()=>[state.value, person.name ]
// 第二个匿名函数, ([new1,new2],[old1,old2])=>{ }
停止watch的监听
// 修改age值时会触发 watch的回调
let stopWatch=watch(
() => person.name, //监听state中的age
(newValue, oldValue) => {
console.log("新值:", newValue, "老值:", oldValue);
}
);
// 停止watch监听
let cancelHander=()=>{
stopWatch()
}
什么时候运用停止watch监听了,页面销毁的时候?
感觉没有必要。因为已经销毁了。感觉有点鸡肋
6 watchEffect 的用法
需要引入watchEffect 这个方法进行监视,不需要配置immediate:true,
本身就会被默认执行一次。即使你不写监听对象也会被触发一次
需要注意:我没有监听对象,但是我回默认执行一次
watchEffect(()=>{
console.log('我没有监听对象,但是我回默认执行一次 !!');
})
7 toRefs 进行进行解构,可以实现快速展示内容 【项目中经常使用】
需要的是,不要把字段整重复了哈。
这样你不知道这个字段到底对应的哪一个字段
项目中也应该又重复的字段【或者相近的字段】
8. VUe2.0 和 Vue3.0 的生命周期作对比
beforeCreate -> 请使用 setup()
created -> 请使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
<!-- 完全发生了改变哈 -->
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured
我们发现vue3.0的生命周期执行发生在vue2.0生命周期的前面哈~
【setUp这个生命周期发生在beforeCreate和created之前的哈】【需要注意】。
两种形式的生命周期函数是可以共存,它们都会被执行。
9. ref就是复制 复制是不会影响原始数据的
如果利用ref将某一个对象中的某一个属性值变成响应式数据
我们修改响应式数据是不会影响原始数据的;
同时视图会跟新。
ref就是复制 复制是不会影响原始数据的
代码解释
let obj={name:"张三",age:22}
//将对象中的某一个属性变成响应式数据
let stateObj=ref(obj.name)
function func1(){
stateObj.value="张三变成李四";
//原始数据没有发生改变 原始数据obj {name: "张三", age: 22}
// stateObj.value ==>变成了 【张三变成李四】
}
他的运用场景在哪里???
没有运用场景的知识点是【鸡肋】~~。
10. toRef
toRef 引用, 修改响应式的数据,会影响以前的数据,界面不会更新。
代码详细讲解:
let obj={name:"张三",age:22}
// 将obj中的name变成响应式的
let state=toRef(obj, 'name');
console.log('toRef',state) // name:"张三",age:22
function func1(){
state.value="我是李四";
console.log('obj',obj) // {name:"我是李四",age:22}
console.log('state',state.value) //我是李四
}
// 视图不会跟新
return {state,func1}
这种的运用场景在哪里???
没有运用场景的知识点是【鸡肋】~~。
11 setup的两个参数
props ==》 父组件传递过来的参数
context==> 是一个对象包含 { attrs,slots,emit }
setup(props,{attrs,slots,emit}){
//直接使用emit进行事件派发
function sonHander(){
emit('sonclick','子组件传递给父组件')
}
return {sonHander}
}
12 provide和inject
provide和inject可以实现嵌套组件之间进行传递数据。
这两个函数都是在setup函数中使用的。
父级组件使用provide向下进行传递数据;
子级组件使用inject来获取上级组件传递过来的数据;
需要注意的是:
1==>provide只能够向下进行传递数据
2==>在使用provide和inject的时候需从vue中引入
let giveSunziData=ref({
with:100,
height:50,
bg:'pink'
})
// 第一个参数是是共享数据的名称(giveSunzi)
// 第二个参数是共享的数据(giveSunziData)
provide('giveSunzi',giveSunziData)
子组件 进行接受就可以了
let getFaytherData=inject('giveSunzi');
13 使用 shallowReactive 非深度监听
默认情况下,无论是通过 ref 还是 reactive 都是深度监听。
所以Vue3为我们提供了,shallowReactive进行【非深度监听】。
shallowReactive只会包装【第一层的数据】
默认情况它只能够监听数据的第一层。
如果想更改多层的数据,
你必须先更改第一层的数据。
然后在去更改其他层的数据。
这样视图上的数据才会发生变化。
// 直接更改其他层的数据,会失败的哈
// state.b.c.d1.f1.f1="f1f1f1f1"
// 先更改第一层,然后在更改其他层就会成功
state.a="啊啊啊"
state.b.c.d1.f1.f1="f1f1f1f1"
这样跟新数据确实鸡肋 2021.1.10
当处理页面上对象只有一层的时候,非常有用的哈。 2021.1.14
并不是我想得那样鸡肋,非常有用的
14 shallowRef 进行非深度监听
注意点:如果是通过shallowRef创建的数据。
那么Vue监听的是.value 变化。
并不是第一层的数据的变化。
因此如果要更改shallowRef创建的数据。
应该xxx.value={}
还有一种方法triggerRef 可以直接去更改。
shallowRef创建数据的某一层。
需要我们注意的是:vue3中值提供了triggerRef这个方法,
但是并没有提供triggerReactive的方法。
也就是说triggerRef 【不可以】去更改shallowReactive创建的数据
// 直接更改你需要修改某一层的数据
state.value.b.c.d1.f1="我是f1";
triggerRef(state)
15 readonly 深度只读
被readonly包裹的数据只能够读取。
是一个深度只读,不能够修改。
我们看一下面的代码。
我们想修改值,但是修改后视图无响应。
并且控制台警告目标为只读
let state=reactive({
name:"张三",
})
// viewSate这个数据只能够读取
// 是一个深度只读,不能够修改
let viewSate=readonly(state)
function func1(){
viewSate.name="李四"
}
16 shallowReadonly 浅只读
shallowReadonly中放了一个对象,
对象中de直接属性是不可以修改的;
如果对象下的属性下还有对象,
那么这个对象下的属性就可以修改的.
let state=reactive({
name:"张三",
info:{
h:1.90,
w:'64kg'
}
})
let viewSate=shallowReadonly(state)
function func1(){
// 修改失败
// viewSate.name="李四"
// 修改成功
viewSate.info.w="128斤"
}
17 toRaw将代理对象变成普通对象
toRaw将代理对象变成普通对象。
这个时候我们的数据已经不再是响应式的数据了。
所以修改普通对象的时候,
虽然数据发生变化了,但是视图将不会更新
但是如果修改的是响应式对象,数据是会发生改变的。
let state=reactive({
name:"张三",
age:20,
})
// toRaw将代理对象变成普通对象
let viewSate=toRaw(state)
function changeView(){
viewSate.age=40; //视图仍然是 20
console.log(state);// Proxy {name: "张三", age: 40}
console.log(viewSate);//{name: "张三", age: 40}
state.name='张三变成李四' //视图发生改变 张三变成李四
}
读音: Raw [rua]
18. 类型判断的四种方法
isRef: 检查一个值是否为一个ref对象
isReactive:检查一个对象是否是由 reactive 创建的响应式代理
isReadonly: 检查一个对象是否是由 readonly 创建的只读代理
isProxy: 检查个对象是否是由 reactive 或者 readonly 方法创建的代理
有什么用了?可能只有面试的时候会使用
19 vue中设置props参数类型
propB: [String, Number], 多个可能的类型
// 必填的字符串
propC: {
type: String,
required: true
},
// 自定义验证函数
propF: {
validator: function(value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
},
20 vue3 父组件调用子组件中的方法
<list-com ref="listRef"></list-com>
let listRef=ref()
父组件调用了子组件中的方法,并且传递了参数
listRef.value.fatherMess([{name:'杨洋'}])
21 vue2 中调用子组件的方法
this.$refs.xxx.子组件的名称(parmas)
22 vue3 子组件调用父组件的方法
setup (props,{attrs,slots,emit}) {
function getHander(){
// 不能够在使用原来的 this.$partent.xxx()这种方式了
emit('myclick','给父组件的值' )
}
return {getHander}
}
23 穿透属性的写法
.left-swp :deep(.slick-dots) {
width: 36% !important;
bottom: 20px !important;
right: 10px !important;
}
left-swp是你的父级
slick-dots 第三方都类名
24. teleport 传送门
teleport有传送的意思,读音【te li po t】[嘻嘻],
官方说:Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术,
上面这一句话是说传送到除了app之外的地方。
我们将弹窗组件移动到body下
<a-button type="primary" @click="openHander">open</a-button>
<!-- 将内容区域的代码移动到body下 -->
<teleport to='body'>
<div class="mask" v-if="showFlag">
<div>
我是内容哈哈
</div>
<a-button @click="openHander">关闭</a-button>
</div>
</teleport>
const openHander=()=>{
showFlag.value=true
}
keep-alive的使用
<router-view v-slot="{ Component }">
<!--以cache开头和page结尾的页面名称将会被缓存 -->
<keep-alive :include="/cache.*?\page/gi">
<component :is="Component" />
</keep-alive>
</router-view>
export default {
name:'cache_demo_page', // keep-alive中include属性匹配组件name.
setup() {
return{
}
}
}
keep-alive中max属性:
此外,keep-alive还有一个max属性,代表缓存组件或者页面最大数量。
一旦这个数字达到了,
在新实例被创建之前,已缓存组件中最久没有被访问的实例会被销毁掉。
会产生两个生命周期 组件被激活和组件离开
读音:
Raw [rua] 【未经加工的】 【原始的】 【擦伤处】
shallow [xia no]
vue3知识点的自我总结的更多相关文章
- JQUERY 知识点的自我总结
一.名词释义 1 .js的入口函数:要等待文档树的加载完成,并且等待所有图片.文件都加载完成之后才开始执行. 2 .jquery入口函数会等待文档树的加载完成,并不会等待图片还有文件的加载 3 .j ...
- 一个java实习生两周八次的面试经历
以前从来没有因为求职出去面试过,一直觉得面试很可怕,没想到最近两周我也成为了面霸,两周面试八次,我的找工作之路就这样开始了!大概两个星期之前,我看着自己在招聘网站上写好的简历连投出去的勇气都没有,战战 ...
- php long time(1)
好久好久没有发表新的文章了,主要是懒得在这里写,都记在记事本上,所得都是自己理解的情况下写的,如今借此闲暇记录下来,:::: ****************PHP****************** ...
- JavaScript作用域、作用域链 学习随笔
(本文是这些知识点的自我理解.写之余从头回顾,加深理解.取得更多收获之用.) 作用域(scope) 程序设计概念,通常来说,一段程序代码中所用到的名字(JS叫标识符(如变量名.函数名.属性名.参数.. ...
- 牛客网Java刷题知识点之垃圾回收算法过程、哪些内存需要回收、被标记需要清除对象的自我救赎、对象将根据存活的时间被分为:年轻代、年老代(Old Generation)、永久代、垃圾回收器的分类
不多说,直接上干货! 首先,大家要搞清楚,java里的内存是怎么分配的.详细见 牛客网Java刷题知识点之内存的划分(寄存器.本地方法区.方法区.栈内存和堆内存) 哪些内存需要回收 其实,一般是对堆内 ...
- Vue3 中有哪些值得深究的知识点?
众所周知,前端技术一直更新很快,这不 vue3 也问世这么久了,今天就来给大家分享下vue3中值得注意的知识点.喜欢的话建议收藏,点个关注! 1.createApp vue2 和 vue3 在创建实例 ...
- C#基础、基础知识点(新人自我总结,开启java学习之路)
从2016年12月29开班,开课到现在C#基础已经算是简答的学习了一点,一个为期两周的课程,或多或少对现在学的Java有着一定的帮助吧,我们先从软件入门来接触c#这门语言: 一.软件开发中的常用术语: ...
- 二阶段js 入门知识点 自我总结复习
二阶段自我总复习 1.javascript基础 : 客户端 安全性 跨平台 脚本语言 三大结构: 顺序 .选择.循环 顺序:运算符和表达式 ...
- 看了些关于rem的知识点,在这做个自我总结归纳
我们最常用的字体单位是PX和EM. 首先px: px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册) px会随着屏幕分辨率的改变而改变,但是浏览器对页 ...
随机推荐
- LuoguP7870 「Wdoi-4」兔已着陆 题解
Content 对一个栈执行如下操作: 1 l r:依次向栈里面弹入 \(l,l+1,\dots,r-1,r\). 2 k:依次从栈里面弹出 \(k\) 个数,并求出所有弹出的数的和. 数据范围:\( ...
- LuoguB2106 矩阵转置 题解
Content 给定一个 \(n\times m\) 的矩阵 \(A\),求其转置 \(A^\text T\). 数据范围:\(1\leqslant n,m\leqslant 100\). Solut ...
- 手动上下eureka上面服务
手动下eureka curl -X PUT http://eureka.xxx.xxx.com/eureka/apps/VIDEO-API/111.111.111.111:test-api:0000/ ...
- 网络编程之UDP中一个包的大小最大能多大
读书笔记:here 结论1:局域网环境下,建议将UDP数据控制在1472字节以下 一定要知道 因为链路层的传输单元(MTU)是1500字节,1500字节中并不包含链路层的首尾18个字节.1500字节是 ...
- 【LeetCode】260. Single Number III 解题报告(Python & C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 异或 字典 日期 题目地址:https://leet ...
- 【剑指Offer】数值的整数次方 解题报告(Python)
[剑指Offer]数值的整数次方 解题报告(Python) 标签(空格分隔): LeetCode 题目地址:https://www.nowcoder.com/ta/coding-interviews ...
- 本原串(hdu 2197)
本原串 题目链接 思路: 反向想将总的个数减去不符合要求的个数.我们枚举n的约数,然后把n平均分,就可以构成不符合要求的串,\(g[i]\)表示循环节长为i约数的个数\(2^i\),我们要求循环节为\ ...
- hdu 4503 湫湫系列故事——植树节(组合概率)
这是一道求组合的题.中文题面应该能看懂,废话不多说下面来说说这道题. 可以选的总组合数是Ck3 那么选到3个人的关系都相同,要么都认识,要么都不认识.可以重反面来考虑,就是求三个人的关系不都相同. 那 ...
- 机器人的舞蹈(hdu 2232)
机器人的舞蹈 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Subm ...
- Hive SQL优化思路
Hive的优化主要分为:配置优化.SQL语句优化.任务优化等方案.其中在开发过程中主要涉及到的可能是SQL优化这块. 优化的核心思想是: 减少数据量(例如分区.列剪裁) 避免数据倾斜(例如加参数.Ke ...