文章目录
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)//打印全局挂载的数据
}