网站优化培训学校,logo网站设计素材,深圳赶集同城网站建设,怎么做自己的网站弄商城佣金书接上文#xff0c;这篇继续来学习vue3的核心语法#xff0c;可以先看上一篇再来看这篇效果更好。
1. computed
computed 用于创建 计算属性#xff0c;即基于其他响应式数据的值动态计算并缓存的属性。它的主要作用是优化性能和提高代码的可维护性#xff0c;避免不必要…书接上文这篇继续来学习vue3的核心语法可以先看上一篇再来看这篇效果更好。
1. computed
computed 用于创建 计算属性即基于其他响应式数据的值动态计算并缓存的属性。它的主要作用是优化性能和提高代码的可维护性避免不必要的重复计算。
a. 基本语法
computed 是通过 computed() 函数创建的。在 setup() 函数中你可以使用 computed 来定义计算属性。
import { computed, ref } from vue;export default {setup() {const count ref(0);const doubledCount computed(() count.value * 2);return { count, doubledCount };}
};解释
count 是一个响应式数据初始值为 0。doubledCount 是一个计算属性它依赖于 count并返回 count 的两倍。当 count 的值发生变化时doubledCount 会自动重新计算。
b. 计算属性的缓存
computed 的一个重要特性是 缓存。只有当计算属性依赖的响应式数据发生变化时computed 才会重新计算否则会直接返回上一次计算的结果。
import { computed, ref } from vue;export default {setup() {const count ref(0);// 计算属性返回 count 的平方const squaredCount computed(() {console.log(Computing squared count);return count.value * count.value;});return { count, squaredCount };}
};在上面的例子中如果你多次访问 squaredCount你会看到 “Computing squared count” 只会在 count 改变时打印一次而不会在每次访问时都打印这就是 computed 的缓存机制。
c. 使用 computed 的场景 计算派生状态当你需要基于现有的响应式数据计算新的值时computed 很有用。例如计算一个总价、折扣后价格、过滤后的列表等。 const price ref(100);
const discount ref(0.2);const discountedPrice computed(() price.value * (1 - discount.value));优化性能通过缓存计算结果computed 可以避免重复计算提升性能。 条件渲染你可以使用 computed 来做一些复杂的条件判断而不需要在模板中使用大量的 v-if。
与 watch 的对比
watch 用于观察响应式数据的变化并执行副作用操作如更新外部状态或执行异步操作。它适合处理需要副作用的场景而 computed 更适合处理计算派生状态并返回值。
import { watch, ref } from vue;const count ref(0);// 使用 watch
watch(count, (newValue) {console.log(Count changed:, newValue);
});// 使用 computed
const doubledCount computed(() count.value * 2);watch 用于监听 count 的变化并在变化时执行某个副作用。computed 用于计算并返回派生值在模板中或其他地方直接使用。 2. watch
在 Vue 3 中watch 是用于 监听响应式数据的变化 并在数据变化时执行副作用操作的 API。它特别适用于处理那些需要在数据变化时执行的逻辑例如异步请求、数据处理、或者与外部系统交互。
watch 的基本概念
监听watch 允许你监控一个或多个响应式数据的变化。副作用当被监听的数据发生变化时watch 会执行一个回调函数你可以在回调中执行任何副作用操作例如发起异步请求、更新外部状态等。深度监听watch 也可以深度监听对象或数组的变化适合用于嵌套对象或数组的更新。
a. 基本语法
watch 接受三个参数
第一个参数要观察的响应式数据或计算属性。第二个参数回调函数监听到数据变化时会调用它。第三个参数可选配置对象可以设置一些附加选项如 immediate 和 deep。
最简单的使用方式
import { ref, watch } from vue;export default {setup() {const count ref(0);// 监听 count 的变化watch(count, (newValue, oldValue) {console.log(count changed from ${oldValue} to ${newValue});});return { count };}
};解释
watch 监听 count 的变化每当 count 发生变化时会调用回调函数。回调函数接收两个参数newValue新的值和 oldValue旧的值可以在回调中执行任何副作用操作。
b. watch 的高级用法
监听多个响应式数据
你可以同时监听多个响应式数据当它们中的任意一个变化时回调都会被触发。
import { ref, watch } from vue;export default {setup() {const count ref(0);const name ref(Alice);// 同时监听 count 和 name 的变化watch([count, name], ([newCount, newName], [oldCount, oldName]) {console.log(count changed from ${oldCount} to ${newCount});console.log(name changed from ${oldName} to ${newName});});return { count, name };}
};深度监听对象或数组
默认情况下watch 只会监听对象或数组的 引用变化而不会递归监听其内部属性或元素。要实现深度监听可以使用 deep: true 配置选项。
import { ref, watch } from vue;export default {setup() {const user ref({name: Alice,age: 25});// 深度监听 user 对象的变化watch(user, (newValue, oldValue) {console.log(User changed:, newValue);}, { deep: true });return { user };}
};立即执行immediate
watch 默认在被监听的数据发生变化时才会执行回调。如果你希望在监听开始时立即执行回调可以使用 immediate: true 配置。
import { ref, watch } from vue;export default {setup() {const count ref(0);// 监听 count 的变化并立即执行回调watch(count, (newValue, oldValue) {console.log(count changed from ${oldValue} to ${newValue});}, { immediate: true });return { count };}
};执行异步操作
watch 是非常适合用于执行异步操作的。比如当某个数据变化时你可能需要去发起一个 API 请求。
import { ref, watch } from vue;export default {setup() {const searchQuery ref();// 监听 searchQuery 的变化发起一个异步操作watch(searchQuery, async (newQuery) {if (newQuery) {const results await fetch(https://api.example.com/search?q${newQuery});console.log(await results.json());}});return { searchQuery };}
};2.1 watchEffect 的使用
watchEffect 是 watch 的一个变体它会在组件挂载时立即执行并且会自动追踪作用域内所有的响应式依赖。与 watch 主要是用于监听特定数据的变化不同watchEffect 会自动检测你使用的所有响应式数据。
import { ref, watchEffect } from vue;export default {setup() {const count ref(0);// watchEffect 会自动监听 count 的变化watchEffect(() {console.log(Count has changed: ${count.value});});return { count };}
};watchEffect 和 watch 的区别
watch用于精确监听一个或多个特定的数据源并可以对变化做出响应。watchEffect自动追踪你在其作用域内使用的所有响应式数据并在数据变化时重新执行回调。
c. watch 的使用场景
监听数据变化并执行副作用例如发起 API 请求、更新外部状态等。异步操作比如在数据变化时发起一个网络请求或进行复杂的数据处理。表单验证在表单字段变化时执行验证逻辑。数据持久化监听数据变化并将数据持久化到本地存储或服务器。 3. props
props 是父组件向子组件传递数据的一种方式。通过 props父组件可以将数据或参数传递给子组件从而实现组件之间的通信。
a. 基本概念
父组件 - 子组件props 是单向数据流单向绑定的机制数据只能从父组件传递到子组件子组件不能直接修改从父组件接收的 props。类型验证Vue 允许对传递的 props 进行类型验证和默认值设置从而确保数据的正确性。
b. 基本使用
父组件
script langts setup nameAppimport Person from ./components/Person.vueimport {reactive} from vueimport {type Persons} from ./typeslet persons reactivePersons([{id:e98219e12, name:张三, age:18},{id:e98219e13, name:李四, age:19},{id:e98219e14, name:王五, age:20}])
/script子组件
script langts setup namePersonimport {defineProps} from vue// types中包含了Persons类型import {type Persons} from /types// 第一种写法仅接收// const props defineProps([list])// 第二种写法接收 限制类型// defineProps{list:Persons}()// 第三种写法接收 限制类型 指定默认值 限制必要性// list后如果加?表示可传可不传不加则必须传let props withDefaults(defineProps{list?:Persons}(),{list:()[{id:asdasg01,name:小猪佩奇,age:18}]})console.log(props)
/script通过 propsVue 提供了一种简单而高效的组件通信方式非常适合用于父子组件之间的数据传递和状态共享。 4. Hooks
什么是hook—— 本质是一个函数把setup函数中使用的Composition API进行了封装类似于vue2.x中的mixin。自定义hook的优势复用代码, 让setup中的逻辑更清楚易懂。
示例代码 useSum.ts
import {ref,onMounted} from vueexport default function(){let sum ref(0)const increment (){sum.value 1}const decrement (){sum.value - 1}onMounted((){increment()})//向外部暴露数据return {sum,increment,decrement}
} useDog.ts
import {reactive,onMounted} from vue
import axios,{AxiosError} from axiosexport default function(){let dogList reactivestring[]([])// 方法async function getDog(){try {// 发请求let {data} await axios.get(https://dog.ceo/api/breed/pembroke/images/random)// 维护数据dogList.push(data.message)} catch (error) {// 处理错误const err AxiosErrorerrorconsole.log(err.message)}}// 挂载钩子onMounted((){getDog()})//向外部暴露数据return {dogList,getDog}
}App.vue
templateh2当前求和为{{sum}}/h2button clickincrement点我1/buttonbutton clickdecrement点我-1/buttonhrimg v-for(u,index) in dogList.urlList :keyindex :src(u as string) span v-showdogList.isLoading加载中....../spanbrbutton clickgetDog再来一只狗/button
/templatescript langtsimport {defineComponent} from vueexport default defineComponent({name:App,})
/scriptscript setup langtsimport useSum from ./hooks/useSumimport useDog from ./hooks/useDoglet {sum,increment,decrement} useSum()let {dogList,getDog} useDog()
/script是的hook 可以帮助实现模块化开发尤其在 Vue 3 中结合 组合式 API (Composition API) 使用时它极大地提高了代码的可复用性和模块化程度。
分析
模块化通过将数据获取和表单处理的逻辑分别提取到 useSum 和 useDog hook 中逻辑更加清晰和模块化。复用性这两个 hook 可以在不同的组件中复用而无需重复编写相同的代码。解耦不同的功能模块如数据请求、表单验证等被清晰地分离开来组件只负责调用这些 hook减少了组件内部的复杂度。
如果你能看到这里给你点个赞如果对你有帮助的话不妨点赞支持一下~ 参考张天禹老师b站课程
