16. vue3合成API,setup,reactive,toRef,toRefs,Ref,watchEffect,watch,project,inject

2023年8月4日上午7:29 • Python • 阅读 50

合成API 就是是相对应选项API。将相关联的数据和方法放置在一起编排。方便查看修改。
setup函数在创建组件之前执行，所以不能用this。
它跟data有点类似，都是有返回值，返回数据或者方法。

vue3中的 toRef Ref . toRef 是引用数据 Ref是复制数据
https://www.cnblogs.com/fsg6/p/14485509.html

示例一：与data写法非常类似

<template>
  <div>
    <h1 @click="changeEvent"> data计数:{{num}}</h1>
    <h1 > setup计数:{{count}}</h1>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import {ref} from "vue"
export default {
  name: "App",
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    changeEvent: function () {
      this.num++;
    },
  },
  components: {},
  setup(){
    const count= ref(0)
    return {count}
  }
};
</script>

示例二：setup执行的时机

<template>
  <div>
    <h1 @click="changeEvent">data计数:{{ num }}</h1>
    <h1>setup计数:{{ count }}</h1>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import { ref } from "vue";
export default {
  name: "App",
  data() {
    console.log("data");
    return {
      num: 0,
    };
  },
  methods: {
    changeEvent: function () {
      this.num++;
    },
  },
  components: {},
  setup() {
    console.log("setup");
    const count = ref(0);
    return { count };
  },
  beforeCreate() {
    console.log("beforeCreate: 初始化数据之前");
  },
  created() {
    console.log("created: 数据初始化之后");
  },
  beforeMount() {
    console.log("beforeMount:挂载渲染之前");
  },
  mounted() {
    console.log("mounted: 挂载渲染之后");
  },
  beforeUpdate() {
    console.log("beforeUpdate: 更新之前");
  },
};
</script>

结果：在初始化数据之前

16. vue3合成API,setup,reactive,toRef,toRefs,Ref,watchEffect,watch,project,inject

示例三：setup中添加普通方法

<template>
  <div>
    <h1 @click="changeEvent">data计数:{{ num }}</h1>
    <h1 @click="changeCount">setup计数:{{ count }}</h1>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import { ref } from "vue";
export default {
  name: "App",
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    changeEvent: function () {
      this.num++;
    },
  },
  components: {},
  setup() {
    const count = ref(0);
    function changeCount(){
      //setup当中取值需要加value,外面引用不需要
      count.value+=10
    }
    // 添加函数后，需要将其返回
    return { count,changeCount };
  },
};
</script>

<template>
  <div>
    <h1 >用户名：:{{ username }}</h1>
    <h1 @click="changeType">{{ type }}</h1>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import { ref,reactive, toRefs } from "vue";
export default {
  name: "App",
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    changeEvent: function () {
      this.num++;
    },
  },
  components: {},
  setup() {
    const count = ref(0);
    function changeCount(){
      //setup当中取值需要加value,外面引用不需要
      count.value+=10
    }

    const user = reactive({
      username:"老陈",
      age:30,
      type:"帅",
    })

    function changeType(){
      user.type="超级帅！"
    }

    // 添加函数后，需要将其返回
    return { count,changeCount,...toRefs(user),changeType };
  },
};
</script>

示例四： setup中reactive(响应式对象)

<template>
  <div>
    <h1 @click="changeEvent">data计数:{{ num }}</h1>
    <h1 @click="changeCount">setup计数:{{ count }}</h1>
    <h1 >用户名：:{{ user.username }}</h1>
    <h1 >特点:{{ user.type }}</h1>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import { ref,reactive } from "vue";
export default {
  name: "App",
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    changeEvent: function () {
      this.num++;
    },
  },
  components: {},
  setup() {
    const count = ref(0);
    function changeCount(){
      //setup当中取值需要加value,外面引用不需要
      count.value+=10
    }
    const user = reactive({
      username:"老陈",
      age:30,
      type:"帅",
    })
    // 添加函数后，需要将其返回
    return { count,changeCount,user };
  },
};
</script>

示例五： setup中toref/torefs 直接饮用属性

<template>
  <div>
    <h1 >用户名：:{{ username }}</h1>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import { ref,reactive, toRefs } from "vue";
export default {
  name: "App",
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    changeEvent: function () {
      this.num++;
    },
  },
  components: {},
  setup() {
    const count = ref(0);
    function changeCount(){
      //setup当中取值需要加value,外面引用不需要
      count.value+=10
    }
    const user = reactive({
      username:"老陈",
      age:30,
      type:"帅",
    })
    // 添加函数后，需要将其返回.因为user有很多属性，所以用toRefs,...表示解构
    return { count,changeCount,...toRefs(user) };
  },
};
</script>

示例六： setup中computed 调用对象内部的函数

<template>
  <div>
    <h1 >用户名：:{{ username }}</h1>
    <h1 @click="changeType">{{ type }}</h1>
    <h1>{{ reverseType }}</h1>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import { ref,reactive, toRefs,computed } from "vue";
export default {
  name: "App",
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    changeEvent: function () {
      this.num++;
    },
  },
  components: {},
  setup() {
    const count = ref(0);
    function changeCount(){
      //setup当中取值需要加value,外面引用不需要
      count.value+=10
    }

    const user = reactive({
      username:"老陈",
      age:30,
      type:"帅!",
      reverseType:computed(()=>{
        return user.type.split('').reverse().join('')
      })

    })

    function changeType(){
      user.type="超级帅！"
    }

    // 添加函数后，需要将其返回
    return { count,changeCount,...toRefs(user),changeType };
  },
};
</script>

示例七： setup中的watchEffect,watch 监听

<template>
  <div>
    <h1 >用户名：:{{ username }}</h1>
    <h1 @click="changeType">{{ type }}</h1>
    <h1>{{ reverseType }}</h1>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import { ref,reactive, toRefs,computed,watchEffect } from "vue";
export default {
  name: "App",
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    changeEvent: function () {
      this.num++;
    },
  },
  components: {},
  setup() {
    const count = ref(0);
    function changeCount(){
      //setup当中取值需要加value,外面引用不需要
      count.value+=10
    }

    const user = reactive({
      username:"老陈",
      age:30,
      type:"帅!",
      reverseType:computed(()=>{
        return user.type.split('').reverse().join('')
      })

    })

    function changeType(){
      user.type="超级帅！"
    }

    watchEffect(()=>{
      console.log(user.type)
      console.log('当usertype改变的时候，会触发此事件')
    })

    //单独监听
    watch(num,(newNum,preNum)=>{
      console.log(newNum,preNum)
    })
    //多个监听
    watch([num,user],(newNum,preNum)=>{
      console.log(newNum,preNum)
    })

    // 添加函数后，需要将其返回
    return { count,changeCount,...toRefs(user),changeType };
  },
};
</script>

<template>
<div>
  <h1 @click="changeEvent">计数:{{count}}h1>
  <h1 @click="changeNum">计数:{{num}}h1>

  <h1>用户名:{{user.username}}h1>
  <h1>用户名:{{user.type}}h1>

  <h1>用户名:{{username}}h1>
  <h1 @click="changeType"> 特点:{{type}}h1>
  <h1>特点翻转:{{reverseType}}h1>
div>
template>

<script>

import {ref,reactive,toRefs,computed,watchEffect,watch} from 'vue'
export default {
  name: 'App',
  data(){
    return {
      count:0
    }
  },
  methods:{
    changeEvent(){
        this.count++
    }

  },

  setup(){
    console.log("setup")

    const num=ref(0)

    const user = reactive({
      username:"老陈",
      age:30,
      type:"帅",

      reverseType:computed(()=>{
        return user.type.split('').reverse().join('')
      })
    })
    function changeType(){
      user.type="超级帅！"
    }

    function changeNum(){
      num.value+=10
    }

    watchEffect(()=>{
      console.log(user.type)
      console.log('当usertype改变的时候，会触发此事件')
    })

    watch(num,(newNum,preNum)=>{
      console.log(newNum,preNum)
    })

    watch([num,user],(newNum,preNum)=>{
      console.log(newNum,preNum)
    })
    return {num,changeNum,user,...toRefs(user),changeType}
  }
}
script>

<template>
    <div>
        <h1>username:{{username}}h1>
        <h1>age:{{age}}h1>
        <h1>description:{{description}}h1>
    div>
template>

<script>
import {ref,onBeforeMount,onMounted,onBeforeUpdate,onBeforeUnmount,onUnmounted} from 'vue'

export default {
    setup(props,content){
        console.log(props)
        console.log(content)
        const description = ref(props.username+"年龄是"+props.age)
        onBeforeMount(()=>{
            console.log("onBeforeMount")
        })
        onBeforeMount(()=>{
            console.log("onBeforeMount")
        })
        return {
            description
        }
    },
    props:[
        'username','age'
    ]
}
script>

示例八：父向子传内容 props

子组件

<template>
    <div>
        <h1>username:{{username}}</h1>
        <h1>age:{{age}}</h1>
        <h1>description:{{description}}</h1>
    </div>
</template>

<script>
import {ref} from 'vue'
//content 获取父元素的内容
export default {
    setup(props){
        console.log(props)
        //props.username注意这儿只能用props 不能用this，因为setup函数 是在对象没生成前执行
        const description = ref(props.username+"年龄是"+props.age)
        return {
            description
        }
    },
    props:[
        'username','age'
    ]
}
</script>

父组件

<template>
  <div>
    <User :username="username" :age="age"/>
  </div>
</template>

<script>
import User from "./components/User.vue";
export default {
  name: "App",
  data() {
    return {
      username: "zhangsan",
      age:10
    };
  },
  methods: {
    changeEvent: function () {
      this.num++;
    },
  },
  components: {
    User
  },
};
</script>

示例九： contents

首先，setup(props,contents) 默认是包含这两个传递参数。contents就是上下文的意思。例如
子组件

<template>
    <div>
        <h1>username:{{username}}</h1>
        <h1>age:{{age}}</h1>
        <h1>description:{{description}}</h1>
    </div>
</template>

<script>
import {ref} from 'vue'
//content 获取父元素的内容
export default {
    setup(props,contents){
        console.log(contents)
        console.log(props)
        //props.username注意这儿只能用props 不能用this，因为setup函数 是在对象没生成前执行
        const description = ref(props.username+"年龄是"+props.age)
        return {
            description
        }
    },
    props:[
        'username','age'
    ]
}
</script>

父组件

<template>
  <div>
    // contents 可以获取到父元素的属性例如这个class
    <User :username="username" :age="age" class="abc" />
  </div>
</template>

<script>
import User from "./components/User.vue";
export default {
  name: "App",
  data() {
    return {
      username: "zhangsan",
      age:10
    };
  },
  methods: {
    changeEvent: function () {
      this.num++;
    },
  },
  components: {
    User
  },
};
</script>

示例十： setup中生命周期函数

<template>
    <div>
        <h1>username:{{username}}</h1>
        <h1>age:{{age}}</h1>
        <h1>description:{{description}}</h1>
    </div>
</template>

<script>
import {ref,onBeforeMount,onMounted,onBeforeUpdate,onBeforeUnmount,onUnmounted} from 'vue'
//content 获取父元素的内容
export default {
    setup(props,content){
        console.log(props)
        console.log(content)
        const description = ref(props.username+"年龄是"+props.age)
        onBeforeMount(()=>{
            console.log("onBeforeMount")
        })
        onBeforeMount(()=>{
            console.log("onBeforeMount")
        })
        return {
            description
        }
    },
    props:[
        'username','age'
    ]
}
</script>

示例十一：project,inject

<template>
<div>
  <Student/>
</div>
</template>
<script>
// reactive : 用它创建一个响应对象,watchEffect 监听事件改变
// 通过provide函数 把对应的信息（学生信息）提供出去，然后需要用的组件通过注入inject的方式将数据得到
import {reactive,provide} from 'vue'
import Student from './components/Student.vue'
export default {
  name: 'App',
  data(){
    return {
    }
  },
  methods:{
  },
  components:{
    Student
  },
  // 合成 API  让数据和处理函数可以放在一起。 值是存储在num.value中
  setup(){
    // 通过provide函数 把自定义的信息提供供出去，provide：提供出去 inject: 注入进来
    const student = reactive({
      name:"小红",
      classname:"三年五班"
    })
    // 把student 通过stu1 传递出去
    provide('stu1',student)

    return {}
  }
}
</script>

<template>
    <div>
        <h1>学生</h1>
        <h1>name:{{name}}</h1>
        <h1>classname:{{classname}}</h1>
    </div>
</template>

<script>
import {inject} from 'vue'
//content 获取父元素的内容
//通过注入inject的方式将数据得到
export default {
    setup(props,content){
        const stu= inject('stu1')
        // ... 将对象解构出来
        return {...stu}
    }
}
</script>

Original: https://blog.csdn.net/wangzhicheng987/article/details/123556765
Author: 数哥
Title: 16. vue3合成API,setup,reactive,toRef,toRefs,Ref,watchEffect,watch,project,inject

原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/733620/

转载文章受原作者版权保护。转载请注明原作者出处！

python

【自取】最近整理的，有需要可以领取学习：

Linux核心资料大放送~

全栈面试题汇总（持续更新&可下载）

一个提高学习100%效率的工具！

【超详细】深度学习面试题目！

LeetCode Python刷题答案下载！

LeetCode Java版刷题答案下载！

LeetCode C++ 版本，抓紧保存！

LeetCode GO语言刷题答案下载！

python检测线段是否含有勾

-*- coding: utf-8 -*-# import math lines_dic = { "正常": [ [[0, 0], [1, 1], [2, 2]…

Python 2023年6月6日
0077
【python】matplotlib 实现双（多）Y轴图

【python】matplotlib 实现双（多）Y轴图先来点简单的两个Y轴三个以及多个Y轴来亿点点美化先来点简单的先来个最简单的画图，比如一个 y = s i n (…

Python 2023年8月30日
0041
解决Tensorflow ValueError: Failed to convert a NumPy array to a Tensor (Unsupported object type numpy.ndarray)

问题描述在将一个数组送入tensorflow训练时，报错如下： ValueError: Failed to convert a NumPy array to a Tensor (…

Python 2023年5月24日
00191
2022最全最新前端面试题（附加解答）

JS 1、说一下innerHTML 与 innerText的作用与区别？作用：都可以获取或者设置元素的内容区别：innerHTML可以解析内容中的html标签 innerTex…

Python 2023年11月6日
0044
matplotlib 设置标注方向_Matplotlib 画图标注annotate详解

标注基本标注使用text()会将文本放置在轴域的任意位置。文本的一个常见用例是标注绘图的某些特征，而annotate()方法提供辅助函数，使标注变得容易。在标注中，有两个要…

Python 2023年9月5日
0039
2022年各国程序员编程水平排行榜出炉，排名第一的国家没听说过

哪个地方的程序员编程水平最高？相信很多人对这个问题感兴趣，今天就来聊一聊这个话题。 Pentalog 是一个全球数字服务平台，主要帮助企业寻找世界上一流的IT人才，每年都会发布一份…

Python 2023年10月9日
0051
Anaconda虚拟环境安装GPU版本的pytorch

1. 首先安装好Anaconda 2. 安装完之后Anaconda默认是没有桌面快捷方式的，需要点击【开始】，找到Anaconda，点击Anaconda Prompt 如果你不会科…

Python 2023年9月27日
0059
计算机视觉项目实战-基于特征点匹配的图像拼接

😊😊😊 欢迎来到本博客😊😊😊本次博客内容将继续讲解关于OpenCV的相关知识🎉 作者简介：⭐️⭐️⭐️ 目前计算机研究生在读。主要研究方向是人工智能和群智能算法方向。目前熟悉深度学…

Python 2023年10月10日
0073
Django 使用VScode 创建工程

1 地址 2 mysite(项目名)，创建Django 项目，可以和虚拟环境放在同一目录，也可以放在虚拟环境的文件夹里。 django-admin startproject mys…

Python 2023年6月9日
00101
关于idea中使用tomcat控制台出现乱码的问题

在idea中首次使用tomcat部署后在服务区可能会出现乱码，乱码的形式主要为两种第一种就是日志信息出现乱码，就是红色字体的中文部分为乱码当然这种情况下也能正常使用，只是无法查…

Python 2023年11月7日
0032
Python第5天–函数

函数是被组织、可重用的代码段，用于实现单个或关联的函数，因此我经常说函数是程序员大规模使用的基础。 [En] A function is a code segment that i…

Python 2023年5月24日
0068
python3 音乐播放器_Python3_pygame—简易的音乐播放器

Python3_pygame—简易的音乐播放器在pygame的学习中，接触到了其中的mixer.music模块，突发想法，就写了这个音乐播放器，可能时间不是太多，就只做了基础的部…

Python 2023年9月23日
0034
Python-apply()、applymap()、map()的使用和区别

将一个自定义的函数应用到Pandas的数据结构中可以使用map(), apply()或者applymap()，它们的区别在于应用的对象不同。 1.map() 是一个Series的方…

Python 2023年8月7日
0041
Flask-script使用及错误No module named flask._compat

; 先说问题在使用过程到遇到问题，提示没有 flask._compat模块 (flask-projs) [root@test-xxxx-01-vm] Traceback (mos…

Python 2023年8月11日
00100
pip安装报错：Command python setup.py egg_info failed with error code 1

原文链接 windows下使用pip安装torch模块，出现错误： ERROR: Command “python setup.py egg_info” fa…

Python 2023年5月24日
0098
2021年一个python爬虫,完整代码,直接复制代码就可以试下效果,非常完美

import urllib.requestimport urllib.parseimport reimport os 添加header，其中Referer是必须的,否则会返回403…

Python 2023年8月13日
0067

2024 年 5 月
一	二	三	四	五	六	日
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31