uni-app vue3 使用笔记

1.弹窗、加载、请求接口

<template>
  <view>
    <view class="tn-type-primary_bg" v-if="item.roleId==16" @click="confirmMarker(item.uid)">
      指定营销员
    </view>
  </view>

</template>

<script setup lang="ts">
import {marker} from "@/api/mall_home/mall_home"
//确认指定营销员
const confirmMarker = async (uid) => {
  uni.showModal({
    title: '提示',
    content: '是否确认指定该用户为【营销员】',
    confirmText: '确定',
    cancelText: '取消',
    success: function (res) {
      if (res.confirm) {
        let data = {uid: uid}
        uni.showLoading({title: '正在提交...'})
        marker(data).then((res) => {
          uni.hideLoading()
          if (res.code == 200) {
            uni.showToast({title: '提交成功', icon: 'success'});
          }
        });
      }
    }
  });
}
</script>

//门店指定营销员
export const marker = (data) =>
    Request({
        url: `mode2/wechat/store/marker`,
        method: 'GET',
        data,
    });
</script>

2.vue3 详解ref

在 Vue 3 中，ref 是一个非常重要的 API，用于创建响应式数据。以下将从多个方面详细介绍 ref：

1. 基本概念

ref 是一个函数，用于创建一个响应式的引用对象。它接受一个初始值作为参数，并返回一个包含该值的响应式对象。当这个值发生变化时，依赖于它的 DOM 元素或计算属性等会自动更新。

2. 基本使用

2.1 创建 ref 对象

import { ref } from 'vue';

// 创建一个初始值为 0 的 ref 对象
const count = ref(0);

// 创建一个初始值为字符串的 ref 对象
const message = ref('Hello, Vue 3!');

// 创建一个初始值为对象的 ref 对象
const person = ref({ name: 'John', age: 30 });

2.2 访问和修改 ref 的值

在 JavaScript 中，访问和修改 ref 对象的值需要使用 .value 属性：

// 访问 count 的值
console.log(count.value); // 输出: 0

// 修改 count 的值
count.value = 1;
console.log(count.value); // 输出: 1

在模板中，可以直接使用 ref 对象，无需使用 .value：

<template>
  <div>
    <!-- 直接使用 count -->
    <p>{{ count }}</p> 
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(0);

const increment = () => {
  count.value++;
};
</script>

3. 响应式原理

ref 内部使用了 JavaScript 的 Object.defineProperty 或 Proxy（取决于运行环境）来实现响应式。当 ref 的值发生变化时，Vue 会自动追踪到这个变化，并通知所有依赖于该 ref 的地方进行更新。

4. 与 reactive 的区别

• ref：主要用于创建基本数据类型（如数字、字符串、布尔值）的响应式数据。也可以用于对象和数组，但访问和修改时需要使用 .value。
• reactive：用于创建对象和数组的响应式数据，访问和修改时不需要使用 .value。

import { ref, reactive } from 'vue';

// 使用 ref 创建对象响应式数据
const userRef = ref({ name: 'Alice', age: 25 });
userRef.value.name = 'Bob';

// 使用 reactive 创建对象响应式数据
const userReactive = reactive({ name: 'Alice', age: 25 });
userReactive.name = 'Bob';

5. ref 在组合式函数中的使用

ref 在组合式函数中非常有用，可以将响应式数据封装在函数内部，实现代码的复用。

import { ref } from 'vue';

// 组合式函数
const useCounter = () => {
  const count = ref(0);

  const increment = () => {
    count.value++;
  };

  const decrement = () => {
    count.value--;
  };

  return {
    count,
    increment,
    decrement
  };
};

export default useCounter;

在组件中使用组合式函数：

<template>
  <div>
    <p>{{ counter.count }}</p>
    <button @click="counter.increment">Increment</button>
    <button @click="counter.decrement">Decrement</button>
  </div>
</template>

<script setup>
import useCounter from './useCounter';

const counter = useCounter();
</script>

6. ref 与 DOM 元素的绑定

ref 还可以用于获取 DOM 元素的引用。在模板中使用 ref 指令，然后在 JavaScript 中通过 ref 对象访问 DOM 元素。

<template>
  <div>
    <!-- 使用 ref 指令绑定 DOM 元素 -->
    <input ref="inputRef" type="text" />
    <button @click="focusInput">Focus Input</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 创建一个 ref 对象用于引用 DOM 元素
const inputRef = ref(null);

const focusInput = () => {
  if (inputRef.value) {
    inputRef.value.focus();
  }
};
</script>

7. 注意事项

• 基本数据类型：对于基本数据类型，修改值时必须使用 .value，否则不会触发响应式更新。
• 对象和数组：虽然 ref 可以用于对象和数组，但在模板中访问嵌套属性时，仍然需要使用 .value，除非使用 toRefs 或 toRef 进行转换。

总之，ref 是 Vue 3 中非常强大和灵活的工具，可用于创建响应式数据、获取 DOM 元素引用等多种场景。

3.单文件组件:SFC (Single File Component) Vue.js

在 Vue.js 中，单文件组件（SFC）是一种将模板、逻辑和样式封装在同一文件内的开发模式。这种结构不仅提高了代码的可维护性和模块化程度，还使得开发者能够更加直观地理解各个部分之间的关系。

单文件组件的基本构成

一个典型的 .vue 文件由三个主要部分组成：

• : 定义HTML结构。

  <template>
    <div class="example">
      <!-- 组件的内容 -->
    </div>
  </template>
  

这些组成部分共同构成了完整的Vue组件，允许在一个地方完成所有的定义工作，极大提升了开发效率和用户体验。

对于希望进一步优化构建过程的情况，还可以利用 vite 或者 Webpack 等现代打包工具来处理这类文件，确保生产环境下的最佳性能表现。