1.shallowReactive 与 shallowRef:
1.shallowReactive:只是处理对象最外层属性的响应式 (浅响应式)
2.shallowRef：只处理基本类型的响应式，不进行对象的响应式处理
3.什么时候用：
1.如果有一个数据对象，结构比较深，但是只是外层的属性变化 ===>shallowReactive
2.如果有一个数据对象，后续功能不会修改对象中的属性，而是用新的对象替换===>shallowRef
//shallowReactive的用法示例
<template>
<div>
<button @click="ondel">确认</button>
<div>
<h1>我是子组件Childern</h1>
<h4>{{ y }}</h4>
<h4>{{ z }}</h4>
<h4>{{ sum }}</h4>
<h4>{{ obj.a.b.c }}</h4>
</div>
</div>
</template>
<script>
import { reactive, toRefs, shallowReactive } from "vue";
export default {
name: "App",
setup() {
//因为这里用的 shallowReactive它只能对最外层的数据做响应式此时这里的data.obj.a.b.c的值发送改变后它无法响应
let data = shallowReactive({
y: "有一个简单的问题",
z: "你说什么是爱情",
sum: "我不知道",
obj: { a: { b: {c:"我这里是4及嵌套"} } },
});
let ondel = () => {
data.obj.a.b.c = "爱我别走";
};
return {
...toRefs(data),
ondel,
};
},
};
</script>
2.readonly 与 shallowReadonly:
1.readonly:让一个响应式数据变为只读的(深读)
2.shallowReadonly：让一个响应式数据变为只读的(浅读==>就是只能读最外一层)
3.使用场景：不希望数据被修改时
export default {
setup() {
//因为使用了shallowReadonly 所有 data 中的数据只有最外一层的不能修改变为只读状态
//如果将shallowReadonly换成readonly那么data中的所有数据都是只读状态不可以修改
let data = shallowReadonly({
y: "有一个简单的问题",
z: "你说什么是爱情",
sum: "我不知道",
obj: { a: { b: {c:0} } },
});
let ondel = () => {
data.obj.a.b.c = "爱我别走";
};
return {
...toRefs(data),
ondel,
};
},
};
3.toRaw 和 markRaw:
1.toRaw作用：将一个由reactive生成的响应式对象转为普通对象
2.toRaw使用场景：用于读取响应式对象的普通对象， 对这个普通对象的所有操作，不会引起页面跟新
3.markRaw的作用：标记一个对象，使它永远不会成为一个响应式对象
4.markRaw使用场景有些值不应该被设置为响应式对象，比如复杂的第三方库等
<template>
<div>
<button @click="ondel">确认</button>
<div>
<h1>我是子组件Childern</h1>
<h4>{{ y }}</h4>
<h4>{{ z }}</h4>
<h4>{{ sum }}</h4>
<h4>{{ obj.a.b.c }}</h4>
</div>
</div>
</template>
<script>
import { reactive, toRefs, toRaw } from "vue";
export default {
setup() {
let data = reactive({
y: "有一个简单的问题",
z: "你说什么是爱情",
sum: "我不知道",
obj: { a: { b: {c:0} } },
});
let ondel = () => {
console.log(data);
//将一个响应式对象转化为一个普通对象
let p = toRaw(data)
console.log(p);
};
return {
...toRefs(data),
ondel,
};
},
};
</script>
<template>
<div>
<button @click="ondel">确认</button>
<div>
<h1>我是子组件Childern</h1>
<h4>{{ y }}</h4>
<h4>{{ z }}</h4>
<h4>{{ sum }}</h4>
<h4>{{ obj.a.b.c }}</h4>
</div>
</div>
</template>
<script>
import { reactive, toRefs, markRaw } from "vue";
export default {
setup() {
let data = reactive({
y: "有一个简单的问题",
z: "你说什么是爱情",
sum: "我不知道",
obj: { a: { b: { c: 0 } } },
});
let ondel = () => {
data.obj.a.b.c = "爱我不要走";
//将obj这个对象变为永远不会成为一个响应式对象
let obj = { a: { b: { c: 0 } } };
data.obj = markRaw(obj)
};
return {
...toRefs(data),
ondel,
};
},
};
</script>
4.provide 与 inject :
1.作用：实现祖父组件传孙子组件
2.祖父使用provide来传递数据 孙子使用inject来接收参数
//在祖父组件中
setup() {
let data = reactive({
y: "有一个简单的问题",
z: "你说什么是爱情",
sum: "我不知道",
obj: { a: { b: { c: 0 } } },
});
//使用provide传递数据
provide("data", data);
let ondel = () => {};
return {
...toRefs(data),
ondel,
};
}
//在孙组件中
import { inject ,toRefs} from "vue";
export default {
setup() {
//使用inject来接收数据 接收过来的数据就是响应式数据
const data = inject("data");
return {...toRefs(data)}
},
};
5.响应式数据判断
1.isRef:检查一个值是否为一个ref对象
2.isReactive：检查一个对象是否由 reactive创建的响应式代理
3.isReadonly ：检查一个对象是否由 reactive创建的只读代理
4.isProxy：检查一个对象是否由reactive或者readonly方法创建的代理
//写法示例
import { reactive, isReactive } from "vue";
export default {
setup() {
let data = reactive({
y: "有一个简单的问题",
z: "你说什么是爱情",
sum: "我不知道",
obj: { a: { b: { c: 0 } } },
});
//使用isReactive 检查data 是否是reactive创建的响应式代理 打印结果为 true
console.log(isReactive(data));
return {
...toRefs(data),
ondel,
};
},
};
6.Teleport标签: 是一种能够将我们的组件html结构移动到指定位置的技术
使用方法：用Teleport标签把需要传送的结构包裹起来在标签上添加一个to属性to后面给要传送到的地方比如下面：
//把teleport标签内的结构传送到body外面去 不管这个结构的位置多深都会传送到body位置
<teleport to="body">.........</teleport>
