Vue3 中常用的API

1. vue3中的ref、toRef、toRefs

ref: 用于创建一个包装对象,将普通 JavaScript 值转换为响应式对象。通常用于定义组件内部的响应式数据。

js 复制代码
import { ref } from 'vue';
const count = ref(0); // 创建一个包装对象,初始值为 0
console.log(count.value); // 访问响应式数据时需要使用 .value 属性

toRef: 用于创建一个基于响应式对象的引用。当我们需要在组件内将一个响应式对象的属性传递给另一个函数或组件时,可以使用 toRef 创建一个基于响应式对象属性的引用,而不是直接将属性值传递。

js 复制代码
import { toRef } from 'vue';
const state = reactive({ count: 0 });
// 创建一个基于 state.count 的引用
const countRef = toRef(state, 'count');
console.log(countRef.value); // 访问引用的值

toRefs: 用于将一个响应式对象的所有属性转换为引用。通常在组件的 setup 函数中使用,将响应式对象解构为多个引用,方便在模板中使用。

js 复制代码
import { reactive, toRefs } from 'vue';
const state = reactive({ count: 0, name: 'Vue' });
// 将 state 的所有属性转换为引用
const { count, name } = toRefs(state);
console.log(count.value); // 访问引用的值
console.log(name.value); // 访问引用的值

总之,ref 用于创建一个包装对象,将普通值转换为响应式对象;toRef 用于创建一个基于响应式对象的引用;toRefs 用于将一个响应式对象的所有属性转换为引用。

2. provide/inject如何实现跨层传递数据

定义

  • provideinject用来实现组件之间的数据传递,它们更适用跨多个层级的组件传递数据,而不仅仅是父子组件之间的通信。

  • provide:用于提供可以被后代组件注入的值。

  • provideinject 通常成对一起使用,使一个祖先组件作为其后代组件的依赖注入方,无论这个组件的层级有多深都可以注入成功,只要他们处于同一条组件链上。

  • 这个 provide 选项应当是一个对象或是返回一个对象的函数。这个对象包含了可注入其后代组件的属性。

  • inject:用于声明要通过从上层提供方匹配并注入进当前组件的属性。

实现

新建项目 App.js 代码如下:

js 复制代码
import { h, provide, inject } from "vue";

const Provider = {
  name: "provider",
  setup() {
    provide("foo", "fooVal");
    provide("bar", "barVal");
    return {};
  },
  render() {
    return h("div", {}, [h("p", {}, "provider"), h(Consumer)]);
  },
}; 

const Consumer = {
  name: "consumer",
  setup() {
    const foo = inject("foo");
    const bar = inject("bar");
    return {
      foo,
      bar
    };
  },
  render() {
    return h("div", {}, [
      h("p", {}, `consumer:${this.foo} - ${this.bar}`),
    ]);
  },
};

export const App = {
  name: "app",
  render() {
    return h("div", {}, [h("p", {}, "app"), h(Provider)]);
  },
  setup() {
    return {};
  },
};
  • 以上代码,定义了三个组件appprovideconsumer形成一个树状的层级关系。
  • app组件中引用了provide组件。provide组件中注入了foobar,并且引用了consumer组件。
  • consumer组件通过inject获取到foobar,并在组件内部渲染这两个值。
相关推荐
拼图2099 小时前
element-plus——图标推荐
javascript·vue.js·elementui
midsummer_woo12 小时前
基于springboot+vue+mysql工程教育认证的计算机课程管理平台(源码+论文)
vue.js·spring boot·mysql
喝拿铁写前端13 小时前
技术是决策与代价的平衡 —— 超大系统从 Vue 2 向 Vue 3 演进的思考
前端·vue.js·架构
豆豆(设计前端)13 小时前
如何成为高级前端开发者:系统化成长路径。
前端·javascript·vue.js·面试·electron
苦瓜若叶睦13 小时前
Vue (Official) v3.0.2 新特性 为非类npm环境引入 globalTypesPath 选项
vue.js
springfe010114 小时前
模块与组件区别
javascript·vue.js
结衣结衣.15 小时前
Vue3入门-计算属性+监听器
前端·javascript·vue.js·vue·js
哎呦薇16 小时前
从开发到发布:手把手教你将Vue组件上传npm
前端·vue.js
用户38022585982416 小时前
vue3源码解析:生命周期
前端·vue.js·源码阅读
markyankee10118 小时前
Vue-Router:构建现代化单页面应用的路由引擎
前端·vue.js