	1.性能的提升
	打包大小减少41%
	初次渲染快55%, 更新渲染快133%
	内存减少54%
	2.源码的升级
	使用Proxy代替defineProperty实现响应式
	重写虚拟DOM的实现和Tree-Shaking
	3.拥抱TypeScript
	Vue3可以更好的支持TypeScript
	4.新的特性
	Composition API（组合API）
	setup配置
	ref与reactive
	watch与watchEffect
	provide与inject
	新的内置组件
	Fragment
	Teleport
	Suspense
	其他改变
	新的生命周期钩子
	data 选项应始终被声明为一个函数
	移除keyCode支持作为 v-on 的修饰符

	5 组合式API和配置项API
	-使用组合式API
	-配置项API
	-{
	name:'xx',
	data:function(){},
	methods:{}
	}

	# vue-cli:创建vue2和vue3
	-跟之前一样
	# vite：创建vue3，创建最新
	npm init vue@latest
	# Pinai
	# vite创建另一种方式：创建vue3.0.4版本
	npm init vite-app <project-name>
	## 进入工程目录
	cd <project-name>
	## 安装依赖
	npm install
	## 运行
	npm run dev

	# 启动的两种方式


	# 以后再页面中的this，已经不是vue2中的vc对象了，是一个代理对象

	<template>
	<h2>{{ name }}</h2>
	<h3>{{ age }}</h3>
	<button @click="handleClick">点我看美女</button>
	<br>
	<button @click="handleAdd">点我，age+1</button>
	</template>

	<script>


	export default {
	name: 'App',
	setup() { // setup中没有this了
	// 以后所有的变量定义函数编写，都写在这个函数中
	// 定义变量如果这么写，变量渲染没问题，但是没有响应式，页面变了，变量不会变
	let age = 19
	let name = 'lqz'
	// 定义函数
	function handleClick() {
	alert('美女~~~')
	}
	let handleAdd = () => {
	console.log('我要开始加了')
	age=age+1
	console.log(age)
	}
	// 函数必须有返回值
	return {
	age, name, handleClick, handleAdd
	}

	}
	}
	</script>

	# 导入使用：import {ref, reactive} from 'vue'
	# 基本数据类型（数字，字符串，布尔）如果要加响应式：使用ref包裹，在模板中之间使用，js中通过对象.value取值
	# 对象，数组引用使用reactive,ref可以包对象类型，但是用的时候必须.value

	export default {
	name: 'App',
	// computed:{
	// fullName:function (){}
	// },
	setup() {
	// 1 计算属性案例1
	// let firstName = ref('李')
	// let lastName = ref('明熠')
	// // 定义计算属性
	// let fullName = computed(() => {
	// return firstName.value + lastName.value
	// })

	// 2 计算属性案例2
	let person = reactive({
	firstName: '李',
	lastName: '明熠',
	})
	// 定义计算属性
	person.fullName = computed({
	get() {
	return person.firstName + '-' + person.lastName
	},
	set(value) {
	console.log(value)
	const nameArr = value.split('-')
	person.firstName = nameArr[0]
	person.lastName = nameArr[1]

	}
	})
	return {
	person
	}


	}
	}

	import {computed, watch, ref, reactive, watchEffect} from 'vue'

	export default {
	name: 'App',
	setup() {
	// 1 计算属性案例1
	let name = ref('lqz')

	// 定义监听属性
	watch(name, (newValue, old) => {
	console.log('name变了')
	// console.log(old)
	// console.log(newValue)
	})
	// vue3 多的watchEffect,只要函数中使用的变量发生变化，它就会触发
	watchEffect(() => {
	// 只要该函数中使用的变量发生变化，它就会触发
	// let a = name.value + '?'
	console.log('watchEffect配置的回调执行了')
	})
	return {
	name
	}


	}
	}

	# Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：
	beforeDestroy改名为 beforeUnmount
	destroyed改名为 unmounted
	# Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：
	beforeCreate===>setup()
	created=======>setup()
	beforeMount ===>onBeforeMount
	mounted=======>onMounted
	beforeUpdate===>onBeforeUpdate
	updated =======>onUpdated
	beforeUnmount ==>onBeforeUnmount
	unmounted =====>onUnmounted

	# 什么是hook？——
	本质是一个函数，把setup函数中使用的Composition API进行了封装。
	类似于vue2.x中的mixin。
	自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂

	import {onMounted, onUnmounted, reactive} from "vue";

	export default function () {
	let p = reactive({
	x: 0,
	y: 0
	})

	function getPoint(event) {
	console.log(event)
	p.x = event.pageX
	p.y = event.pageY
	}

	// 声明周期钩子的onMounted，当页面挂载就会执行
	onMounted(() => {
	// 给数鼠标点击增加监听，当点击鼠标，就会执行这个函数
	window.addEventListener('click', getPoint)
	})
	// 组件被销毁时，把功能去掉
	onUnmounted(() => {
	window.removeEventListener('click', getPoint)
	})

	return p
	}

	# vue-admin-template-master
	-跑起来
	-package.json 第7行加入
	"dev": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service serve",



	# java版的若依，带权限控制的后台管理模块
	# python ：django-vue-admin
	# python flask-vue-admin
	# go:gin-vue-admin

	<template>
	<h2>x坐标是：{{ p.x }},y坐标是:{{ p.y }}</h2>
	</template>

	<script>
	import {reactive, onMounted, onUnmounted} from 'vue'
	import usePoint from '../hook/uesPoint.js'

	export default {
	name: "Point",
	setup() {
	let p = usePoint()
	return {p}
	}
	}

	</script>

	<style scoped>

	</style>

joseph-bright

Vue进阶用法4