初识vue3

2023-12-29 10:46:04

对vue3的理解

2020年9月发布的正式版
vue3支持大多数的Vue2的特性
Vue中设计了一套强大的组合APi代替了Vue2中的option API，复用性更强了
更好的支持TS
最主要：Vue3中使用了Proxy配合Reflect代替了Vue2中Object.defineProperty()方法实现数据的响应式（数据代理）
重写了虚拟DOM,速度更快了
新的组件：Fragment(片段)/ Teleport(瞬移) / Suspense(不确定)
设计了一个新的脚手架工具，vite

vue3为什么可以使用多个组件，好处是什么

在vue3中：组件可以没有根标签，内部会将多个标签包含在一个Fragment虚拟元素中
好处：减少标签层级，减少内存占用

setup

- setup中的返回值是一个对象,内部的属性和方法是给html模板使用的
- setup中的对象中的方法会和data函数中的都会像中的属性合并为组件对象的方法
- setup不能是一个async函数:因为返回值不再是return的对象,而是promise,模板看不到return对象中的属性数据
 【注意】 在Vue3中尽量不要混合的使用data和setup及methods和setup

参数：props 、context

props 是响应式的，当传入新的 prop 时，它将被更新。、

【注意】因为 props 是响应式的，你不能使用 ES6 解构，它会消除 prop 的响应性

如果需要解构 prop，可以在 setup 函数中使用 toRefs 函数来完成此操作

不确定的props属性，用toRef
const title = toRef(props,'title')

context 是一个普通的 JavaScript 对象，也就是说，它不是响应式的，这意味着你可以安全地对 context 使用 ES6 解构

// 暴露三个 property
export default {
  setup(props, context) {
    // Attribute (非响应式对象)
    console.log(context.attrs)

    // 插槽 (非响应式对象)
    console.log(context.slots)

    // 触发事件 (方法)
    console.log(context.emit)
  }
}

访问组件的 property

执行 setup 时，组件实例尚未被创建。因此，你只能访问以下 property

props
attrs
slots
emit

setup中的this

this是undefined

setup是在beforeCreate生命周期回调之前就执行了,而且就执行一次由此可以推断setup在执行的时候,当前的组件还没有创建出来,也就意味着,组件实例对象this根本就不能使用

ref

ref是一个函数：定义一个响应式的数据，返回的是一个ref对象，对中有一个value属性，如果需要对数据进行操作，需要使用ref对象调用value属性的方式进行数据操作
html模板中是不需要使用 .value写法的

一般定义一个基本类型的响应式数据,换句话说，ref 为我们的值创建了一个响应式引用

  如果用ref(对象/数组),内部会自动将对象/数组转换为reactive的代理对象
  ref内部：通过给value属性添加getter和setter来实现数据的劫持

放到标签上可以用来获取dom <p ref="aaa">得到我</p>

reactive

返回一个返回的是一个proxy代理对象
reactive内部：通过Proxy来实现对对象内部所有数据的劫持，并通过Reflect操作对象内部数据

计算属性和监听属性

computed

【注意】 vue3中没有filters，可以用computed和watch代替
两种写法

只读不能修改

 接受一个 getter 函数，并为从 getter 返回的值返回一个不变的响应式 ref 对象。

const count = ref(1)
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2

plusOne.value++ // 错误

可读可修改

使用具有 get 和 set 函数的对象来创建可写的 ref 对象。

const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: val => {
    count.value = val - 1
  }
})

plusOne.value = 1
console.log(count.value) // 0

watch

  - 三个参数
	- 1，可以直接写被监听的值，也可以是返回值的 getter 函数
	- 2, 回调函数，有旧值和新值两个参数
	- 3，一个对象（可选） {immediate: true, deep: true}

与 watchEffect 比较，watch 允许我们：

1, 懒执行副作用；
2,更具体地说明什么状态应该触发侦听器重新运行；
3,访问侦听状态变化前后的值。

监听单个数据源

const num = ref(0)
  watch(
			() => num,
      // 或者直接写 num
      // 当值为复合数据类型时这些值是响应式的，要求它有一个由值构成的副本 
      // 例：nums=reactive([1,2,3,4])    () => [...nums],
			(newValues, prevValues) => {
				console.log(newValues, prevValues)
			}
		)

监听多个数据源

const firstName = ref('');
const lastName = ref('');

watch([firstName, lastName], (newValues, prevValues) => {
  console.log(newValues, prevValues);
})

firstName.value = "John"; // logs: ["John",""] ["", ""]
lastName.value = "Smith"; // logs: ["John", "Smith"] ["John", ""]

watchEffect

const count = ref(0)

watchEffect(() => console.log(count.value))
// -> logs 0

setTimeout(() => {
  count.value++
  // -> logs 1
}, 100)

-----------副作用，停止侦听，清除副作用，副作用刷新时机，侦听器调试还不懂------------

爷孙级组件传递

provide 进行传递
	inject 进行接收

let color = ref('red')
爷组件 provide{"color":color}
孙组件 inject('color')

响应式数据判断的方法

isRef：检测一个值是否为一个ref对象
isReactive：检测一个对象是否由reactive创建的响应式代理
isReadonly：检测一个对象是否是由readonly创建的制度代理
isProxy：检查一个对象是否是由reactive或者readonly方法创建的代理

		console.log(isRef(ref()))    
		console.log(isReactive(reactive({})))
		console.log(isReadonly(readonly({})))
		console.log(isProxy(reactive({})))
		console.log(isProxy(readonly({})))

customRef

  创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数，该函数接收 track 和 trigger 函数作为参数，并且应该返回一个带有 get 和 set 的对象。

<template>
	<input type="text" v-model="keyword" />
	<h1>{{ keyword }}</h1>
</template>

<script>
import { customRef } from 'vue'
export default {
	setup() {
		// 自定义hook防抖的函数
		function useDebouncedRef(value, delay = 200) {
			// 准备一个存储定时器的id的变量
			let timeOutId
			return customRef((track, trigger) => {
				return {
					get() {
						track()
						return value
					},
					set(newValue) {
						clearTimeout(timeOutId)
						timeOutId = setTimeout(() => {
							value = newValue
							trigger()
							return value
						}, delay)
					},
				}
			})
		}
		const keyword = useDebouncedRef('a11aa', 500)

		return {
			keyword,
		}
	},
}
</script>

码农公寓