master

分支 (1)

管理

管理

master

big-front-end
/
vue3x新特性总结简易版.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue3x新特性总结简易版</title>
	</head>
	<body>
		1、ref函数：一般用于定义基本数据类型响应式数据、如果是引用类型内部求助了reactive；
		2、reactive函数：定义一个对象类型的响应式数据；
		3、setup函数：在beforeCreate之前执行一次，this是undefined，2个参数：props、context（attrs、slots、emit）；
		4、watchEffect函数：不用指明监视哪个属性，监视的回调中用到哪个属性，就监视哪个属性，没有惰性初始化会执行一次；
		5、生命周期：没有beforeCreate和created，beforeDestroy改名为onbeforeUnmount、destroyed改名为onunmounted，其他前面都加on；
		6、自定义hook函数，类似于vue2.x中的mixin；
		7、toRef和toRefs：只用于reactive代理的对象
		-- toRef直接将其中某个属性value值直接提供给模板使用：return {name: toRef(Person,'name' )};
		-- toRefs批量提取，用的最多，一般配合扩展运算符使用：return {...toRefs(Person)};
		8、shallowReactive 与 shallowRef：
		-- shallowReactive：只处理对象最外层属性的响应式（浅响应式）
		-- shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理
		9、readonly 与 shallowReadonly：
		-- 应用场景: 不希望数据被修改
		-- readonly: 让一个响应式数据变为只读的（深只读）
		-- shallowReadonly：让一个响应式数据变为只读的（浅只读）
		10、toRaw 与 markRaw：
		-- toRaw：将一个由reactive生成的响应式对象转为普通对象，不能处理ref定义的数据（还原为javascript普通对象）
		-- markRaw：标记一个对象，使其永远不会再成为响应式对象
		11、customRef：
		-- 创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制
		12、新的组件：
		-- Teleport：能将组件html结构移动到指定位置
		-- Suspense：等待异步组件时渲染一些额外内容，让应用有更好的用户体验, v-slot:fallback渲染没有加载出来时内容，v-slot:default等待异步组件加载完成时渲染
		13、全局的API调整：Vue.config变成app.config
		14、移除过滤器（filter）
	</body>
</html>