Vue笔记10-其它Composition API

shallowReactive与shallowRef

shallow：浅的，和deep相反
shallowReactive：只处理对象最外层属性的响应式
shallowRef：只处理基本数据类型的响应式，不进行对象的响应式处理
如果有一个对象数据，结构比较深，但是变化只对外层属性变化：使用shallowReactive
如果有一个对象数据，后序不会修改对象中的属性，而是生成新的对象来替换：使用shallowRef

<template><h4>当前的x.y值是：{{ x.y }}</h4><button @click="x={y:888}">点我替换x</button><button @click="x.y++">点我x.y++</button><hr><h4>{{ person }}</h4><h2>姓名：{{ person.name }}</h2><h2>年龄：{{ person.age }}</h2><h2>薪资：{{ person.job.j1.salary }}K</h2><button @click="person.name+='~'">修改姓名</button><button @click="person.age++">增长年龄</button><button @click="person.job.j1.salary++">涨薪</button>
</template><script>
import {shallowReactive, shallowRef} from 'vue'export default {name: 'App',setup() {//数据let person = shallowReactive({// 只考虑第一层数据的响应式，在修改salary的时候，是修改不成功的name: '张三',age: 18,job: {j1: {salary: 20}}})let x = shallowRef({y: 0});console.log('******', x)//返回一个对象（常用）return {x,person}}
}
</script>

readonly与shallowReadonly

readonly：让一个响应式数据变成只读（深只读）
shallowReadonly：让一个响应式数据变成只读（浅只读）

<template><h4>当前求和为：{{ sum }}</h4><button @click="sum++">点我++</button><hr><h2>姓名：{{ person.name }}</h2><h2>年龄：{{ person.age }}</h2><h2>薪资：{{ person.job.j1.salary }}K</h2><button @click="person.name+='~'">修改姓名</button><button @click="person.age++">增长年龄</button><button @click="person.job.j1.salary++">涨薪</button>
</template><script>
import {reactive, readonly, ref, shallowReadonly} from 'vue'export default {name: 'App',setup() {//数据let sum = ref(0)let person = reactive({name: '张三',age: 18,job: {j1: {salary: 20}}})person = readonly(person);// person里的任何东西都改不了person = shallowReadonly(person);// 浅层次的readonly，深层次的可以修改sum = readonly(sum);// sum改不了sum = shallowReadonly(sum);// sum改不了//返回一个对象（常用）return {sum,person}}
}
</script>

toRaw与markRaw

toRaw：将一个reactive生成的响应式对象转为普通对象，用于读取响应式对象对应的普通对象，对这个普通对象的操作，页面都不会更新。
markRaw：标记一个对象，使其永远不会成为响应式对象，当有些值没必要设置成响应式的时候，可以跳过响应式转换提高性能，例如复杂的第三方类库等。

<template><h4>当前求和为：{{ sum }}</h4><button @click="sum++">点我++</button><hr><h2>姓名：{{ name }}</h2><h2>年龄：{{ age }}</h2><h2>薪资：{{ job.j1.salary }}K</h2><h3 v-show="person.car">座驾信息：{{ person.car }}</h3><button @click="name+='~'">修改姓名</button><button @click="age++">增长年龄</button><button @click="job.j1.salary++">涨薪</button><button @click="showRawPerson">输出最原始的person</button><button @click="addCar">给人添加一台车</button><button @click="person.car.name+='!'">换车名</button><button @click="changePrice">换价格</button>
</template><script>
import {markRaw, reactive, ref, toRaw, toRefs} from 'vue'export default {name: 'App',setup() {//数据let sum = ref(0)let person = reactive({name: '张三',age: 18,job: {j1: {salary: 20}}});function showRawPerson() {const p = toRaw(person);p.age++;console.log(p);}function addCar() {let car = {name: '奔驰', price: 40};person.car = markRaw(car);}function changePrice() {person.car.price++;console.log(person.car.price);}//返回一个对象（常用）return {sum,person,...toRefs(person),showRawPerson,addCar,changePrice}}
}
</script>

customRef

自定义ref，可以对ref包装的数据改动，显示的进行跟踪和触发更新。
写一个效果，写一个input和一个h3，在input里输入内容后，h3的内容等待1秒后展示。

<template><input type="text" v-model="keyword"><h3>{{ keyword }}</h3>
</template><script>
import {customRef} from 'vue'export default {name: 'App',setup() {// 自定义一个myReffunction myRef(value, delay) {let timer;// 通过customRef去实现自定义return customRef((track, trigger) => {return {get() {console.log(`通过get方法读取${value}`);track();// 告诉Vue这个value值是需要被“追踪”的return value;},set(newValue) {clearTimeout(timer);timer = setTimeout(() => {value = newValue;console.log(`通过set方法设置${newValue}`);trigger();// 告诉Vue去更新界面}, delay);}}});}let keyword = myRef('hello', 1000);// 使用程序员自定义的refreturn {keyword}}
}
</script>

provide与inject

实现祖先和后代的组件间通信，祖先组件通过provide将数据提供出去，后代组件通过inject注入数据。
App.vue（祖先组件）

<template><div id="App"><h1>我是祖先组件</h1><h2>{{ value }}</h2><button @click="value+=1">点我加1</button><Child></Child></div>
</template>
<script>
import Child from "./components/Child.vue";
import {provide, ref} from "vue";export default {name: 'App',components: {Child},setup() {let value = ref(1);provide('value', value);return {value}}
}
</script>
<style scoped>
#App {background-color: red;padding: 10px;
}
</style>

Child.vue（子组件）

<template><div id="Child"><h1>我是子组件</h1><GrandChild></GrandChild></div>
</template>
<script>
import GrandChild from "./GrandChild.vue";export default {name: "Child",components: {GrandChild}
}
</script>
<style scoped>
#Child {background-color: green;padding: 10px;
}
</style>

GrandChild.vue（孙组件）

<template><div id="GrandChild"><h1>我是孙组件</h1><h1>{{ value }}</h1></div>
</template>
<script>
import {inject} from "vue";export default {name: "GrandChild",setup() {let value = inject("value");return {value}}
}
</script>
<style scoped>
#GrandChild {background-color: yellow;padding: 10px;
}
</style>

响应式数据的判断

isRef：检查一个值是否是一个ref对象
isReactive：检查一个对象是否是由reactive创建的响应式代理
isReadonly：检查一个对象是否是由readonly创建的只读代理
isProxy：检查一个对象是否是由reactive或readonly方法创建的代理

<template><div></div>
</template>
<script>
import {isProxy, isReactive, isReadonly, isRef, reactive, readonly, ref} from "vue";export default {name: 'App',setup() {let car = reactive({name:"奔驰",price:100});let sum = ref(0);let car2 = readonly(car);console.log(isRef(sum));console.log(isReactive(car));console.log(isReadonly(car2));console.log(isProxy(car));console.log(isProxy(sum));}
}
</script>