资料

Vue CLI

资料

vue2.x--插件

defineOptions是Vue3.3引入的一个Composition API辅助函数，用于在 <script setup>语法中定义组件的选项(options)。它允许你在<script setup >中以一种更加声明式的方式定义组件的名称、props、emits等配置项，而无需使用defineComponent。

基本用法

在<script setup >中,你可以使用 defineOptions 来定义组件的选项。以下是一个简单的示例：

<template>
    <div>
        <p>{{message}}</p>
    </div>
</template>
<script setup>
    import {defineOptions} from 'vue';

    defineOptions({
        name: 'MyComponent',
        props: {
            message: {
                type: String,
                required: true
            }
        },
        emits: ['update:message']
    })
</script>

Vue3原生App开发曾存短板,uni-app多端部署虽便捷，但性能、原生能力及生态锁定问题突出。

NativeScript-vue 3出现，填补了Vue生态与React Native抗衡的床原生跨平台空白，获尤雨溪认可。

为何弃用uni-app？

v-if,v-show控制的是是否渲染,而真正的性能瓶颈，往往在于是否需要重新渲染

面对这个问题，v-if和v-show显的有些无力，而Vue3有一个专门解决此问题的指令：v-memo

什么是v-memo

v-memo是一个指令,作用是有条件的跳过一个元素或组件的更新，语法如下：

<div v-memo="[depA, depB]">
    ...
</div>

背景与痛点

在后台管理系统开发中，分页列表查询非常常见，我们通常需要处理：

• 当前页、页大小、总数等分页状态
• 加载中、错误处理等请求状态
• 搜索、刷新、翻页等分页操作
• 数据缓存和重复请求处理

这些重复逻辑分散在各个组件中，维护起来很麻烦，

为了解决这个烦恼，我专门封装了分页数据管理Hook。现在值需要几行代码，就能轻松实现分页查询，省时又高效，减少了大量重复劳动

使用前提

查询接口返回的数据格式

{
    list: [
        { id: 1, name: 'user1'},
        { id: 2, name: 'user2'},
    ],
    total: 100,
}

在社区里，部分Vue使用者，会常常因为React中存在闭包陷阱，而认为Vue是一个更加优秀的框架。个别极端的Vue使用者，还会因此而遍地React，认为闭包陷阱是React的一个设计缺陷。

那么，这真的是React的设计缺陷吗？

Vue中没有闭包陷阱，那它是否也为此付出了什么代价呢？

前置知识

我们来思考一个场景。在一个单独的模块A.js中定义一个变量

// A.js
let a = 20;

console.log输出两次

<template>
	<div>{{ name }}</div>
</template>
<script setup>
import { ref } from 'vue';

const name = ref('welcome nuxt');
console.log(111);
</script>

一、nuxt简介及安装

Vue.use(plugin)

Vue.use是用来安装插件的

用法

Vue.use(plugin)