vue3 常用函数\\组件传值\\抽离封装

本文主要是介绍vue3 常用函数\\组件传值\\抽离封装，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、简介

组合式api

1、 setup（）

组合式api的入口
页面启动后，第一个自动执行的函数
定义项目中所有的变量、方法

所有的变量和方法，只有return出去，在页面视图中正常使用

<template><!--  v-text的简写--><h1> {{data}} </h1><button @click="handleLogin">登录</button>
</template>
<script>export default {name: "login",setup() {const data = "变量"const handleLogin = () => {//方法 es6写法console.log("qqqq")}return {//返回才能在页面中使用data,handleLogin,}}}
</script>

2、ref函数

当ref里面的值发生改变时，视图会自动更新—此值也就是响应式的数据
ref可操作基本数据类型，也可以操作复杂数据类型
建议：ref操作基本数据类型

使用需要引入import {ref} from “vue”

<template><!--  v-text的简写--><h1> {{name}} </h1><button @click="handleLogin">登录</button>
</template>
<script>import {ref} from "vue"export default {name: "login",setup() {const name = ref("变量")const handleLogin = () => {//方法 es6写法name.value="123123"}return {//返回才能在页面中使用name,handleLogin,}}}
</script>

3、reactive

reactive专门用来创建复杂数据类型的响应式引用（基本数据类型不适用）
可以响应深层次的数据，例子：多维数组
返回值是一个响应式的proxy 对象–vue底层响应对象

使用需要引入import {reactive} from “vue”

<template><!--  v-text的简写--><h1> {{name.loginName}} </h1><h1> {{name.pwd}} </h1><button @click="handleLogin">登录</button>
</template>
<script>import {reactive} from "vue"export default {name: "login",setup() {const name = reactive({loginName: "sysadmin",pwd: "admin111111"})const handleLogin = () => {//方法 es6写法name.loginName="admin"name.pwd="111111"}return {//返回才能在页面中使用name,handleLogin,}}}
</script>

4、toRef 函数

toRef 可以创建响应式数据
ref本质是复制粘贴，脱离了与原数据的交互
Ref函数将对象中的属性变成响应式数据，修改响应式数据不会影响原数据，但是会更新视图
toRef函数本质是引用，与原数据有交互，修改响应式数据会影响原数据，但是不会更新视图

使用时需引用

import {toRef} from "vue"
toRef(需要操作的对象,对象的某一个属性)

5、toRefs 函数

toRefs可以批量创建多个响应式数据
toRefs函数本质是引用，与原数据有交互，修改响应式数据会影响原数据，但是不会更新视图
toRefs函数可以与其他响应式函数交互，更加的方便的处理数据

使用时需引用

import {toRefs} from "vue"
toRefs(需要操作的对象)

<template><!--  v-text的简写--><h1> {{loginName}} </h1><h1> {{pwd}} </h1><button @click="handleLogin">登录</button>
</template>
<script>import {reactive,toRefs} from "vue"export default {name: "login",setup() {const name = reactive({loginName: "sysadmin",pwd: "admin111111"})return {//返回才能在页面中使用,三个点是es6里面的拓展运算符...toRefs(name),handleLogin,}}}
</script>

6、计算属性 computed

(1) 与vue2 一样，均是用来监听数据变化

(2) 需要引入：import {toRefs} from “vue”

<template>小王年龄：<input type="number" v-model="wang"><br>小李年龄：<input type="number" v-model="li"><br>总计：<input type="number" v-model="sum"><br>相乘：<input type="number" v-model="multiply">
</template>
<script>import {computed,reactive,toRefs} from "vue"export default {name: "login",setup() {const li =""const wang = ""const res = reactive({li,wang})const sum = computed(()=>{return res.li+res.wang})const multiply = computed(()=>{return res.li*res.wang})return {//返回才能在页面中使用...toRefs(res),multiply,sum}}}
</script>

7、watch侦听器

与vue2一样一致，均是用来监听数据变化的

watch(监听的对象，(newVal,oldVal)=>{}[,{immediate:true}])，第三个参数是进入页面时就开始监听新的值，立即监听

<template><h1>num1：{{num1}}</h1><h1>num2：{{num2}}</h1><h1>num3：{{num3.age.num}}</h1><button @click="num1++">num1++</button><button @click="num2+=2">num2++</button><button @click="num3.age.num++">num3对象</button>
</template>
<script>import {watch,reactive,toRefs,ref} from "vue"export default {name: "login",setup() {const num1 =ref(0)const num2 =ref(1)const num3 = reactive({name:"小狗",age:{num:1}})//监听一个对象(监听的对象，(newVal,oldVal)=>{})//newVal:最新的结果  oldVal：上一次的结果watch(num1,(newVal,oldVal)=>{console.log(newVal,oldVal)},{immediate:true})//监听多个对象watch([num1,num2],(newVal,oldVal)=>{console.log(newVal,oldVal)})/** 监听整个reactive响应数据的变化，只能监听到最新的结果* */watch(num3,(newVal)=>{console.log(newVal)})/** 监听reactive中某一个属性值响应数据的变化* */watch(()=>num3.age.num,(newVal,oldVal)=>{console.log(newVal,oldVal)})return {//返回才能在页面中使用// ...toRefs(),num1,num2,num3}}}
</script>

8、watchEffect

watchEffect 如果存在的话，在组件初始化的时候就会执行一次用以收集依赖
watch可以获取到新值和旧值，而watchEffect拿不到

watchEffect不需要指定监听的属性，它会自动收集依赖，只要我们回调中引用到了响应式的属性，那么这些属性变更的时候，这个回调就会执行，而watch只能监听指定的属性

<template><h1>num1：{{num1}}</h1><h1>num2：{{num2}}</h1><h1>num3：{{num3.age.num}}</h1><button @click="num1++">num1++</button><button @click="num2+=2">num2++</button><button @click="num3.age.num++">num3对象</button>
</template>
<script>import {watchEffect,reactive,ref} from "vue"export default {name: "login",setup() {const num1 =ref(0)const num2 =ref(1)const num3 = reactive({name:"小狗",age:{num:1}})//开始监听const res =watchEffect(()=>{//监听的属性 普通对象const a = num1.value// console.log(a)//监听复杂对象的属性const b = num3.age.numconsole.log(b)})//停止监听res()return {//返回才能在页面中使用// ...toRefs(),num1,num2,num3}}}
</script>

9、shallowRef 和shallowReactive

shallowRef：只处理基本数据类型

shallowReactive：只处理第一层数据

<template><h1>姓名：{{name}}</h1><h1>年龄：{{age.num}}</h1><button @click="name+='2'">姓名</button><button @click="age.num++">年龄</button>
</template>
<script>import {shallowReactive,shallowRef,ref,toRefs} from "vue"export default {setup() {const num3 = shallowReactive({name:"小狗",age:{num:1}})return {//返回才能在页面中使用...toRefs(num3),}}}
</script>