垂序葎草 - 博客园

2023年4月23日

摘要：视频 4.customRef 作用：创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。实现防抖效果： <template> <input type="text" v-model="keyword"> <h3>{{keyword}}</h3> </template> <script> 阅读全文

posted @ 2023-04-23 18:04 垂序葎草阅读(17) 评论(0) 推荐(0) 编辑

Vue3 toRaw与markRaw

摘要：视频 3.toRaw 与 markRaw toRaw：作用：将一个由reactive生成的响应式对象转为普通对象。使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。 markRaw：作用：标记一个对象，使其永远不会再成为响应式对象。应用场景: 有些值不应阅读全文

posted @ 2023-04-23 17:40 垂序葎草阅读(39) 评论(0) 推荐(0) 编辑

2023年4月20日

Vue3 readonly与shallowReadonly

摘要：视频 2.readonly 与 shallowReadonly readonly: 让一个响应式数据变为只读的（深只读）。 shallowReadonly：让一个响应式数据变为只读的（浅只读）。应用场景: 不希望数据被修改时。 #components ##Demo.vue <template> < 阅读全文

posted @ 2023-04-20 11:25 垂序葎草阅读(19) 评论(0) 推荐(0) 编辑

Vue3 shallowReactive与shallowRef

摘要：视频三、其它 Composition API 1.shallowReactive 与 shallowRef shallowReactive：只处理对象最外层属性的响应式（浅响应式）。 shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。什么时候使用? 如果有一个对象数据，阅读全文

posted @ 2023-04-20 11:05 垂序葎草阅读(19) 评论(0) 推荐(0) 编辑

Vue3 toRef与toRefs

摘要：视频直接用ref是创建新的对象 10.toRef 作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性。语法：const name = toRef(person,'name') 应用: 要将响应式对象中的某个属性单独提供给外部使用时。扩展：toRefs 与toRef功能一致，阅读全文

posted @ 2023-04-20 10:53 垂序葎草阅读(24) 评论(0) 推荐(0) 编辑

Vue3 自定义hook

摘要：视频 9.自定义hook函数什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。类似于vue2.x中的mixin。自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。 #components ##Demo.vue <templ 阅读全文

posted @ 2023-04-20 10:36 垂序葎草阅读(56) 评论(0) 推荐(0) 编辑

2023年4月19日

Vue3 Vue3生命周期

摘要：视频 8.生命周期 vue2.x的生命周期 vue3.0的生命周期 Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名： beforeDestroy改名为 beforeUnmount destroyed改名为 unmounted Vue3.0也提供了 Composition A 阅读全文

posted @ 2023-04-19 22:50 垂序葎草阅读(109) 评论(0) 推荐(0) 编辑

Vue3 watchEffect函数

摘要：视频 3.watchEffect函数 watch的套路是：既要指明监视的属性，也要指明监视的回调。 watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。 watchEffect有点像computed：但computed注重的计算出来的值（回调函数的返回阅读全文

posted @ 2023-04-19 22:22 垂序葎草阅读(32) 评论(0) 推荐(0) 编辑

Vue3 watch时value的问题

摘要：视频 #components ##Demo.vue <template> <h2>当前求和为：{{sum}}</h2> <button @click="sum++">点我+1</button> <hr> <h2>当前的信息为：{{msg}}</h2> <button @click="msg+='！' 阅读全文

posted @ 2023-04-19 21:46 垂序葎草阅读(59) 评论(0) 推荐(0) 编辑

Vue3 watch监视数据

摘要： watch监视ref定义的数据视频 watch监视reactive定义的数据视频 2.watch函数与Vue2.x中watch配置功能一致两个小“坑”：监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）。监视reactive定义的响应阅读全文

posted @ 2023-04-19 21:11 垂序葎草阅读(48) 评论(0) 推荐(0) 编辑