【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 通常会与 一定要加上 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
  this.$refs.dialog.open();
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 },`;
  使用: ``;
  

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

  3.6 变量实例

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

  // 组合式 API
  import { ref } from "vue"; // 要记得引入
  
  const dialog = ref();
  
  dialog.open(); //