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直接属性是不可以修改的；
如果对象下的属性下还有对象,
那么这个对象下的属性就可以修改的.
