棋牌论坛网站怎么做,商业网站建设与维护方案书,网站开发技术对比,深圳网站制作公司咨询shallowReactive与shallowRef
shallow#xff1a;浅的#xff0c;和deep相反 shallowReactive#xff1a;只处理对象最外层属性的响应式 shallowRef#xff1a;只处理基本数据类型的响应式#xff0c;不进行对象的响应式处理 如果有一个对象数据#xff0c;结构比较深浅的和deep相反 shallowReactive只处理对象最外层属性的响应式 shallowRef只处理基本数据类型的响应式不进行对象的响应式处理 如果有一个对象数据结构比较深但是变化只对外层属性变化使用shallowReactive 如果有一个对象数据后序不会修改对象中的属性而是生成新的对象来替换使用shallowRef
templateh4当前的x.y值是{{ x.y }}/h4button clickx{y:888}点我替换x/buttonbutton clickx.y点我x.y/buttonhrh4{{ person }}/h4h2姓名{{ person.name }}/h2h2年龄{{ person.age }}/h2h2薪资{{ person.job.j1.salary }}K/h2button clickperson.name~修改姓名/buttonbutton clickperson.age增长年龄/buttonbutton clickperson.job.j1.salary涨薪/button
/templatescript
import {shallowReactive, shallowRef} from vueexport 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}}
}
/scriptreadonly与shallowReadonly
readonly让一个响应式数据变成只读深只读 shallowReadonly让一个响应式数据变成只读浅只读
templateh4当前求和为{{ sum }}/h4button clicksum点我/buttonhrh2姓名{{ person.name }}/h2h2年龄{{ person.age }}/h2h2薪资{{ person.job.j1.salary }}K/h2button clickperson.name~修改姓名/buttonbutton clickperson.age增长年龄/buttonbutton clickperson.job.j1.salary涨薪/button
/templatescript
import {reactive, readonly, ref, shallowReadonly} from vueexport 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}}
}
/scripttoRaw与markRaw
toRaw将一个reactive生成的响应式对象转为普通对象用于读取响应式对象对应的普通对象对这个普通对象的操作页面都不会更新。 markRaw标记一个对象使其永远不会成为响应式对象当有些值没必要设置成响应式的时候可以跳过响应式转换提高性能例如复杂的第三方类库等。
templateh4当前求和为{{ sum }}/h4button clicksum点我/buttonhrh2姓名{{ name }}/h2h2年龄{{ age }}/h2h2薪资{{ job.j1.salary }}K/h2h3 v-showperson.car座驾信息{{ person.car }}/h3button clickname~修改姓名/buttonbutton clickage增长年龄/buttonbutton clickjob.j1.salary涨薪/buttonbutton clickshowRawPerson输出最原始的person/buttonbutton clickaddCar给人添加一台车/buttonbutton clickperson.car.name!换车名/buttonbutton clickchangePrice换价格/button
/templatescript
import {markRaw, reactive, ref, toRaw, toRefs} from vueexport 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}}
}
/scriptcustomRef
自定义ref可以对ref包装的数据改动显示的进行跟踪和触发更新。 写一个效果写一个input和一个h3在input里输入内容后h3的内容等待1秒后展示。
templateinput typetext v-modelkeywordh3{{ keyword }}/h3
/templatescript
import {customRef} from vueexport 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}}
}
/scriptprovide与inject
实现祖先和后代的组件间通信祖先组件通过provide将数据提供出去后代组件通过inject注入数据。 App.vue祖先组件
templatediv idApph1我是祖先组件/h1h2{{ value }}/h2button clickvalue1点我加1/buttonChild/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;
}
/styleChild.vue子组件
templatediv idChildh1我是子组件/h1GrandChild/GrandChild/div
/template
script
import GrandChild from ./GrandChild.vue;export default {name: Child,components: {GrandChild}
}
/script
style scoped
#Child {background-color: green;padding: 10px;
}
/styleGrandChild.vue孙组件
templatediv idGrandChildh1我是孙组件/h1h1{{ 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方法创建的代理
templatediv/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
