vue API 风格

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

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;
1
2
3
4
5
6
7

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

1. 选项式

import { mapState } from 'vuex';

computed: {
	...mapState({
		name: state => state.xxmodel.name
	})
},
1
2
3
4
5
6
7

computed: {
	name() {
		return this.$store.state.xxmodel.name;
	}
}
1
2
3
4
5

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

computed: {
	name() {
		return store.state.xxmodel.name;
	}
}
1
2
3
4
5
6
7

2. 组合式

组合式 没有 mapState

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

const name = computed(() => store.state.xxmodel.name);
1
2
3
4

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

const store = useStore();

const name = computed(() => store.state.xxmodel.name);
1
2
3
4
5
6
7

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";

// 选项式 API
onReady() {
	uni.hideLoading();
}
1
2
3
4

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

3.3 方法

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

// 引用
this.fun1();
1
2
3
4
5
6
7

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

// 引用
fun1();
1
2
3
4
5

3.4 监听

// 选项式 API
watch: {
	waitSigned: {
		handler(nameList) {
			if (nameList.total < 1) {
				setTimeout(() => this.goBack(), 1000);
			}
		},
		immediate: true,
		deep: true
	}
},
1
2
3
4
5
6
7
8
9
10
11
12

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

watch(
  () => nameList.value,
  () => {
    if (nameList.total < 1) {
      setTimeout(() => goBack(), 1000);
    }
  },
  {
    immediate: true,
    deep: true,
  }
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3.5 组件

// 选项式 API
`child.vue`;
导入: `import child from '@/components/child.vue';`;
局部注册: `components: { child },`;
使用: ``;
1
2
3
4
5

// 组合式 API
`child.vue```;
导入: `import child from '@/components/child.vue';`;
使用: ``;
1
2
3
4

3.6 变量实例

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

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

const dialog = ref();

dialog.open(); //