vue3.0 基础学习（组合式api）

1、toRefs和toRef

1）toRefs介绍

• 用于批星设置多个数据为响应式数据
• toRefs与原始数据有交互，修改响应式数据会影响到原数据, 但是不会更新视图层 toRefs还可以与其他响应式函数交互，更加方便处理视图层数据
• 使用需引入

return {
	...toRefs(myForm)
}

2）toRef介绍

• toRef也可以创建—个响应式数据
• ref本质是拷贝粘贴一份数据，脱离了与原数据的交互
• ref函数将对象中的属性变成响应式数据，修改响应式数据是不会影响到原数据,但是会更新视图层。
• toRef的本质是引用，与原始数据有交互，修改响应式数据会影响到原数据,但是不会更新视图层
• 使用需引入

2、computed 计算属性

• 可以写很多个 计算属性
  

3、watch 监听器

• 不需要使用变量进行接收
• 监听多个数据，可以写多个监听器
  监听一个的数据

import {ref, watch} from "vue";
export default {
	setup() {
		const p1 = ref(0);
		const p2 = ref(1);
		// 监听 p1 的数据变化， newVal 是最新的数据 
		watch(p1,(newVal, oldVal)=>{
			console.log(newVal, oldVal)
		});
		watch(p2,(newVal, oldVal)=>{
			console.log(newVal, oldVal)
		},{immediate: true});//进入页面立即开始监听
		return {
			p1,
			p2
		}
	}
}

监听多个，批量监听

import {ref, watch, reactive} from "vue";
export default {
	setup() {
		const p1 = ref(0);
		const p2 = ref(1);
		const p3 = reactive({
			name: "海绵宝宝",
			age: {
				num: 1
			}
		})
		//批量监听数据变化， 监听 p1 的数据变化， newVal 是最新的数据 
		watch([p1,p2],(newVal, oldVal)=>{
			console.log(newVal, oldVal)//会打印出来数组的结果[]
		});
		//监听整个 reactive响应式数据的变化：只能监听到最新的结果，无法获取到上一次的数据
		watch(p3,(newVal, oldVal)=>{
			console.log(newVal, oldVal)//会打印Proxy 对象。
		});
			//监听 reactive响应式数据中某一个属性值的变化：最新的结果和上一次结果都可以拿到
		watch(() => p3.age.num,(newVal, oldVal)=>{
			console.log(newVal, oldVal)//会打印Proxy 对象。
		});
		
		return {
			p1,
			p2,
			p3
		}
	}
}

4、watchEffect

• watchEffect 如果存在的活。在组件初始化的时候就会执行一次用以收集依赖
• watch 可以获或到新值与旧值〔更新有的值),而watchEffect是拿不到的
• watchEffect不需要指过监听的属性。它会自动的收集依赖，只要我们回调中引用到了响应式的属性。
  酩么当这些属性变更的时候。这个囵润都会执行。而watch只能监听指定的属性而做出变更
• 使用需引入

import {ref, watch, reactive} from "vue";
export default {
	setup() {
		const p1 = ref(0);
		const res = watchEffect(()=>{
			let a = p1.value;
			console.log(a)//只要 p1.value 有变化就会被监听到，且进入页面就会调用打印一次
		});
		res();//停止监听
		
		return {
			res ,
			p1,
		}
	}
}

5、shallowRef 和 shallowReactive

• shallowRef 只能处理基本类型数据
• shallowReactive 只能处理第一层数据
• 使用需引入

import { shallowRef, shallowReactive} from "vue";
export default {
	setup() {
	//只能处理第一层数据
		const p1 = shallowReactive({
			name: "蜡笔小新",// 第一层数据
			age: {
				num: 1//第二层数据
			}
		});
		// shallowRef 只能处理基本数据类型，如果是复杂类型，则视图不展示
		
		return {
			...toRefs(p1),
		}

	}
}

6、组件传值

vue3 中父组件的样式不需要添加 scoped

1） 祖孙传值 （provide、inject）

//父（祖）组件
import {provide, reactive} from "vue";
export default{
	name: "App",
	components: {
		ChildDom
	},
	setup() {
		const p1 = reactive({name: "我是祖组件",age: 1000});
		provide("p1Obj", p1);//传值
		return {
			p1
		}
	}
}
//子（孙）组件 ChildDom.vue
import {inject} from "vue";
export default{
	name: "App",
	components: {
		ChildDom
	},
	setup() {
		const p1 = inject("p1Obj");//接收值
		console.log(p1 )//打印出的结果就是 响应式的数据
		return {
			p1
		}
	}
}

2） 通过节点进行传值（父组件调用 子组件的方法）

//父（祖）组件
<template>
	<ChildDom ref='myChildDom' />
	<button @click="btnHandle">点击调用子组件方法</button>
<template>

import {ref, reactive} from "vue";
export default{
	name: "App",
	components: {
		ChildDom
	},
	setup() {
		const p1 = reactive({name: "我是祖组件",age: 1000});
		provide("p1Obj", p1);//传值
		let myChildDom = ref();
		function btnHandle() {
			myChildDom.value.recive(p1)//recive 是子组件的方法
		}
		return {
			p1,
			myChildDom
		}
	}
}
//子（孙）组件 ChildDom.vue
export default{
	name: "App",
	components: {
		ChildDom
	},
	setup() {
		function recive(p1) {
			console.log("我是被父组件调用的方法",p1 )//打印出的结果就是 响应式的数据
		}
		return {
			recive
		}
	}
}

3） vuex传值（父组件调用 子组件的方法）

store/index.js
import {createStore} from "vuex";
createStore({
	//创建数据仓库
	state: {name: "海绵宝宝"},
	//同步调用
	mutations: {
		trigger(state) {
			state.name = "派大星";
			console.log("我是被action 调用的");
		},
		trigger2(state, name) {
			state.name = name;
			console.log("我是被组件调用的");
		}
	},
	//异步调用
	actions: {
		sub(store) {
				console.log("*****");
				store.commit("trigger");
		}
	}
	
})

main.js
import createStore from './store/index,js';
createApp(App).use(createStore);

//组件
import {useStore} from "vuex";
import {computed} from "vue";
export default{
	setup() {
		// 从 vuex 数据仓库里取数据
		const store = useStore();
		const res = computed(()=>{
		 	console.log(store.state.name);
		 	return store.state.name
		 })
		 // 修改数据仓库的内容
		 function btn() {
		 		//异步调用 dispatch
		 		store,dispatch("sub");
		 		// 同步调用
		 		store.commit("trigger2", "派大星")
		 }
		return {
			res,
			btn
		}
	}
}

7、生命周期函数

1）生命周期函数

• onBeforeMount——在挂载开始之前被调用
• onMounted ——组件挂载时调用
• onBeforeUpdata——数据更新时调用
• onUpdated——数据更改导数的虚拟 DOM重新渲染。在这之后会调用该钩子
• onBeforeUnmount——在卸载组件实例之前调用
• onUnmounted——卸载组件实例后调用
• onErrorCaptured——当捕获—个来自子孙组件的错误时被调用

2） vue应用程序中有4个主要事件

创建―在组件创建时执行。
挂载—DOM被挂载时执行。
更新—当响应数据被修改时执行。
销毁一在元素被销毁之前立即运行
·使用需引入

import {ref, reactive} from "vue";
export default{
	setup() {
		onBeforeMount(() => {
			
		})
	}
}

8、vue3的抽离封装

• vue3 的任何一个组合式api 都可以单独抽离出去在另外一个文件，最后只需要回归到 setup() 中即可

// 公用的数据或者方法
import {reative, computed, watch} from "vue";
const common = () => {
	const res = reative({
		name: "龙王",
		age: 5000,
		company: "水晶宫"	
	})
	return {res}
}
export default common;

// 组件中使用
//首先引入
import common from "common.js"
export default {
	setup(){
		const res = common();//则直接拿到 res 的响应式数据
		return {res};//通过此步骤就可以进行	页面的渲染。
	}
}

9、vue3 项目的全局挂载

main.js

//全局挂载
 app.config.globalProperties.$urls = urls;
//其他文件使用
setup() {
	const {proxy} = getCurrentInstance();
	console.log(proxy.$urls)//打印全局挂载的数据
}