vue2与Vue3的细微区别

vue2和vue3的区别其实没多少，总结来说一共就下面这几样

一 性能提升

• vue3打包大小减少了41%，比Vue3更快，
• 初次渲染快55%，更新渲染快133%
• 内存减少54%，
• 使用proxy代替definePropety实现数据响应式
• 重写虚拟dom的实现和Tree-Shaking

二 新增特征

• CompositionAPI
• setup
• ref,reactive

下面会讲用法

三 创建的区别

vue3创建：使用vite创建

• npm i vitea-app 自己项目的名字
• cd 项目（创建完了会有提示）
• npm i 
• npm run dev(在vue2中是npm run serve）

setup的使用

新的option，所有的组合api函数都在此使用，只在初始化时执行一次

函数如果返回对象，对象中的属性或方法，模版中可以直接使用

ref：

定义一个数据的响应式，如果不用的话，改值改不了

const xxx = ref（number）

reactive：

定义多个数据的响应式，可以作用于对象上

二者的区别就在于，ref只能作用于类型数据，reactive可以用来处理对象

二者的用法

<template>
	<div>
		<button @click="increase">count:{{ countRef }}</button>

		<br><button @click="decrease">count:{{ countRef }}</button>

		<br><button @click="updata">message:<br>
			"姓名"{{ state.name }},<br>
			"年龄："{{ state.age }},<br>
			"die"{{ state.dad.age }},<br>
			"die年龄:"{{ state.age }},<br>
			"死没死:"{{ state.dead }}<br>
		</button><br>
	</div>
</template>

<script>
import {
	ref,
	reactive,
	toRefs,
} from "vue"

function useCount() {
	let countRef = ref(0)
	let state = reactive({
		name: "gou",
		age: "32",
		dead: "false",
		dad: {
			name: "bigdog",
			age: "65",
			dead: "true"
		}
	})
	const updata = () => {
		state.name += "狗狗",
			state.age++,
			state.dad.name += "䒑",
			state.dad.age--
		if (state.age >= 40) {
			state.dead = "死的透透的了"

		}
	}

	const increase = () => {
		countRef.value++
		if (countRef.value > 20) {
			countRef.value = 1
		}

	}
	const decrease = () => {
		countRef.value--
		if (countRef.value <= 0) {
			countRef.value = 0
			alert("不能再减了")
		}

	}
	return {
		countRef,
		increase,
		decrease,
		state,
		updata
	}
}
export default {
	setup() {//会自动执行，组件被赋值之后会立即执行

		return {

			...useCount()
		}
	}
}
</script>

ref后（）里写数字之类的类型数据

（什么是类型数据？

‌类型数据是指具有特定含义和结构的数据，用于表示和存储不同类型的信息。‌

类型数据的分类

类型数据可以根据其表示的信息类型进行分类，主要包括以下几种：

• ‌数值类型‌：用于表示数值信息，如整数、浮点数等。它们可以进行数学运算，如加、减、乘、除等。
• ‌字符类型‌：用于表示文本信息，如字母、数字、符号等。字符类型数据通常用于存储文本字符串。
• ‌布尔类型‌：表示逻辑值，只有两种状态：真（True）和假（False）。常用于条件判断。
• ‌日期和时间类型‌：专门用于表示日期和时间信息，支持日期和时间的加减、比较等操作。
• ‌枚举类型‌：由一组命名的常量组成，用于表示固定的几种状态或选项。

每种类型数据都有其特定的存储方式、取值范围和操作规则，这些规则定义了数据的性质和行为。类型数据的使用有助于确保数据的准确性和一致性，提高数据处理和存储的效率。）

reactive后可以写一个对象

上面的代码是把用到的代码放到了一个function函数里，放到函数里的话，需要在setup里return中使用"..."三个点解构；

也可以不放在函数里直接放到setup中

<template>
	<p>
		<button @click="increase">count:{{ countRef }}</button>
		<br><button @click="decrease">count:{{ countRef }}</button>

		<br><button @click="updata">message:<br>
			"姓名"{{ state.name }},<br>
			"年龄："{{ state.age }},<br>
			"die"{{ state.dad.age }},<br>
			"die年龄:"{{ state.age }},<br>
			"死没死:"{{ state.dead }}<br>
		</button><br>
		<!-- <input type="text" ref="inputRef"> -->
	</p>
</template>

<script>
import {
	ref,
	reactive,
	toRefs,
	onBeforeMount,
	onMounted,
	onBeforeUpdate,
	onUpdated,
	onBeforeUnmount,
	onUnmounted
} from "vue"

// function useCount() {
// 	let countRef = ref(0)
// 	let state = reactive({
// 		name: "gou",
// 		age: "32",
// 		dead: "false",
// 		dad: {
// 			name: "bigdog",
// 			age: "65",
// 			dead: "true"
// 		}
// 	})
// 	const updata = () => {
// 		state.name += "狗狗",
// 			state.age++,
// 			state.dad.name += "䒑",
// 			state.dad.age--
// 		if (state.age >= 40) {
// 			state.dead = "死的透透的了"

// 		}
// 	}

// 	const increase = () => {
// 		countRef.value++
// 		if (countRef.value > 20) {
// 			countRef.value = 1
// 		}

// 	}
// 	const decrease = () => {
// 		countRef.value--
// 		if (countRef.value <= 0) {
// 			countRef.value = 0
// 			alert("不能再减了")
// 		}

// 	}
// 	return {
// 		countRef,
// 		increase,
// 		decrease,
// 		state,
// 		updata
// 	}
// }
export default {
	setup() {//会自动执行，组件被赋值之后会立即执行
		let countRef = ref(0)
	let state = reactive({
		name: "gou",
		age: "32",
		dead: "false",
		dad: {
			name: "bigdog",
			age: "65",
			dead: "true"
		}
	})
	const updata = () => {
		state.name += "狗狗",
			state.age++,
			state.dad.name += "䒑",
			state.dad.age--
		if (state.age >= 40) {
			state.dead = "死的透透的了"

		}
	}

	const increase = () => {
		countRef.value++
		if (countRef.value > 20) {
			countRef.value = 1
		}

	}
	const decrease = () => {
		countRef.value--
		if (countRef.value <= 0) {
			countRef.value = 0
			alert("不能再减了")
		}

	}
	return {
		countRef,
		increase,
		decrease,
		state,
		updata
	}

		// const inputRef = ref<HTMLElement|null> (null);
		// console.log(inputRef);
		// onMounted(() => {
		// 	inputRef.value && inputRef.value.focus()
		// })
		// return {
		// 	inputRef,
		// 	...useCount()
		// }
	}
}
</script>

效果

重要零碎知识点补充

比较二者的响应式

vue2是直接可以拿到响应式，

vue3需要通过proxy代理拿到响应式，因此，vue3是没有this的使用的，或者说，this的使用与vue2不同

vue2 的this指的大多都直接是vue实例对象，vue3的this指的是代理函数。setup中没有this

且，vue2的代码分布是很乱的，vue3代码分布是很集中的

composition组合式聚合式api(同一功能代码集合在一起)

跟其对应的是opation（配置式api）布置是很乱的

左3右2

setup返回的内容会直接挂载到组件上

不管是属性还是方法

vue3多了几个新的钩子函数

import {
	ref,
	reactive,
	toRefs,
	onBeforeMount,
	onMounted,
	onBeforeUpdate,
	onUpdated,
	onBeforeUnmount,
	onUnmounted
} from "vue"

以上