vue3学习笔记

1.创建一个vue3项目

1.创建vue cli

npm install -g @vue/cli

2.创建项目

npm create <项目名称>

开始敲代码啦！！！

1.引用组件

只需要import就可以了，因为使用了setup之后引用了就会被自动成为子组件了。

2.声明数据

ref和reactive

	ref	reactive
内部工作原理	ref 是一个函数，它接受一个内部值并返回一个响应式且可变的引用对象。这个引用对象有一个 .value 属性，该属性指向内部值。	reactive 是一个函数，它接受一个对象并返回该对象的响应式代理，也就是 Proxy。
核心	返回的是响应式且可变的引用对象	返回的是响应式代理
	由于两者的本质上的核心区别，导致ref优于reactive
声明数据的响应式状态上，底层原理	ref 采用 RefImpl对象实例	reactive采用Proxy代理对象。
代码实现	import { ref } from 'vue' const state = ref({ count: 0 }) state.value.count++	import { reactive } from 'vue' const state = reactive({ count: 0 }) state.count++
源码	// 深响应式 export function ref(value?: unknown) { return createRef(value, false) } // 浅响应式 export function shallowRef(value?: unknown) { return createRef(value, true) } function createRef(rawValue: unknown, shallow: boolean) { // 如果传入的值已经是一个 ref，则直接返回它 if (isRef(rawValue)) { return rawValue } // 否则，创建一个新的 RefImpl 实例 return new RefImpl(rawValue, shallow) } class RefImpl<T> { // 存储响应式的值。我们追踪和更新的就是_value。（这个是重点） private _value: T // 用于存储原始值，即未经任何响应式处理的值。（用于对比的，这块的内容可以不看） private _rawValue: T // 用于依赖跟踪的 Dep 类实例 public dep?: Dep = undefined // 一个标记，表示这是一个 ref 实例 public readonly __v_isRef = true constructor( value: T, public readonly __v_isShallow: boolean, ) { // 如果是浅响应式，直接使用原始值，否则转换为非响应式原始值 this._rawValue = __v_isShallow ? value : toRaw(value) // 如果是浅响应式，直接使用原始值，否则转换为响应式值 this._value = __v_isShallow ? value : toReactive(value) // toRaw 用于将响应式引用转换回原始值 // toReactive 函数用于将传入的值转换为响应式对象。对于基本数据类型，toReactive 直接返回原始值。 // 对于对象和数组，toReactive 内部会调用 reactive 来创建一个响应式代理。 // 因此，对于 ref 来说，基本数据类型的值会被 RefImpl 直接包装，而对象和数组 // 会被 reactive 转换为响应式代理，最后也会被 RefImpl 包装。 // 这样，无论是哪种类型的数据，ref 都可以提供响应式的 value 属性， // 使得数据变化可以被 Vue 正确追踪和更新。 // export const toReactive = (value) => isObject(value) ? reactive(value) : value } get value() { // 追踪依赖，这样当 ref 的值发生变化时，依赖这个 ref 的组件或副作用函数可以重新运行。 trackRefValue(this) // 返回存储的响应式值 return this._value } set value(newVal) { // 判断是否应该使用新值的直接形式（浅响应式或只读） const useDirectValue = this.__v_isShallow || isShallow(newVal) || isReadonly(newVal) // 如果需要，将新值转换为非响应式原始值 newVal = useDirectValue ? newVal : toRaw(newVal) // 如果新值与旧值不同，更新 _rawValue 和 _value if (hasChanged(newVal, this._rawValue)) { this._rawValue = newVal this._value = useDirectValue ? newVal : toReactive(newVal) // 触发依赖更新 triggerRefValue(this, DirtyLevels.Dirty, newVal) } } }	function reactive(target) { if (target && target.__v_isReactive) { return target } return createReactiveObject( target, false, mutableHandlers, mutableCollectionHandlers, reactiveMap ) } function createReactiveObject( target, isReadonly, baseHandlers, collectionHandlers, proxyMap ) { if (!isObject(target)) { return target } const existingProxy = proxyMap.get(target) if (existingProxy) { return existingProxy } const proxy = new Proxy(target, baseHandlers) proxyMap.set(target, proxy) return proxy }
源码解释	在上述代码中，ref 函数通过 new RefImpl(value) 创建了一个新的 RefImpl 实例。这个实例包含 getter 和 setter，分别用于追踪依赖和触发更新。使用 ref 可以声明任何数据类型的响应式状态，包括对象和数组。	reactive 通过 new Proxy(target, baseHandlers) 创建了一个代理。这个代理会拦截对目标对象的操作，从而实现响应式。
对比		有局限性：仅对引用数据类型有效

 7.computed：计算属性

8.watch：侦听器

import { reactive } from 'vue'

const state = reactive({ count: 0 })
state.count++