【Vue】 API 风格

API 风格

API 风格
组合式 API 常见问答

1 选项式 API (Options API)

• 使用选项式 API，可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。
• 选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。

<script>
  export default {
    data() {
      // data() 返回的属性将会成为响应式的状态, 并且暴露在 `this` 上
      return {
        x: "",
        yyy: "",
      };
    },
    computed: {}, // 本地取信息，每个页面都要用到的数据,如用户名
    onLoad() {}, // 根据有无 await 看是否加上 async
    onShow() {}, // 生命周期钩子会在组件生命周期的各个不同阶段被调用
    mounted() {},
    methods: {
      // methods 是一些用来更改状态与触发更新的函数, 它们可以在模板中作为事件监听器绑定
      funx() {},
      funy: function () {},
    },
  };
</script>

2 组合式 API (Composition API)

• 通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。
• 在单文件组件中，组合式 API 通常会与 <script setup> 搭配使用。
• 这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。
• 比如，<script setup> 中的导入和顶层变量/函数都能够在模板中直接使用。

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

  const count = ref(0); // 响应式状态

  function increment() {
    // 用来修改状态、触发更新的函数
    count.value++;
  }

  onMounted(() => {
    // 生命周期钩子
    console.log(`The initial count is ${count.value}.`);
  });
</script>

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

  // x
  const x = ref(0);
  const funx = () => {};
  onMounted(() => {
    console.log(x.value);
  });
</script>

3 比较

• 两种 API 风格都能够覆盖大部分的应用场景。它们只是同一个底层系统所提供的两套不同的接口。

• 实际上，选项式 API 是在组合式 API 的基础上实现的！关于 Vue 的基础概念和知识在它们之间都是通用的。

• 选项式 API 以“组件实例”的概念为中心 (即上述例子中的 this)，对于有面向对象语言背景的用户来说，这通常与基于类的心智模型更为一致。

• 同时，它将响应性相关的细节抽象出来，并强制按照选项来组织代码，从而对初学者而言更为友好。

• 组合式 API 的核心思想是直接在函数作用域内定义响应式状态变量，并将从多个函数中得到的状态组合起来处理复杂问题。

• 这种形式更加自由，也需要你对 Vue 的响应式系统有更深的理解才能高效使用。相应的，它的灵活性也使得组织和重用逻辑的模式变得更加强大。

• 同一逻辑使用到的不同 变量、方法可以放在一块儿，便于阅读

• 在生产项目中：

• 当你不需要使用构建工具，或者打算主要在低复杂度的场景中使用 Vue，例如渐进增强的应用场景，推荐采用选项式 API。

• 当你打算用 Vue 构建完整的单页应用，推荐采用组合式 API + 单文件组件。

	选项式 API (Options API)	组合式 API (Composition API)
标签	<script></script>	<script setup></script> 一定要加上 setup
变量	data() { return { x: 0 } } this.x	import { ref } from "vue"; const x = ref(0); x.value
方法	methods: { async funx() {} } methods: { funx: function () {} }	const funx = async () => {}; function funx() {}
监听	watch: { x() {} }	watch(x.value, () => {});
计算	computed: { funy() {} }	import { computed } from "vue"; const funy = computed(() => {})
prop	prop: { propA: { type: Number, default: 1 } } 引用 this.propA	const props = defineProps({ propA: { type: Number, default: 1} }) 引用 prop.propA
emit	this.$emit('clickBtn');	const emit = defineEmits(['click']); emit('clickBtn')
生命周期	mounted() { this.init(); }	onMounted(() => { init(); }); import { onMounted } from "vue";
页面生命周期	onLoad() {}	import { onLoad } from '@dcloudio/uni-app'; onLoad(() => {})
ref	<view ref="dialog"></view> this.$refs.dialog.open();	<view ref="dialog"></view> const dialog = ref(); dialog.open();
store	this.$store	import store from '@/store/index.js'; store

3.1 vuex 状态管理

// vue2
// @/store/index.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const store = new Vuex.Store({});
export default store;

// vue3
// @/store/index.js
import { createStore } from "vuex";
const store = createStore({});
export default store;

1. 选项式

import { mapState } from 'vuex';

computed: {
	...mapState({
		name: state => state.xxmodel.name
	})
},

computed: {
	name() {
		return this.$store.state.xxmodel.name;
	}
}

import store from "@/store/index.js";

computed: {
	name() {
		return store.state.xxmodel.name;
	}
}

2. 组合式

组合式 没有 mapState

import { computed } from "vue";
import store from "@/store/index.js";

const name = computed(() => store.state.xxmodel.name);

// 但是 vue3 的 uniapp 用不了这个方式，就搞不懂...
import { computed } from "vue";
import { useStore } from "vuex";

const store = useStore();

const name = computed(() => store.state.xxmodel.name);

3.2 生命周期

uniapp 使用 Vue3 setup 组合式 API 引入 uniapp 的 页面生命周期（onReachBottom）等方法
vue3 script setup 的 onLoad

• 生命周期

  • 应用生命周期： uni-app 支持的应用生命周期函数
  • 页面生命周期： uni-app 支持的页面生命周期函数
  • 组件生命周期： uni-app 组件支持的生命周期，与 vue 标准组件的生命周期相同

• uni-app 支持的生命周期函数需要引入 import { onReady } from "@dcloudio/uni-app";

选项式	组合式
beforeCreate	setup()
created	setup()
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted
activated	onActivated
deactivated	onDeactivated
errorCaptured	onErrorCaptured

// 选项式 API
onReady() {
	uni.hideLoading();
}

// 组合式 API
import { onReady } from "@dcloudio/uni-app";
onReady(() => {
  uni.hideLoading();
});

3.3 方法

// 选项式 API
method: {
	async fun1() {	},
}

// 引用
this.fun1();

// 组合式 API
const fun1 = async () => {};

// 引用
fun1();

3.4 监听

// 选项式 API
watch: {
	waitSigned: {
		handler(nameList) {
			if (nameList.total < 1) {
				setTimeout(() => this.goBack(), 1000);
			}
		},
		immediate: true,
		deep: true
	}
},

// 组合式 API
import { watch } from "vue";

watch(
  () => nameList.value,
  () => {
    if (nameList.total < 1) {
      setTimeout(() => goBack(), 1000);
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

3.5 组件

// 选项式 API
`child.vue`;
导入: `import child from '@/components/child.vue';`;
局部注册: `components: { child },`;
使用: `<child></child>`;

// 组合式 API
`child.vue``<script setup></script>`;
导入: `import child from '@/components/child.vue';`;
使用: `<child></child>`;

3.6 变量实例

// 选项式 API
this.$refs.dialog.open();

// 组合式 API
import { ref } from "vue"; // 要记得引入

const dialog = ref();

dialog.open(); // <template>里
dialog.value.open(); // <script>里

1. this -> value

• 不使用 this.xxx, 使用 xxx.value，若显示常量不可更改，注意是不是漏了 .value

• data() {}

• computed: {}

• ref:

  • <script></script> 要加 value,
  • <template></template> 不加 value

2. 以下变量互相不要取重名的

• ref 的
• 组件名
• 临时变量 let

3.7 e

e.target.value; // 选项式 API (Options API)
e.detail.value; // 组合式 API (Composition API)

3.8 强制更新

vue2 选项式有 this.$forceUpdate();
vue3 组合式没有这个，但是能更新

3.9 template

vue2 能分行

<text class="">yyyyyyyyyyyyyyyy xx<text class="blue">xxx</text>xxxxxxx</text>

vue3 不行

<text class="">
  <text>yyyyyyyyyyyyyyyy</text>
  <text>xx<text class="blue">xxx</text>xxxxxxx</text>
</text>

3.10 样式

• vue2 这样能起作用 .button-hover{}

• vue3 不能 -> 加上 !important 试试 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a2MSOHvQ-1666429193724)(vueImg/1.jpg)]

• 组合式 API 的 按钮点击效果 button-hover 不起作用

• 组合式 API 使用 标签 作为样式选择器 会不起作用, 如 button { }

3.11 其他

• vue2 这样不会报错 import Core from "lib/core.js"

• vue3 会，改成 -> import Core from "@/lib/core.js"

• vue2 这样不会报错 let [err, res] = await uni.request(http);

• vue3 会，改成 -> let res = await uni.request(http);

uniapp 项目使用 vue3
vue3 setup 页面传参