vue3 新特性

import { createApp } from 'vue'
import App from './App.vue'
 
const app = createApp(App)
app.mount('#app')

    export default {
        name:'App',
        components:{Demo},
        props:['msg','school'],//props如果不声明接收，值会在$attrs(vue2)
		emits:['hello'],//子组件向父组件传值要声明emit(vue2)
        //在beforeCreate之前执行一次，this是undefined
		setup(props,context){//context为上下文对象，包含attrs/slots/emit(同vue2)
			//数据
			let name = '张三'
			let age = 18
 
			//方法
			function sayHello(){
				alert(`我叫${name}，我${age}岁了，你好啊！`)
			}
			//返回一个对象（常用）
			return {
				name,
				age,
				sayHello,
			}
		}
	}

            //proxy增删改属性都能获取到;Object移植到Reflect：
			//#region 
			const p = new Proxy(person,{
				//有人读取p的某个属性时调用
				get(target,propName){
					console.log(`有人读取了p身上的${propName}属性`)
                    //return target[propName]
					return Reflect.get(target,propName)
				},
				//有人修改p的某个属性、或给p追加某个属性时调用
				set(target,propName,value){
					console.log(`有人修改了p身上的${propName}属性，我要去更新界面了！`)
                    //target[propName] = value
					Reflect.set(target,propName,value)
				},
				//有人删除p的某个属性时调用
				deleteProperty(target,propName){
					console.log(`有人删除了p身上的${propName}属性，我要去更新界面了！`)
                    //return delete target[propName]
					return Reflect.deleteProperty(target,propName)
				}
			})
			//#endregion

 
<script>
	import {ref} from 'vue'
	export default {
		name: 'App',
		setup(){
			//数据
			let name = ref('张三')//基本类型
			let age = ref(18)
			let job = ref({//对象类型
				type:'前端工程师',
				salary:'30K'
			})
 
			//方法
			function changeInfo(){
				name.value = '李四'
				age.value = 48
                //ref函数返回一个RefImpl对象(引用实现的实例)，实现响应式：__proto__上有setter和getter
				console.log(name,age)
				job.value.type = 'UI设计师'
				job.value.salary = '60K'
                //job.value是一个Proxy对象，封装在reactive函数中
                console.log(job.value)
                
			}
 
			//返回一个对象（常用）
			return {
				name,
				age,
				job,
				changeInfo
			}
		}
	}
script>
 

<template>
	<h1>一个人的信息h1>
	<h2>姓名：{{person.name}}h2>
	<h2>年龄：{{person.age}}h2>
	<h3>工作种类：{{person.job.type}}h3>
	<h3>工作薪水：{{person.job.salary}}h3>
	<h3>爱好：{{person.hobby}}h3>
	<h3>测试的数据c：{{person.job.a.b.c}}h3>
	<button @click="changeInfo">修改人的信息button>
template>
 
<script>
	import {reactive} from 'vue'
	export default {
		name: 'App',
		setup(){
			//数据
			let person = reactive({
				name:'张三',
				age:18,
				job:{
					type:'前端工程师',
					salary:'30K',
					a:{
						b:{
							c:666
						}
					}
				},
				hobby:['抽烟','喝酒','烫头']
			})
 
			//方法
			function changeInfo(){
				person.name = '李四'
				person.age = 48
				person.job.type = 'UI设计师'//job直接就是proxy对象
				person.job.salary = '60K'
				person.job.a.b.c = 999
				person.hobby[0] = '学习'
			}
 
			//返回一个对象（常用）
			return {
				person,
				changeInfo
			}
		}
	}
script>
 

3.2 toRef和toRefs

toRef：创建一个 ref 对象，返回ObjectRefImpl对象，用于将响应式对象中的某个属性单独提供给外部使用。两者保持引用关系

toRefs：批量创建多个 ref 对象。

<template>
	<h4>{{person}}h4>
	<h2>姓名：{{name}}h2>
	<h2>年龄：{{age}}h2>
	<h2>薪资：{{job.j1.salary}}Kh2>
	<button @click="name+='~'">修改姓名button>
	<button @click="age++">增长年龄button>
	<button @click="job.j1.salary++">涨薪button>
template>
 
<script>
	import {ref,reactive,toRef,toRefs} from 'vue'
	export default {
		name: 'Demo',
		setup(){
			//数据
			let person = reactive({
				name:'张三',
				age:18,
				job:{
					j1:{
						salary:20
					}
				}
			})
 
			// const name1 = person.name//无响应式
			// console.log('%%%',name1)
 
			// const name2 = toRef(person,'name')//有响应式
			// console.log('####',name2)
 
			const x = toRefs(person)//只交出第一层
			console.log('******',x)
 
        const ageRef = toRef(person, 'age')
        setTimeout(() => {
            person.age = 25
        }, 1500)
 
        setTimeout(() => {
            ageRef.value = 30 // .value 修改值
        }, 3000)
 
			//返回一个对象（常用）
			return {
				person,
				// name:toRef(person,'name'),
				// age:toRef(person,'age'),
				// salary:toRef(person.job.j1,'salary'),
				...toRefs(person)
			}
		}
	}
script>
 

3.3 computed

<template>
	<h1>一个人的信息h1>
	姓：<input type="text" v-model="person.firstName">
	<br>
	名：<input type="text" v-model="person.lastName">
	<br>
	<span>全名：{{person.fullName}}span>
	<br>
	全名：<input type="text" v-model="person.fullName">
template>
 
<script>
	import {reactive,computed} from 'vue'
	export default {
		name: 'Demo',
		setup(){
			//数据
			let person = reactive({
				firstName:'张',
				lastName:'三'
			})
			//计算属性——简写（没有考虑计算属性被修改的情况）
			/* person.fullName = computed(()=>{
				return person.firstName + '-' + person.lastName
			}) */
 
			//计算属性——完整写法（考虑读和写）
			person.fullName = computed({
				get(){
					return person.firstName + '-' + person.lastName
				},
				set(value){
					const nameArr = value.split('-')
					person.firstName = nameArr[0]
					person.lastName = nameArr[1]
				}
			})
 
			//返回一个对象（常用）
			return {
				person
			}
		}
	}
script>
 

age1具有响应式 

3.4 watch和watchEffect

watch

监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）。

监视reactive定义的响应式数据中某个属性时：deep配置有效。

<template>
	<h2>当前求和为：{{sum}}h2>
	<button @click="sum++">点我+1button>
	<hr>
	<h2>当前的信息为：{{msg}}h2>
	<button @click="msg+='！'">修改信息button>
	<hr>
	<h2>姓名：{{person.name}}h2>
	<h2>年龄：{{person.age}}h2>
	<h2>薪资：{{person.job.j1.salary}}Kh2>
	<button @click="person.name+='~'">修改姓名button>
	<button @click="person.age++">增长年龄button>
	<button @click="person.job.j1.salary++">涨薪button>
template>
 
<script>
	import {ref,reactive,watch} from 'vue'
	export default {
		name: 'Demo',
		setup(){
			//数据
			let sum = ref(0)
			let msg = ref('你好啊')
			let person = reactive({
				name:'张三',
				age:18,
				job:{
					j1:{
						salary:20
					}
				}
			})
            let person2 = ref({//ref定义
				name:'张三',
				age:18,
				job:{
					j1:{
						salary:20
					}
				}
			})
 
			//情况一：监视ref所定义的一个响应式数据(一个)
			watch(sum,(newValue,oldValue)=>{
				console.log('sum变了',newValue,oldValue)
			},{immediate:true}) 
 
			//情况二：监视ref所定义的多个响应式数据(多个)
			watch([sum,msg],(newValue,oldValue)=>{
				console.log('sum或msg变了',newValue,oldValue)
			},{immediate:true})
 
			/* 
				情况三：监视reactive所定义的一个响应式数据的全部属性(全部属性)
						1.注意：此处无法正确的获取oldValue
						2.注意：强制开启了深度监视（deep配置无效）
			*/
			watch(person,(newValue,oldValue)=>{
				console.log('person变化了',newValue,oldValue)
			},{deep:false}) //此处的deep配置无效
            watch(person2,(newValue,oldValue)=>{
				console.log('person2的值变化了',newValue,oldValue)
			},{deep:true}) 
 
			//情况四：监视reactive所定义的一个响应式数据中的某个属性（某个属性）
			watch(()=>person.name,(newValue,oldValue)=>{
				console.log('person的name变化了',newValue,oldValue)
			})  
 
			//情况五：监视reactive所定义的一个响应式数据中的某些属性（某些属性）
			watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
				console.log('person的name或age变化了',newValue,oldValue)
			})  
 
			//特殊情况
			watch(()=>person.job,(newValue,oldValue)=>{
				console.log('person的job变化了',newValue,oldValue)
			},{deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效 
 
 
			//返回一个对象（常用）
			return {
				sum,
				msg,
				person
			}
		}
	}
script>
 

watchEffect

watch：既要指明监视的属性，也要指明监视的回调。

watchEffect：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。初始化时执行一次，用于收集要监听的数据。

<template>
	<h2>当前求和为：{{sum}}h2>
	<button @click="sum++">点我+1button>
	<hr>
	<h2>姓名：{{person.name}}h2>
	<h2>年龄：{{person.age}}h2>
	<h2>薪资：{{person.job.j1.salary}}Kh2>
	<button @click="person.name+='~'">修改姓名button>
	<button @click="person.age++">增长年龄button>
	<button @click="person.job.j1.salary++">涨薪button>
template>
 
<script>
	import {ref,reactive,watch,watchEffect} from 'vue'
	export default {
		name: 'Demo',
		setup(){
			//数据
			let sum = ref(0)
			let msg = ref('你好啊')
			let person = reactive({
				name:'张三',
				age:18,
				job:{
					j1:{
						salary:20
					}
				}
			})
 
			//监视
			/* watch(sum,(newValue,oldValue)=>{
				console.log('sum的值变化了',newValue,oldValue)
			},{immediate:true}) */
 
			watchEffect(()=>{
				const x1 = sum.value
				const x2 = person.job.j1.salary
				console.log('watchEffect所指定的回调执行了')
			})
 
			//返回一个对象（常用）
			return {
				sum,
				person
			}
		}
	}
script>
 

3.5 生命周期

销毁阶段的两个名字改了，创建阶段的2个钩子在setup中调用。

<template>
	<h2>当前求和为：{{sum}}h2>
	<button @click="sum++">点我+1button>
template>
 
<script>
	import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
	export default {
		name: 'Demo',
		
		setup(){
            // 等于 beforeCreate 和 created
			console.log('---setup---')
			//数据
			let sum = ref(0)
 
			//通过组合式API的形式去使用生命周期钩子
			onBeforeMount(()=>{
				console.log('---onBeforeMount---')
			})
			onMounted(()=>{
				console.log('---onMounted---')
			})
			onBeforeUpdate(()=>{
				console.log('---onBeforeUpdate---')
			})
			onUpdated(()=>{
				console.log('---onUpdated---')
			})
			onBeforeUnmount(()=>{
				console.log('---onBeforeUnmount---')
			})
			onUnmounted(()=>{
				console.log('---onUnmounted---')
			})
 
			//返回一个对象（常用）
			return {sum}
		},
		//通过配置项的形式使用生命周期钩子
		//#region 
		beforeCreate() {
			console.log('---beforeCreate---')
		},
		created() {
			console.log('---created---')
		},
		beforeMount() {
			console.log('---beforeMount---')
		},
		mounted() {
			console.log('---mounted---')
		},
		beforeUpdate(){
			console.log('---beforeUpdate---')
		},
		updated() {
			console.log('---updated---')
		},
		beforeUnmount() {
			console.log('---beforeUnmount---')
		},
		unmounted() {
			console.log('---unmounted---')
		},
		//#endregion
	}
script>
 

3.6 provide/inject

//祖组件
setup(){
   ......
   let car = reactive({name:'奔驰',price:'40万'})
   provide('car',car)
   ......
}
 
//后代组件
setup(props,context){
   ......
   const car = inject('car')
   return {car}
   ......
}

3.7 自定义hook函数

本质是一个函数，把setup函数中使用的Composition API进行了封装，类似于vue2.x中的mixin。