文章目录

• • 1、toRefs和toRef
  • • 1）toRefs介绍
    • 2）toRef介绍
  • 2、computed 计算属性
  • 3、watch 监听器
  • 4、watchEffect
  • 5、shallowRef 和 shallowReactive
  • 6、组件传值
  • • 1） 祖孙传值 （provide、inject）
    • 2） 通过节点进行传值（父组件调用 子组件的方法）
    • 3） vuex传值（父组件调用 子组件的方法）
  • 7、生命周期函数
  • • 1）生命周期函数
    • 2） vue应用程序中有4个主要事件
  • 8、vue3的抽离封装

1、toRefs和toRef

1）toRefs介绍

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

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） 通过节点进行传值（父组件调用 子组件的方法）

//父（祖）组件