vue3.0 组合API

最新推荐文章于 2024-06-20 00:05:59 发布
最新推荐文章于 2024-06-20 00:05:59 发布
阅读量294 收藏 1
点赞数
分类专栏： vue3.0 + ts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47409897/article/details/115320742
版权

目录

vue3.0 API

Ref 语法

  • 作用：这是定义一个普通数据类型响应式数据
    • string,number,boolean,arr 等
    • 获取 ref 的值的时候，需要通过 .value 的方式去获取到的！
    • 修改 ref 定义的普通数据的时候，需要使用 XXX.value
<div>{{ count }}</div> // 显示count
<button @click="countAdd">count++</button>
<button @click="getUser">点击获取用户名</button> // 点击 获取当前的 count
// 数据的双向绑定
<input type="text" placeholder="请输入" v-model="count" />

// 引入
import { defineComponent, ref } from "vue";

  // 使用
  setup() {
    const count = ref(0);

    // count ++
    const countAdd = () => {
      count.value = count.value + 1;
    };

      // 获取用户名
    const getUser = () => {
      console.log("day", count.value);
      alert(count.value);
    };
    // 类似 vue2之中的 data的定义数据
    return {
      count,
      countAdd,
      getUser
    };
  }

reactive 语法

  • 作用：实现复杂数据的 响应式数据
    • 定义对象 obj
    • 修改 reactive 定义的对象的属性 obj.XXX
    <div>用户信息 -- {{ userInfo.username }} -- {{ userInfo.age }}</div>
    <button @click="getUser">点击获取用户名</button>
    <button @click="setUser">点击修改用户名</button>
    // 数据的双向绑定
    <input type="text" placeholder="请输入" v-model="userInfo.age" />

import { defineComponent, reactive } from "vue";
export default defineComponent({
  name: "Reg",
  // 组合 api 里面的
  setup() {
    const userInfo = reactive({
      username: "pink",
      age: 20
    });

    // 获取用户名
    const getUser = () => {
      console.log("day", userInfo.age);
      alert(userInfo.age);
    };
    const setUser = () => {
      userInfo.age = 30;
    };

    // 类似 vue2之中的 data的定义数据 并且传递所操作的方法
    return {
      userInfo,
      getUser,
      setUser
    };
  }
});

toRefs 的作用

  • toRefs 函数可以将 reactive()创建出来的响应式对象，对当前的响应式对象进行结构后，还是响应式数据，否则的话，直接使用...的时候，解构的并非响应式数据！
    <button @click="setAge">点击修改年龄</button>
    <div>
      我是age: {{ age }}
      <input type="text" placeholder="请输入" v-model="age" />
    </div>

  // 引入
  import { defineComponent, ref, reactive, toRefs } from "vue";
  // 组合 api 里面的
  setup() {
    const userInfo = reactive({
      username: "pink",
      age: 20
    });

    const setAge = () => {
      userInfo.age = 30;
    };

    // 类似 vue2之中的 data的定义数据 并且传递所操作的方法
    return {
      setAge,
      // 由于 reactive 定义的是响应式数据，直接使用 ...的时候 是转化为普通对象属性了，达不到响应式效果，
      // 因此需要使用 toRefs 把普通对象的属性 和 响应式对象的属性一一匹配 之后才实现响应式数据
      // ...userInfo
      ...toRefs(userInfo)
    };
  }

readonly 不常使用

  • 作用：就是把响应式数据修改为普通数据，不具备响应式属性，只能起到只读效果
<template>
  <div>
    <div>
      <div>
        <div>原始对象</div>
        <div>
          <input type="text" placeholder="userName" v-model="obj.userName" />
        </div>
        <div>{{ obj.userName }}</div>
        <div>
          <div>readonly 修改响应式数据为只读效果</div>
          <input type="text" placeholder="userName" v-model="user.userName" />
        </div>
        <div>{{ user.userName }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, readonly } from "vue";
export default defineComponent({
  name: "Reg",
  components: {},
  setup() {
    // 定义一个原始对象 不具有响应式属性
    let obj = {
      userName: "小渣亮",
      age: 30,
    };
    let user = reactive({
      userName: "lala",
    });
    // 把响应式数据 转化 为原始数据 不具有响应式
    user = readonly(user);
    return {
      obj,
      user,
    };
  },
});
</script>

toRef

  • 作用：
    • 就是从响应式数据(对象)之中的某一个属性，单独拿出去使用，依旧需要转化为响应式数据
    • 当这单独拿出来的数据，发生改变的时候，都是具有响应式的，和那个响应式对象也是有关联的！
    • 注意点：一般来说，都是直接使用 toRefs 的方式 去转化为响应式数据的！
<template>
  <div>
    <div>
      我是响应式数据 的username --- {{ username }}
      <button @click="setUserName">修改userInfo 中的username</button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, toRef } from "vue";
export default defineComponent({
  name: "About",
  components: {},
  setup() {
    let userInfo = reactive({
      username: "pink",
      age: 20,
    });
    // 使用 toRef的方式
    // let username = toRef(userInfo, "username");
    // const setUserName = () => {
    //   username.value = "傻屌";
    // };
    // 使用 toRefs的方式
    const setUserName = () => {
      userInfo.username = "傻屌";
    };

    return {
      // username, 使用 toRef的方式
      ...toRefs(userInfo), // 使用 toRefs的方式
      setUserName,
    };
  },
});
</script>

isRef

  • 作用：
    • 判断当前的值 是否为 ref 定义的响应式数据值
<template>
  <div></div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, toRef, ref, isRef } from "vue";
export default defineComponent({
  name: "About",
  components: {},
  setup() {
    let userInfo = reactive({
      username: "pink",
    });
    let count = ref(0);
    console.log(isRef(count)); // true
    let stateUser = toRefs(userInfo);
    console.log(isRef(stateUser)); // false
    console.log(isRef(stateUser.username)); // true 这是由于 使用 ...运算符展开了

    return {};
  },
});
</script>

unref

  • 作用：
    • 就是判断当前的对象，是否为响应式对象，若是就返回响应式对象，否则的话返回普通对象
    • unref(obj) === isRef(obj) ? obj.value : obj;
<template>
  <div></div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, unref } from "vue";
export default defineComponent({
  name: "About",
  components: {},
  setup() {
    let userInfo = {
      uName: "ppp",
    };
    const obj = unref(userInfo);
    let obj2 = reactive({
      uName: "popo",
    });
    obj2 = unref(obj2);
    // unref(obj) === isRef(obj) ? obj.value : obj; 就是判断当前的对象，是否为响应式对象，若是就返回响应式对象，否则的话返回普通对象
    console.log("obj", obj, "obj2", obj2);
    // 结果
    // obj {uName: "ppp"} => 普通对象  ； obj2 Proxy {uName: "popo"} => 响应式对象
  },
});
</script>

ref

  • 作用：
    • 定义一个 ref 值，获取当前节点值，可以用于修改里面的文本等！
ref 在元素上使用
<template>
  <div>
    <div ref="child">我是 child啊</div>
    <button @click="setName">改变名称</button>
    <button @click="getName">获取名称</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "About",
  components: {},
  setup() {
    let child: any = ref(null);
    const setName = () => {
      child.value.innerText = "被修改的child";
      // console.log("修改的", child.value); // 获取到当前节点  <div ref="child">我是 child啊</div>
    };
    const getName = () => {
      console.log("获取哦", child.value); // 获取到当前节点  <div ref="child">我是 child啊</div>
    };
    return {
      child,
      setName,
      getName,
    };
  },
});
</script>
ref 在组件之中使用
  • 作用：
    • 父组件，可以拿到子组件，并且操作子组件的方法等！
  • 父组件
<template>
  <div>
    <div>
      我是父组件 --- 操作子组件
      <button @click="changeSonName">父修改子组件name</button>
      <Son ref="son" />
    </div>
  </div>
</template>

<script lang="ts">
import Son from "./childCom/Son.vue";
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "About",
  components: {
    Son,
  },
  setup() {
    let son: any = ref(null);
    const changeSonName = () => {
      // son.value 拿到son组件的实例对象
      // console.log("son", son.value);
      son.value.changeCName(); // 调用子组件的  changeCName 方法
    };
    return {
      son,
      changeSonName,
    };
  },
});
</script>
  • 子组件
<template>
  <div>我是子组件cName --- {{ cName }}</div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "Son",
  components: {},
  setup() {
    let cName = ref("张三");
    const changeCName = () => {
      cName.value = "李四";
    };
    return {
      cName,
      changeCName,
    };
  },
});
</script>
ref 结合数组的操作
<template>
  <div>
    <ul>
      <!-- 注意点：el就是 当前li的本身 也就是把当前的数据注入到当前li之中 -->
      <li
        v-for="(item, index) in arr"
        :key="item.id"
        :ref="
          (el) => {
            if (el) list[index] = el;
          }
        "
      >
        {{ item.age }}
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
export default defineComponent({
  name: "About",
  components: {},
  setup() {
    let list = ref([]);
    let arr = ref([
      {
        id: 1,
        age: 20,
      },
      {
        id: 2,
        age: 30,
      },
    ]);
    onMounted(() => {
      // list.value 可以拿到当前 list数组的每一个对象的数据
      console.log("list", list.value[0]); //<li data-v-039c5b43="">20</li> 拿到当前的节点
      console.log("arr", arr.value[0]); // Proxy {id: 1, age: 20} 响应式数据
    });
    return {
      arr,
      list,
    };
  },
});
</script>
<style lang="scss" scoped></style>
小小liang
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简单的整理一下Vue3的组合API
数组喜欢打对象的博客
11-28 1078
1. Vue3的生态和优势 社区生态 - 逐步完善 整体优化 - 性能优化/TS支持优化/组合式API加持 市场使用 - 部分技术选型激进的公司已经在生产环境使用了vue3 社区生态 组件（插件）名称 官方地址 简介 ant-design-vue Ant Design Vue ant-design-vue 是 Ant Design 的 Vue 实现，组件的风格与 Ant Design 保持同步 element-plus A Vue 3 U
【Vue3.0】Vue3.0组合式API的使用
lixiaosenlin的专栏
11-18 2097
前言 小伙伴们大家好。为期近半个月的TypeScript分享到这里就结束了，当然了前面关于TypeScript的分享都是一些表面的基础知识，想要更深入的了解还需要多学多练多看源码，本猴就不再做过多分享了。 从今天开始将为小伙伴们奉上关于Vue3.0相关知识的一些分享。vue3.0相较于vue2.0还是有很大的改变的，个人感觉vue3.0的用法更接近于react的了。至于一些语法指令啥的相较于2.0没有什么变化，这里就不再分享了。那么我们要学习的是3.0中的一些变化和新的技术点，下面我们先从vue3.0的使
Vue3笔记
qq_47243637的博客
02-15 150
Vue3笔记
Vue3进阶——组合式API
最新发布
ning_xiao_xuan的博客
06-20 1208
Vue3进阶——组合式API
vue3.0之组合API有哪些(详解)
Gik99的博客
07-16 1027
vue3.0之组合API有哪些(详解)
vue3.0 组合式API
sodakii的博客
09-26 515
setup函数是组合API的入口函数。
Vue3入门
weixin_49405038的博客
05-12 879
Vue3带来的新变化 性能提升 首次渲染更快 diff算法更快 内存占用更少 打包体积变小 更好的Typescript支持 Composition API （重点） 在使用vue2.x版本开发较复杂的组件时，逻辑难以复用，组合式api的出现可以解决此类问题 3. 破坏性语法更新 vue3.0对于2.0版本的大部分语法都是可以兼容的，但是也有一些破坏性的语法更新，这个大家要格外注意 实例方法$on移除 （eventBus现有实现模式不再支持 可以使用三方插件替代） 过滤器filter
Vue3.0中常用的组合API有哪些？
sdasadasds的博客
12-13 873
【代码】Vue3.0中常用的组合API有哪些？
前端开发最新Vue3.0组合式api使用总结
08-04
Vue3.0作为一款现代化的前端框架，引入了许多新特性以提升开发效率和代码可维护性，其中最重要的改进之一就是组合式API。这篇总结将详细阐述Vue3.0中的组合式API，帮助开发者理解并掌握这些关键概念。 1. **setup...
浅谈Vue3.0新版API之composition-api入坑指南
10-15
Vue3.0带来了全新的Composition API，这是一个革命性的变化，旨在提高代码的组织性和可重用性。在Vue2.x中，我们通常使用Option API，将数据、方法、生命周期钩子等分散在不同的选项中。然而，随着项目复杂度的增加...
Vue 3.0 前瞻Vue Function API新特性体验
10-16
Vue 3.0 是一个备受瞩目的前端框架更新版本，其中引入了Vue Function API这一新特性，它为Vue组件的编写带来了重大变革。Vue Function API 通过使用函数而非对象的方式来组织组件逻辑，使得组件的复用变得更加灵活和...
vue3.0源码.zip
08-25
这个压缩包文件"vue3.0源码.zip"包含了Vue 3.0的源代码，是学习和深入理解Vue 3.0内部工作原理的宝贵资源。下面，我们将探讨一些关键的知识点： 1. **Composition API**：Vue 3.0 引入了Composition API，允许...
Vue.js 3.0 API 官方手册 中文pdf版(含源码).zip
08-17
这份“Vue.js 3.0 API 官方手册 中文pdf版”是学习Vue 3的重要资源，它详尽地解释了新版本中的各种特性、接口和最佳实践。 1. **Composition API**： Vue 3 引入了Composition API，允许开发者将逻辑组件化，提高...
VUE3.0常用API总结
lyf976229437的博客
05-06 801
VUE3.0常用API总结 官方api 官网进入后默认2.0 自行切换 组合式 API setup setup执行的时机 在beforeCreate之前执行一次，this是undefined。 setup的参数 props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。 // 第一种情况 <script> export default { props: { num: Number }, setup(props) { console.l
Vue3.0语法重点API整理一
xiaomao_wxj的博客
02-28 1446
vue3.0重点API整理
vue3.0之组合API（Composition API）
qq_39085895的博客
12-15 740
vue3.0组合API 一、ref 下面是ref的使用 代码片。 注意：ref只能监听简单类型的变化， 不能监听复杂类型的变化（数组/对象） 复杂类型使用reactive监听，示例： import {reactive} from 'vue'; let s = reactive({a:[]}) //App1.vue <template> <div> <p>{{count}}</p> <input @cli
Vue3-常用的Composition API（组合API）
qq_56973906的博客
09-18 1890
script setup> 语法糖里面的代码会被编译成组件setup()函数的内容，不需要通过return暴露声明的变量、函数以及import引入的内容，即可在使用，并且不需要些export default{}这意味着与普通的 只在组件被首次引入的时候执行一次不同， 中的代码会在每次组件实例被创建的时候执行。setup不能是一个async函数，因为返回值不再是return的对象，而是Promise，模板看不到return对象中的属性。
vue3.0 新增和更改的一些新的api和功能
郝峰vip的博客
04-21 967
vue3.0新增的和更改的api,以及与vue2.0的区别
vue3的API详细方法具体使用
痕 ` 浅
08-08 562
vue3初识
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值