vue3 Component API

已于 2022-07-27 14:17:58 修改
阅读量1.9k 收藏 3
点赞数
文章标签： 前端 javascript vue
于 2022-07-01 10:10:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Anna_Liqi/article/details/125508406
版权

项目代码仓库：https://github.com/chenfenbgin/component-api
https://github.com/chenfenbgin/other_components
注：Component API也是用来替代Mixin的。

一、Mixin 和 extends

1、Mixin在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

2、extends

在这里插入图片描述

二、Component Api

在这里插入图片描述

在这里插入图片描述

1、setup的参数

在这里插入图片描述

<template>
  <div id="app">
    home page
    <!-- 这里使用父组件传过来的值 -->
    <h2>{{ message }}</h2>
    <h2>{{ title }}</h2>
    <h2>当前计算： {{ counter }}</h2>
    <!-- <button @click="btnClick">按钮</button> -->
  </div>
</template>

<script type="text/javascript">
export default {
  name: "app",

  props: {
    message: {
      type: String,
      required: true,
    },
  },

  // setup函数有哪些参数？
  // setup函数有什么样的返回值

  // setup写法一：两个参数
  /**
   * 参数一： props, 父组件传递过来的属性,这里如果想要使用props参数，必须这么写
   */
  // setup(props, context) {
  //   // setup里面不能使用this，无法获取this.props
  //   // console.log(this.props);
  //   console.log("props", props.message);

  //   // 我们不可以这么发出事件
  //   // this.$emit()
  //   console.log('id, class', context.attrs.id, context.attrs.class);
  //   console.log('slots', context.slots);
  //   console.log('emit', context.emit);
  // },

  // 之前的发出事件，写了setup，以后就不再这么写了，当然，也不可以在setup中直接使用this.$emit()
  // methods:{
  //   btnClick(){
  //     this.$emit("")
  //   }
  // }

  // setup写法二：对象的解构，如果没有需要，直接对content进行解构获取只需要的属性即可
  setup(props, { attrs, slots, emit }) {
    console.log(props.message);
    console.log(attrs.id, attrs.class);
    console.log(slots);
    console.log(emit);

    // 这里可以返回数据，就不需要data(){return{}},
    return {
      title: "hello home",
      counter: 100,
    };
  },
};
</script>

<style scoped></style>

2、setup的返回值

在这里插入图片描述

<template>
  <div id="app">
    home page
    <h2>{{ message }}</h2>

    <h2>{{ title }}</h2>
    <h2>当前计算： {{ counter }}</h2>
    <button @click="increment">+1</button>
  </div>
</template>

<script type="text/javascript">
export default {
  name: "app",

  props: {
    message: {
      type: String,
      required: true,
    },
  },

  setup() {
    let counter = 100;
    // 局部函数
    const increment = () => {
      console.log("increment");
      counter++;
      // y有打印， 但是没刷新， 因为没加入响应式，因为data(){return{}}返回的数据会经过reactive函数处理， 他是响应式的
      console.log("counter", counter);
    };

    return {
      title: "hello home",
      counter,
      increment,
    };
  },
};
</script>

<style scoped></style>

3、setup中的this问题

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4、reactive Api

注：响应式对象其实是 JavaScript Proxy，其行为表现与一般对象相似。不同之处在于 Vue 能够跟踪对响应式对象 property 的访问与更改操作

在这里插入图片描述

注：
1、DOM更新的时机：当你更改响应式状态后，DOM 也会自动更新。然而，你得注意 DOM 的更新并不是同步的。相反，Vue 将缓冲它们直到更新周期的 “下个时机” 以确保无论你进行了多少次声明更改，每个组件都只需要更新一次。
若要等待一个状态改变后的 DOM 更新完成，你可以使用 nextTick() 这个全局 API。
2、深层响应性：在 Vue 中，状态都是默认深层响应式的。这意味着即使在更改深层次的对象或数组，你的改动也能被检测到。你也可以直接创建一个浅层响应式对象。它们仅在顶层具有响应性，一般仅在某些特殊场景中需要。

import { nextTick } from 'vue'
function increment() {
  state.count++
  nextTick(() => {
    // 访问更新后的 DOM
  })
}

在这里插入图片描述

5、ref Api

在这里插入图片描述

注：模板中的解包，是一个浅层解包

在这里插入图片描述

<template>
  <div>
    Home Page
    <h2>{{ message }}</h2>

    <!-- 当我们在template模板中使用ref对象，它会自动进行解包操作， 不需要写.value -->
    <h2>当前计数： {{ counter }}</h2>

    <!-- ref的解包只能是一个浅层解包（info是一个普通的js对象） -->
    <h2>当前计数：{{ info.counter.value }}</h2>

    <!-- 当如果最外层包裹的是一个reactive可响应式对象，那么内容可以解包 -->
    <h2>当前计数：{{ reactiveInfo.counter }}</h2>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
import { ref, reactive } from "vue";

export default {
  props: {
    message: {
      type: String,
      required: true,
    },
  },
  setup() {
    // reactive API对传入的类型是有所限制的，要求我们必须传入一个对象或者数组类型，如果我们传入一个基本类型（String、Number、Boolean）会报一个警告
    // const counter = reactive(100) //报警告， 要使用Ref API, ref会返回一个可变的响应式对象，该对象作为一个响应式的引用，维护它内部的值，

    // counter = 100; //100是数值类型
    // 100变成了一个ref的可响应式的引用
    let counter = ref(100);

    // 情况1：无法解包：模板中无法通过{{info.counter}}进行解包的，这只是浅层解包
    const info = {
      counter,
    };

    // 情况2：可以解包：
    const reactiveInfo = reactive({
      counter,
    });
    const increment = () => {
      counter.value++;
      console.log(counter.value);
    };

    return {
      counter,
      increment,
      info,
      reactiveInfo,
    };
  },
};
</script>

<style scoped></style>

在这里插入图片描述

6、readonly Api

在这里插入图片描述
在这里插入图片描述

注：给子组件传过去的，应该是一个响应式对象

<template>
  <div>
    <button @click="updateState">修改状态</button>
  </div>
</template>

<script>
import { reactive, readonly } from "vue";

export default {
  setup() {
    // 1.普通对象
    const info1 = { name: "chen" };
    const readonlyInfo1 = readonly(info1);

    // 2.响应式对象, 给子组件传
    // 注：给子组件传过去的，应该是一个响应式对象
    const info2 = reactive({
      name: "chenheo",
    });
    const readonlyInfo2 = readonly(info2);

    const updateState = () => {
      // 无法修改
      readonlyInfo1.name = "chen1";
      // 下面的是可以i修改的
      info1.name = "chen";

      //无法修改
      readonlyInfo2.name = "chen2";
    };

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

<style scoped></style>

7、Reactive判断的api

在这里插入图片描述

8、toRefs/toRef

注： toRefs/toRef传入的必须是响应式的对象

在这里插入图片描述
在这里插入图片描述

<template>
  <div id="app">
    <h2>{{ name }}-{{ age }}</h2>
    <button @click="changeAge">修改age</button>
  </div>
</template>

<script type="text/javascript">
import { reactive, toRefs, toRef } from "vue";

export default {
  setup() {
    // 响应式的
    const info = reactive({ name: "chen", age: 12 });

    // 我们从info中直接解构出来，只是赋值而已，不是响应式的
    // let { name, age } = info;

    // 我们希望解构出来的name，age还是响应式的, 会创建两个ref对对象，相当于 ref(name) 跟 ref(age)
    // 1.toRefs：将reactive对象中的所有属性都转成ref，建立连接, 相当于引用的同一个地方
    let { name, age } = toRefs(info);

    // 2.toRef: 对其中一个属性进行转换ref，建立连接
    let { name1 } = info;
    let age1 = toRef(info, "age"); //不需要再进行解构操作

    const changeAge = () => {
      // 有改，但是不是响应式的
      // age++;

      age1.value++;
      console.log("age", age.value);
      console.log(name1);

      //这个时候，我们改变info里面的age,也是会发生改变的
      // info.age++;
    };

    return {
      info,
      changeAge,
      age,
      name,
    };
  },
};
</script>

<style scoped></style>

9、ref的补充

在这里插入图片描述

10、自定义ref的过程

在这里插入图片描述
自定义ref实现双向绑定数据防抖：
useDebounceRef.js:

import { customRef } from "vue";

// 自定义ref
export default function (value, delay = 300) {
  let timer = null;
  // customRef要去传入的是一个函数
  // track:什么时候收集依赖； trigger:什么时候触发依赖进行更新
  return customRef((track, trigger) => {
    return {
      get() {
        track();
        return value;
      },
      set(newValue) {
        clearTimeout(timer);
        timer = setTimeout(() => {
          value = newValue;
          trigger();
        }, delay);
      },
    };
  });
}

<template>
  <div>
    <input v-model="message" />
    <h2>{{ message }}</h2>
  </div>
</template>

<script>
import debounceRef from "./hook/useDebounceRef";

export default {
  setup() {
    const message = debounceRef("Hello World");

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

<style scoped></style>

11、computed

在这里插入图片描述

<template>
  <div id="app">
    <h2>{{ firstName }}- {{ lastName }}</h2>
    <h2>{{ fullName }}</h2>
    <button @click="changeName">修改名字</button>
  </div>
</template>

<script type="text/javascript">
import { ref, computed } from "vue";

export default {
  setup() {
    const firstName = ref("尘");
    const lastName = ref("浮生");
    // 这么写的化fullName不是响应式的;我们需要写成computed，才是响应式的
    // const fullName = firstName.value + " " + lastName.value;

    // 1.computed用法一：传入一个getter函数
    // computed的返回值是一个ref对象
    // const fullName = computed(() => firstName.value + lastName.value);

    // 2.computed用法二：传入一个对象，对象包含getter/setter
    const fullName = computed({
      get: () => firstName.value + lastName.value,
      set(newValue) {
        const name = newValue.split(" ");
        firstName.value = name[0];
        lastName.value = name[1];
      },
    });
    const changeName = () => {
      // firstName.value = "流";
      fullName.value = "coder chen";
    };

    return {
      firstName,
      lastName,
      fullName,
      changeName,
    };
  },
};
</script>

<style scoped></style>

注： computed 和 method 不同之处在于计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。这意味着只要 数据 不改变，无论多少次访问都会立即返回先前的计算结果，而不用重复执行 getter 函数。

12、watchEffect

在这里插入图片描述

<template>
  <div id="app">
    <h2>{{ name }}-{{ age }}</h2>
    <button @click="changeName">修改name</button>
    <button @click="changeAge">修改age</button>
  </div>
</template>

<script type="text/javascript">
import { watchEffect, ref } from "vue";
/**
 * Options api中，我们可以通过watch选项来侦听data 或者 props的数据变化
 * Component Api中，有两个选择： 1.使用watchEffect, 2.使用watch
 */
export default {
  setup() {
    // watchEffect： 会自动收集响应式的依赖
    const name = ref("chen");
    const age = ref(13);

    const changeName = () => (name.value = "liu");
    const changeAge = () => age.value++;

    // 回调函数默认执行一次，立即执行一次， name
    watchEffect(() => {
      // watchEffect可以自动收集可响应式的依赖
      // 点击按钮的时候，name有执行, age没有执行,因为age没被收集过依赖
      // console.log("name:====", name.value);

      console.log("name:====", name.value, "age: ", age.value);
    });

    return {
      name,
      age,
      changeName,
      changeAge,
    };
  },
};
</script>

<style scoped></style>

13、watchEffect 停止侦听 和 清除副作用

在这里插入图片描述
在这里插入图片描述

<template>
  <div id="app">
    <h2>{{ name }}-{{ age }}</h2>
    <button @click="changeName">修改name</button>
    <button @click="changeAge">修改age</button>
  </div>
</template>

<script type="text/javascript">
import { watchEffect, ref } from "vue";

export default {
  setup() {
    const name = ref("chen");
    const age = ref(13);

    const stop = watchEffect((onInvalidate) => {
      const timer = setTimeout(() => {
        console.log("网络请求成功");
      }, 2000);
      // 根据name和age两个变量发送网络请求， 上一次请求产生的过程，称之为副作用
      // 就是比如在修改age的时候，onInvalidate()函数会优先被调用了一下， 可以做一些相关的清除操作
      onInvalidate(() => {
        //在这个函数中， 清除额外的副作用
        // request.cancel();//取消请求
        clearTimeout(timer);
        console.log("onInvalidate");
      });

      console.log("name:====", name.value, "age: ", age.value);
    });

    const changeName = () => (name.value = "liu");
    const changeAge = () => {
      age.value++;
      if (age.value > 25) {
        // 停止侦听
        stop();
      }
    };

    return {
      name,
      age,
      changeName,
      changeAge,
    };
  },
};
</script>

<style scoped></style>

在这里插入图片描述

14、setup中使用ref

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<template>
  <div id="app">
    <h2 ref="title">哈哈哈哈</h2>
  </div>
</template>

<script type="text/javascript">
import { watchEffect, ref } from "vue";

export default {
  setup() {
    // 怎么拿到title元素, 使用ref(null)返回即可，到时title会被自动赋值， 挂载之后会自动赋值到title中
    const title = ref(null);

    // 两种方式，可以去生命周期查看，也可以使用watchEffect
    watchEffect(
      () => {
        // 第一次立即执行，肯定是空的；第二次有具体的值
        console.log(title.value);
      },
      // 下面的对象，第一次就能打印正确的内容
      {
        // DOM更新完之后执行, 这个是要使用到DOM里面的东西才用到、
        // flush:'pre', DOM还没挂载完； post：DOM挂载完
        flush: "post",
      }
    );

    return {
      title,
    };
  },
  // methods:{
  //   foo(){
  //     // 以前我们时这么拿h2标签的
  //     this.$refs.title
  //   }
  // }
};
</script>

<style scoped></style>

在这里插入图片描述

15、watch在这里插入图片描述

注： watchEffect拿不到前后变化的值；不需要指定监听谁；watch需要指定监听的是谁。

在这里插入图片描述

在这里插入图片描述

侦听多个数据源代码：

<template>
  <div id="app">
    <h2>哈哈哈哈</h2>
    <h2>{{ name }}</h2>
    <button @click="changeData">修改数据</button>
  </div>
</template>

<script type="text/javascript">
import { ref, watch, reactive } from "vue";

export default {
  setup() {
    // 1.定义可响应式对象
    const info = reactive({ name: "chen", age: 13 });
    const name = ref("chen");

    // 2.侦听器watch, 侦听多个，写成数组
    watch(
      [() => ({ ...info }), name],
      ([newInfo, newName], [oldInfo, oldName]) => {
        console.log(newInfo, newName, oldInfo, oldName);
      }
    );

    const changeData = () => {
      info.name = "hello";
    };

    return {
      info,
      changeData,
    };
  },
};
</script>

<style scoped></style>

在这里插入图片描述
在这里插入图片描述

16、生命周期钩子函数

注： vue3没有了create()、beforeCreate()，我们可以直接放到setup中， setup比create()/beforeCreate还要早。

在这里插入图片描述

17、Provide/inject

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

18、案例：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、render函数、jsx

在这里插入图片描述
在这里插入图片描述

1、render - setup方式实现计算器

// 一旦写render函数，template就不需要了

<script type="text/javascript">
import { h, ref } from "vue";

export default {
  // counter可以有两种写法： 在data中定义，也可以在setup中定义; setup是可以替代data的，也可以替代render
  setup() {
    const counter = ref(0);

    // return {
    //   counter,
    // };

    return () => {
      // h2函数的执行可以返回一个vnode
      // setup可以替换掉data, 也是可以替代render函数的
      return h("div", { class: "app" }, [
        h("h2", null, `当前计数： ${counter.value}`), //这里不需要使用this
        h(
          "button",
          {
            onClick: () => counter.value++,
          },
          "+1"
        ),
        h(
          "button",
          {
            onClick: () => counter.value++,
          },
          "-1"
        ),
      ]);
    };
  },

  // render() {
  //   return h("div", { class: "app" }, [
  //     h("h2", null, `当前计数： ${this.counter}`), //这里可以使用this， render函数是有绑定this的
  //     h(
  //       "button",
  //       {
  //         onClick: () => this.counter++,
  //       },
  //       "+1"
  //     ),
  //     h(
  //       "button",
  //       {
  //         onClick: () => this.counter++,
  //       },
  //       "-1"
  //     ),
  //   ]);
  // },
};
</script>

<style scoped></style>

2、jsx

在这里插入图片描述

3、自定义指令

在这里插入图片描述
自定义局部指令：

<template>
  <div id="app">
    <!-- 当我们对DOM进行底层操作的时候，就会使用自定义指令 -->
    <input type="text" v-focus />
  </div>
</template>

<script type="text/javascript">
// import { ref, onMounted } from "vue";

export default {
  // 定义局部指令，可以自定义多个指令
  // directives: {
  //   focus: {
  //     // 定义指令的很多生命周期，总共有四个参数，el, bindings, vnode, preVnode
  //     mounted(el) {
  //       console.log("focus mounted");
  //       el.focus();
  //     },
  //   },
  // },
};
</script>

<style scoped></style>

在这里插入图片描述

4、Teleport

在这里插入图片描述

5、插件

在这里插入图片描述

大海里没有水
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3动态组件component详解
qq_45861961的博客
08-15 1万+
这样就展示了一个动态组件的完整用法,可以方便地在不同组件间进行切换并传递数据。动态组件非常适合需要根据不同条件展示不同内容的场景,掌握它可以更灵活地构建组件。动态组件component是Vue中非常实用的一个功能,它可以根据条件动态切换不同的组件。本文将详细介绍其用法。这样就可以通过修改currentComponent的值,来动态切换ComponentA和ComponentB了。需要注意的是,对于动态组件,Vue会在组件切换时销毁前一个组件实例并创建新实例。所以切换动态组件时不会保留组件的状态。
Vue3应用API——component、directive
林木木的博客
11-05 2564
component是用来进行全局组件注册的。开发中经常有这样一个场景：一个组件可能在其他多个组件中被使用到，如果每次都像往常一样注册并导入就会显得十分多余。这时候就可以考虑使用component将这个组件注册成一个全局组件，就可以在其他组件中直接使用。directive主要是用来自定义指令的。这里应用该API进行全局指令的定义，一旦定义了就可以在各个组件中使用该指令。本文作以学习总结，摘自深入实战Vue开发（殷荣桧 / 著）：以Vue3接口（API）为例讲解。
Vue3使用动态组件 Component
最新发布
fandan1107的专栏
05-28 1623
component是vue内置组件，主要作用是 动态渲染组件。本文主要介绍vue内置动态组件component的使用。
Vue3进阶：Vue与Web components的初步介绍和转换
SteveRocket's-Blog
12-14 1719
在Vue3.0中，Vue与Web components的整合变得更加顺畅和灵活。Web components是一种用原生平台API创建的可重用自定义元素，可以在任何支持HTML的上下文中使用。Vue3.0提供了更好的Web components支持，并且可以方便地将Vue组件转换为Web components，以便在其他框架、库或原生JavaScript中使用。
vue3动态组件使用
m0_62317155的博客
03-27 1487
Vue3动态组件的使用
vue3深入组件： 组件注册
qq_39460057的博客
01-12 657
局部注册的组件需要在使用它的父组件中显式导入，并且只能在该父组件中使用。一个 Vue 组件在使用前需要先被“注册”，这样 Vue 才能在渲染模板时找到其对应的实现。为了方便，Vue 支持将模板中使用 kebab-case 的标签解析为使用 PascalCase 注册的组件。但是，PascalCase 的标签名在 DOM 内模板中是不可用的。这让我们能够使用同样的 JavaScript 组件注册代码来配合不同来源的模板。请注意：局部注册的组件在后代组件中并不可用。为名注册的组件，在模板中可以通过。
vue3-component
04-04
Vue3-component 主要涉及的是 Vue.js 的第三版，也就是 Vue 3.x 系列。Vue 3 在 Vue 2 的基础上进行了一系列的优化和改进，提供了更高效、更灵活的特性和功能。以下是关于 "vue3-component" 演示的一些关键知识点： ...
vue3-class-component
04-08
Vue3-Class-Component 是一个基于 Vue.js 3.x 的库，它允许开发者使用类风格的组件语法来编写 Vue 组件。Vue3-Class-Component 基于 TypeScript 设计，为 Vue 3 提供了更接近传统面向对象编程的体验，提高了代码的...
vue-component-select:typescript+vue开发的下拉框选择组件，简单易用
04-27
npm install vuets-component-select --save-devjs代码import Vue from 'vue';import { VueSelect, VueOption } from "vuets-component-select";new Vue({ el: '#app', components: { VueSelect, VueOption }, data...
vue3中Options API(学习)代码
11-05
Vue3 是 Vue.js 框架的最新版本，它引入了许多新特性和改进，其中一项重要的变化就是对 Options API 的支持。尽管 Vue3 强调了Composition API 的使用，但为了兼容旧版项目和便于开发者过渡，Options API 仍然被保留...
vue3-component：vue3组件库
02-21
:flexed_biceps: Vue 3.0合成API状态：测试版该项目仍在大力开发中。 欢迎加入我们，并提出您的第一个请求。引导项目带命令$ yarn bootstrap 该项目将安装所有依赖项并运行lerna bootstrap来初始化项目网站预览带...
Cardinal-Components-API：用于将外部数据添加到对象的组件API
02-04
Fabric的组件API，简单，模块化且非常快。 Cardinal Components API是Minecraft mod的库，用于创建可附加到各种提供程序的数据组件。 这些组件为mod提供了标准化的界面，使其可以与原本不透明的对象和行为进行交互，从而有助于mod的创建和兼容性。 TL; DR：它允许您将数据附加到事物上 有关详细信息，请参见该存储库的 。 以下信息是后者的简明形式。 产品特点* :link: 将组件附加到各种普通类 :puzzle_piece: 实施一次，随处插入-您的数据将自动保存 :outbox_tray: 使用单个助手界面同步数据 :busts_in_silhouette: 选择玩家重生时如何复制组件 :timer_clock: 勾选目标旁边的组件 :hammer_and_wrench: 调整一切，使其适
Vue3.0动态组件＜component＞与KeepAlive:VOA模式
Fanbin168的专栏
10-26 291
我有7个组件 App.vue是根组件，它里面有5个子组件Navbar,Home,List,Center,Tabbar。其中Navbar是导航，Tabbar是底部，Home,List, Center则是内容。如点击【我的】中间应该显示的是Center组件。如点击【首页】中间应该显示的是Home组件。如点击【列表】中间应该显示的是List组件。
Vue3复习和总结(Component)组件间四种数据传递的方式与插槽,props、emit、ref
zyugat的博客
11-16 4236
Vue3复习和总结(Component)组件间三种数据传递的方式与插槽,props、emit、ref 代码全部放在->github仓库：https://github.com/zyugat/vue-review-all 前言：分为base、Component、router、Vuex、组合式API。5各部分。 base和Component中的例子不使用脚手架运行，需自行浏览器运行。位置->noCli 组件间三种数据传递的方式与插槽Vue3复习和总结(Component)组件间三种数据传递的方式与插槽
Vue3 – Composition API
凉茶铺的博客
01-21 1521
介绍了Vue中的setup函数、setup数据响应、readonly函数。
Vue3-常用的Composition API（组合API）
qq_56973906的博客
09-18 1749
script setup> 语法糖里面的代码会被编译成组件setup()函数的内容，不需要通过return暴露声明的变量、函数以及import引入的内容，即可在使用，并且不需要些export default{}这意味着与普通的 只在组件被首次引入的时候执行一次不同， 中的代码会在每次组件实例被创建的时候执行。setup不能是一个async函数，因为返回值不再是return的对象，而是Promise，模板看不到return对象中的属性。
vue3的Composition API详解，包含hook的思想
丑小鸭变黑天鹅的博客
04-14 2298
vue3的Composition API详解一、Options API的弊端二、认识Composition API三、setup1、setup函数的参数2、setup函数的返回值3、setup不可以使用this4、Reactive API5、Ref API1、基本使用2、Ref自动解包6、readonly1、认识readonly2、readonly的使用3、readonly的应用 一、Options API的弊端 在Vue2中，我们编写组件的方式是Options API Options API的一大特点就
VUE3 Composition API详解
汤玉鹏
06-23 9390
LifeCycle Hooks 在新版的生命周期函数，可以按需导入到组件中，且只能在setup()函数中使用. import { onMounted, onUnmounted } from 'vue'; export default { setup () { onMounted(()=>{ // }); onUnmounted(()=> { // }); }...
VUE3 之 组件传参
追风人的博客
01-21 5053
目录 1. 概述 2. 组件传参 3. 综述 4. 个人公众号 1. 概述 韦奇定律告诉我们：大部分人都很容易被别人的话所左右，从而开始动摇、怀疑，最终迷失自我。因此我们要努力的坚定信念，相信自己，才不会被周围的环境所左右，才能取得最终的胜利。 言归正传，之前我们聊了组件的概念，既然有多个组件，那自然存在组件间传参的问题，今天我们就来聊聊 VUE 的 组件传参。 2. 组件传参 2.1 初识组件传参 <body> <div id="myDiv">
vue3class Api
10-25
Vue3 Class API是Vue.js 3.0中的一个新特性，它提供了一种基于类的组件API，可以让开发者更加方便地编写Vue组件。相比于Vue.js 2.x中的Options API和Vue Class Component，Vue3 Class API具有更好的类型推断和更好的IDE支持。同时，Vue.js官方也推荐使用Composition API来编写组件，因为它可以更好地解决代码复用和逻辑复杂度的问题。因此，Vue3 Class API虽然是一个新特性，但是在Vue.js 3.0中并不是主推的编写组件的方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值