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

xp_17112023-12-23 13:34

一、简介

组合式api

1、 setup（）

  • 组合式api的入口

  • 页面启动后，第一个自动执行的函数

  • 定义项目中所有的变量、方法

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

    html 复制代码 
    <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"

    html 复制代码 
    <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"

    javascript 复制代码 
    <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函数本质是引用，与原数据有交互，修改响应式数据会影响原数据，但是不会更新视图

  • 使用时需引用

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

5、toRefs 函数

  • toRefs可以批量创建多个响应式数据

  • toRefs函数本质是引用，与原数据有交互，修改响应式数据会影响原数据，但是不会更新视图

  • toRefs函数可以与其他响应式函数交互，更加的方便的处理数据

  • 使用时需引用

    javascript 复制代码 
    import {toRefs} from "vue"
toRefs(需要操作的对象)
    javascript 复制代码 
    <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"

    javascript 复制代码 
    <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}])，第三个参数是进入页面时就开始监听新的值，立即监听

    javascript 复制代码 
    <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只能监听指定的属性

    javascript 复制代码 
    <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.num
            console.log(b)
          })
          //停止监听
          res()


          return {//返回才能在页面中使用
            // ...toRefs(),
            num1,
            num2,
            num3
          }
        }
    }
</script>

9、shallowRef 和shallowReactive

  • shallowRef：只处理基本数据类型

  • shallowReactive：只处理第一层数据

    javascript 复制代码 
    <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>

二、组件传值

1、vuex 实现组件传值

父子，子子，祖孙

2、其他方法----父子 传值

（1）进入页面即刻传值
  • 父组件
javascript 复制代码 
//进入页面即刻传值
<template>
	<helloworld/>
</template>
<script>
import {reactive} from "vue"
import helloworld from "组件路径"
export default {
	compoents:{
		helloworld
	}，
	setup() {
		const p1 = reactive({name:"小宋",age:12})
		provide("p",p1)//祖传 第一个参数是子组件用来识别的参数
	}
}

//点击传值
  • 子组件
javascript 复制代码 
export default {
	name:"helloworld",
	setup(){
		const res = inject("p")//孙收
	}
（2）点击传值
  • 父组件
javascript 复制代码 
<template>
	<helloworld ref ="val"/>//在父组件中找到子组件的节点
</template>
<script>
import {reactive,ref} from "vue"
import helloworld from "组件路径"
export default {
	compoents:{
		helloworld
	}，
	setup() {
		const val = ref()
		const p1 = reactive({name:"小宋",age:12})
		function btn(){//点击事件调用子组件的方法
			val.vlaue.receive(p1)
		}
		return{btn,val}
}
</script>
  • 子组件
javascript 复制代码 
export default {
	name:"helloworld",
	setup(){
		//被父组件调用的方法
		function receive(val){
			console.log(val)
		}
		return{receive}
	}

三、抽离封装

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

相关推荐
javaer炒粉2 小时前
provide，inject父传子
javascript·vue.js·elementui
LvManBa2 小时前
Vue学习记录之五（组件/生命周期）
javascript·vue.js·学习
喝旺仔la6 小时前
使用vue创建项目
前端·javascript·vue.js
心.c6 小时前
植物大战僵尸【源代码分享+核心思路讲解】
前端·javascript·css·数据结构·游戏·html
喝旺仔la6 小时前
Element Plus中button按钮相关大全
前端·javascript·vue.js
计算机学姐6 小时前
基于SpringBoot+Vue的高校门禁管理系统
java·vue.js·spring boot·后端·spring·intellij-idea·mybatis
柒@宝儿姐7 小时前
Git的下载与安装
前端·javascript·vue.js·git·elementui·visual studio
敲敲敲敲暴你脑袋7 小时前
【cesium】绘制贴地线面和自定义Primitive
javascript·webgl·cesium
曈欣7 小时前
vue 中属性值上变量和字符串怎么拼接
前端·javascript·vue.js
计算机学姐8 小时前
基于SpringBoot+Vue的宠物医院管理系统
java·vue.js·spring boot·后端·mysql·intellij-idea·mybatis
热门推荐
01组基轨迹建模 GBTM的介绍与实现（Stata 或 R）02RAG 实践- Ollama+RagFlow 部署本地知识库032024年高教社杯数学建模国赛C题超详细解题思路分析04yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）05CCF-CSP认证考试 202406-3 文本分词 100分题解06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07【SCS-CN】SCS-CN模型中CN值的确定08苍穹外卖面试总结09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10蓝牙安全入门——两道CTF题目复现