vue3自己的学习笔记

Vue 3 学习笔记 本文将详细介绍 Vue 3 中的新特性和变化，包括 Setup 函数、Reactive 数据、生命周期、计算属性、监听函数等等。 Setup 函数 在 Vue 3 中，Setup 函数是一个特殊的函数，它用于定义组件的初始状态和生命周期钩子函数。Setup 函数只能返回一个对象，不能返回 Promise 对象，因为模板无法读取 Promise 对象中的属性。 Reactive 数据 Vue 3 中的 Reactive 数据是通过 Proxy 实现的，它可以拦截对象中任意属性的变化，包括属性值的读写、属性的添加和删除等。 生命周期 Vue 3 中的生命周期钩子函数包括 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted 等。这些钩子函数可以在 Setup 函数中使用。 计算属性 计算属性是 Vue 3 中的一种特殊类型的数据，它可以根据依赖项自动计算出新的值。计算属性可以使用简写方式直接 return 计算结果，也可以使用完整写法 get 和 set 方法来读取和修改计算属性。 监听函数 监听函数是 Vue 3 中的一种特殊类型的函数，它可以监听数据的变化并执行相应的回调函数。监听函数可以监听单个数据，也可以监听多个数据。监听函数的配置项包括 immediate 和 deep 两个参数，immediate 确定是否立即执行回调函数，deep 确定是否深度监听对象中的变化。 watchEffect 函数 watchEffect 函数是一个特殊的监听函数，它可以自动监听回调函数中使用的数据，并重新执行回调函数。当回调函数中使用的数据变化时，watchEffect 函数会自动重新执行回调函数。 toRef 和 toRefs toRef 和 toRefs 是 Vue 3 中两个特殊的函数，toRef 函数可以将响应式对象中的某个属性单独提供给外部使用，而 toRefs 函数可以将响应式对象转换为普通对象，其中每个属性都是原始对象相应属性的 ref。 shallowReactive 和 shallowRef shallowReactive 和 shallowRef 是 Vue 3 中两个特殊的函数，shallowReactive 只处理对象最外层属性的响应式，而 shallowRef 只处理基本数据类型的响应式，不进行对象的深度响应式处理。 Vue 3 中的这些新特性和变化可以帮助开发者更方便地构建高性能和可维护的应用程序。