做58网站怎么赚钱吗,中山网站建设工作,凡科快图登录入口,wordpress samlshallowRef和shallowReactive
shallowRef 作用#xff1a;创建一个响应式数据#xff0c;但只对顶层属性进行响应式处理 用法 let myVar shallowRef(initialValue)特点#xff1a;只跟踪引用值变化#xff0c;不关心值内部的属性变化
案例
templatediv c…shallowRef和shallowReactive
shallowRef 作用创建一个响应式数据但只对顶层属性进行响应式处理 用法 let myVar shallowRef(initialValue)特点只跟踪引用值变化不关心值内部的属性变化
案例
templatediv classapph2求和为{{ sum }}/h2h2名字为{{ person.name }}/h2h2年龄为{{ person.age }}/h2h2汽车为{{ car }}/h2button clickchangeSumsum1/buttonbutton clickchangeName修改名字/buttonbutton clickchangeAge修改年龄/buttonbutton clickchangePerson修改整个人/buttonspan|||||/spanbutton clickchangeBrand修改品牌/buttonbutton clickchangeColor修改颜色/buttonbutton clickchangeEngine修改发动机/button!-- button clickchangeCar修改整个车/button --/div
/templatescript setup langts nameAppimport { ref,reactive,shallowRef,shallowReactive } from vuelet sum shallowRef(0)let person shallowRef({name: 小黑,age:2})let car shallowReactive({brand: 特斯拉,options: {color: 黑色,engine:v8}})function changeSum (){sum.value 1;}// 不会改变function changeName (){person.value.name 大狗;}function changeAge (){person.value.age 5;}//只能改变第一层function changePerson (){person.value {name:乐乐,age:3}}/* ********** */function changeBrand () {car.brand 宝马}function changeColor () {car.options.color 红色}function changeEngine () {car.options.engine v12}// function changeCar () {// Object.assign(car,{})// }
/scriptstyle scoped.app{background-color: #ddd;border-radius: 10px;box-shadow: 0 0 10px;padding: 10px;}button{margin:0 5px;}
/style总结
通过使用shallowRef()和shallowReactive()来绕开深度响应。浅层式API创建的状态只在其顶层是响应式的对所有深层的对象不会做任何处理避免了对每一个内部属性做响应式所带来的性能成本这使得属性的访问控制变得更快、可提升性能。
readonly与shallowReadonly
readonly 作用用于创建一个对象的深只读副本 用法 templatediv classapph2当前求和为{{ sum }}/h2h2当前sum2求和为{{ sum2 }}/h2h2当前car1为{{ car }}/h2h2当前car2为{{ car2 }}/h2button clickchangeSum点我sum1/buttonbutton clickchangeSum2点我sum21/button/div
/templatescript setup langts nameAppimport { ref, readonly, reactive,shallowReadonly } from vue;let sum ref(0)let sum2 readonly(sum)function changeSum() {sum.value 1}function changeSum2() {sum2.value 1 //sum2不可修改}
/scriptstyle scoped.app{background-color: #ddd;border-radius: 10px;box-shadow: 0 0 10px;padding: 10px;}button{margin:0 5px;}
/style特点 对象的所有嵌套属性变成只读任何尝试修改这个对象的操作都会被组织在开发模式下还会再控制台中发出警告 应用场景 创建不可变的状态快照保护全局状态或配置不被修改
shallowReadonly 作用与readonly类似但只作用于对象的顶层属性其他地方仍然可以修改 用法 templatediv classapph2当前car1为{{ car }}/h2h2当前car2为{{ car2 }}/h2button clickchangeBrand1修改car1品牌/buttonbutton clickchangeColor1修改car1颜色/buttonbutton clickchangePrice1修改car1价格/buttonbutton clickchangeBrand2修改car2品牌/buttonbutton clickchangeColor2修改car2颜色/buttonbutton clickchangePrice2修改car2价格/button/div
/templatescript setup langts nameAppimport { reactive,shallowReadonly } from vue;let car reactive({brand:奔驰,options: {color:黑色,price:100}})let car2 shallowReadonly(car)function changeBrand1() {car.brand 宝马}function changeColor1() {car.options.color 红色}function changePrice1() {car.options.price 10}function changeBrand2() {car2.brand 宝马}function changeColor2() {car2.options.color 红色}function changePrice2() {car2.options.price 10}
/scriptstyle scoped.app{background-color: #ddd;border-radius: 10px;box-shadow: 0 0 10px;padding: 10px;}button{margin:0 5px;}
/styletoRaw与markrow
toRaw 作用用于获取一个响应式对象的原始对象toRaw返回的对象不再是响应式不会触发视图更新。 何时使用 在需要将响应式对象传递给非Vue的库或外部系统时使用toRaw可以确保他们收到的是普通对象 用法使用toRaw之后 年龄不再改变 templatediv classapph2姓名{{ person.name }}/h2h2年龄{{ person2.age }}/h2button clickperson.age 1修改年龄/button/div
/templatescript setup langts nameApp
import { reactive,toRaw } from vue;let person reactive({name: 小黑,age:2
})
let person2 toRaw(person)console.log(响应式数据, person)
console.log(原始数据,person2)
/scriptstyle scoped.app{background-color: #ddd;border-radius: 10px;box-shadow: 0 0 10px;padding: 10px;}button{margin:0 5px;}
/stylemarkRaw 作用标记一个对象使其永远都不会变成响应式 何时使用 使用第三方库的时候防止错误把第三库对象变成响应式对象就可以使用markRaw 用法 templatediv classapph2汽车{{ car2 }}/h2button clickcar2.price 10修改价格/button/div
/templatescript setup langts nameApp
import { reactive,toRaw,markRaw } from vue;/* markRaw */
//添加markRaw 28行就失去作用无法改变成响应式
let car markRaw({ brand: 奔驰, price: 100 })
let car2 reactive(car)console.log(car);
console.log(car2);/scriptstyle scoped.app{background-color: #ddd;border-radius: 10px;box-shadow: 0 0 10px;padding: 10px;}button{margin:0 5px;}
/stylecustomRef的使用
作用创建一个自定义的ref并对其依赖项跟踪和更新触发进行逻辑控制
实现防抖效果useSumRef.ts)
templatediv classapph2{{ msg }}/h2input typetext v-modelmsg/div
/templatescript setup langts nameAppimport { ref,customRef } from vue//使用vue提供的默认ref定义响应式数据数据一变页面视图也更新// let msg ref(你好)//使用vue提供的customRef定义响应式数据let initValue 你好let timer:number//track跟踪、trigger触发 不加上页面效果不会改变let msg customRef((track,trigger) {return {//get何时调用——msg被读取时get() { track() //告诉vue数据很重要需要对msg进行持续关注一旦msg变化就去更新return initValue},//set何时调用——msg被修改时set(value) {clearTimeout(timer)timer setTimeout(() {// console.log(set,value);initValue valuetrigger() //通知vue数据变化了}, 1000);}}})
/scriptstyle scoped.app{background-color: #ddd;border-radius: 10px;box-shadow: 0 0 10px;padding: 10px;}button{margin:0 5px;}
/style采用hooks封装
定义hooks——useMsgRef.ts
import { customRef } from vue;export default function (initValue: string, delay: number) {//使用vue提供的customRef定义响应式数据// let initValue 你好let timer: number//track跟踪、trigger触发 不加上页面效果不会改变let msg customRef((track, trigger) {return {//get何时调用——msg被读取时get() {track() //告诉vue数据很重要需要对msg进行持续关注一旦msg变化就去更新return initValue},//set何时调用——msg被修改时set(value) {clearTimeout(timer)timer setTimeout(() {// console.log(set,value);initValue valuetrigger() //通知vue数据变化了}, delay); //延迟时间不要写死}}})//hooks必须要有返回值return { msg }
}App.vue
templatediv classapph2{{ msg }}/h2input typetext v-modelmsg/div
/templatescript setup langts nameAppimport useMsgRef from ./useMsgRef;//使用useMsgRef来定义一个响应式数据且有延迟效果let { msg } useMsgRef(小黑, 2000)/scriptstyle scoped.app{background-color: #ddd;border-radius: 10px;box-shadow: 0 0 10px;padding: 10px;}button{margin:0 5px;}
/styleTeleport
定义Teleport是一种能够将我们的组件html结构移动到指定位置的技术
App.vue
templatediv classouterh2我是App组件/h2img srchttps://img.zcool.cn/community/014b275d0a1c95a801213ec257bb95.jpg2o.jpg altbrModal//div
/templatescript setup langts nameAppimport Modal from ./Modal.vue;
/scriptstyle scoped
.outer{background-color: #ddd;border-radius: 10px;padding:5px;box-shadow: 0 0 10px;width: 500px;height: 500px;/* 添加滤镜后模块定位不再参考视口参考的是父容器了 */filter:saturate(150%);
}
img{height: 180px;object-fit: cover;
}
/stylemodal.vue
templatebutton clickisshow true展示弹窗/button!-- teleport解决添加滤镜后fix定位问题 --teleport tobodydiv classmodal v-showisshowh2我是弹窗标题/h2p我是弹窗内容/pbutton clickisshow false关闭弹窗/button/div/teleport
/templatescript setup langts nameModal
import { ref } from vue
let isshow ref(false)
/scriptstyle scoped
.modal{width: 200px;height: 150px;background-color: skyblue;border-radius: 10px;padding: 5px;box-shadow: 0 0 5px;text-align: center;position:fixed;left:50%;top: 20px;margin-left: -100px;
}
/styleSuspense
等待异步组件时渲染一些额外内容让应用有更好的用户体验使用步骤 异步引入组件使用Suspense包裹组件并配置好default和fallback
App.vue
templatediv classapph2我是App组件/h2!-- 解决异步事件如果不加下面那么Child组件不显示 --Suspensetemplate v-slot:defaultChild//template/Suspense/div
/templatescript setup langts nameAppimport { Suspense } from vueimport Child from ./Child.vue
/scriptstyle scoped
.app{border-color: #ddd;border-radius:10px;padding:10px;box-shadow: 0 0 10px;
}
/styleChild.vue
templatediv classchildh2我是Child组件/h2h3当前sum求和为{{ sum }}/h3/div
/templatescript setup langts
import { ref } from vue
import axios from axioslet sum ref(0)
let xxx await axios.get(https://api.uomg.com/api/rand.qinghua?formatjson)
console.log(xxx);
//如果要看到数据可以解构 xxx 替换成 {data{content}} log直接打印content即可/scriptstyle scoped
.child{background-color: skyblue;border-radius:10px;padding:10px;box-shadow: 0 0 10px;
}
/style全局API转移到应用对象
app.component
App.vue
templatediv classapph2我是App组件/h2Hello/Child//div
/templatescript setup langts nameAppimport Child from ./Child.vue
/scriptstyle scoped
.app{border-color: #ddd;border-radius:10px;padding:10px;box-shadow: 0 0 10px;
}
/styleChild.vue
templatediv classchildh2我是Child组件/h2h3当前sum求和为{{ sum }}/h3Hello//div
/templatescript setup langts
import { ref } from vuelet sum ref(0)/scriptstyle scoped
.child{background-color: skyblue;border-radius:10px;padding:10px;box-shadow: 0 0 10px;
}
/styleHello.vue
templateh2 stylecolor:red你好/h2
/templatescript setup langts /scriptstyle scoped/stylemain.ts
import { createApp } from vue
import App from ./App.vue
import Hello from ./Hello.vue// 创建应用
const app createApp(App)app.component(Hello, Hello)// 挂载应用
app.mount(#app)app.config
main.ts
app.config.globalProperties 添加 那么全局都可以使用
import { createApp } from vue
import App from ./App.vue
import Hello from ./Hello.vue// 创建应用
const app createApp(App)app.component(Hello, Hello)
app.config.globalProperties.x 99//这样下面x就不会爆红
declare module vue {interface ComponentCustomProperties {// $http: typeof axios// $translate: (key: string) stringx: number}
}// 挂载应用
app.mount(#app)比如Child.vue 页面就会呈现 我是Child组件99 这里x会爆红 在main.ts添加定义部分
templatediv classchildh3当前sum求和为{{ sum }}/h3Hello//div
/templatescript setup langts
import { ref } from vuelet sum ref(0)/scriptstyle scoped
.child{background-color: skyblue;border-radius:10px;padding:10px;box-shadow: 0 0 10px;
}
/styleapp.directive
main.ts
import { createApp } from vue
import App from ./App.vue
import Hello from ./Hello.vue// 创建应用
const app createApp(App)app.directive(beauty, (element, { value }) {element.innerText valueelement.style.color greenelement.style.backgroundColor yellow
})// 挂载应用
app.mount(#app)比如Child.vue 页面就会呈现 不高兴0——黄色背景绿色文字
templatediv classchildh2我是Child组件{{ x }}/h2h3当前sum求和为{{ sum }}/h3h4 v-beautysum不高兴/h4Hello//div
/templatescript setup langts
import { ref } from vuelet sum ref(0)/scriptstyle scoped
.child{background-color: skyblue;border-radius:10px;padding:10px;box-shadow: 0 0 10px;
}
/styleapp.mount
main.ts
import { createApp } from vue
import App from ./App.vue
import Hello from ./Hello.vue
import type axios from axios// 创建应用
const app createApp(App)// 挂载应用
app.mount(#app)app.unmount
main.ts 2秒钟之后 app消失在页面上
import { createApp } from vue
import App from ./App.vue
import Hello from ./Hello.vue
import type axios from axios// 创建应用
const app createApp(App)// 挂载应用
app.mount(#app)setTimeout(() {app.unmount()
}, 2000);app.use
见router那一节 安装插件
//使用路由器
app.use(router)Vue3的非兼容性改变
Vue2和Vue3区别
看vue官网Breaking Changes | Vue 3 Migration Guide (vuejs.org)
过渡类名v-enter 修改为 v-enter-from、过渡类名 v-leave 修改为 v-leave-from 。keyCode 作为 v-on 修饰符的支持。v-model 指令在组件上的使用已经被重新设计替换掉了v-bind.sync。v-if 和 v-for 在同一个元素身上使用时的优先级发生了变化。移除了 Son、 Soff 和 Sonce 实例方法。移除了过滤器 filter。移除了 $children 实例 propert。
