Vue3基础——Composition API初体验、合成API详解、setup、Provide 和 inject

最新推荐文章于 2024-05-06 14:41:27 发布

lalaxuan

最新推荐文章于 2024-05-06 14:41:27 发布

阅读量496

点赞数

分类专栏： Vue3基础文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_45732235/article/details/127873802

版权

文章目录

p19 组合式 API (Composition API)初体验

<template>
  <h1 @click="add">计数count: {
  { count }}</h1>
  <h1 @click="increment">计数num: {
  { num }}</h1>
</template>

<script>
import {
      ref } from "vue";
export default {
     
  data() {
     
    console.log("data");
    return {
     
      count: 0,
    };
  },
  methods: {
     
    add() {
     
      this.count++;
    },
  },

  setup() {
     
    console.log("setup");
    const num = ref(10);
    function increment() {
     
      num.value += 10;
    }
    return {
     
      num,
      increment,
    };
  },
  beforeCreate() {
     
    console.log("beforeCreate,初始化数据之前");
  },
  created() {
     
    console.log("created,数据初始化之后");
  },
  beforeMount() {
     
    console.log("beforeMount,挂载渲染之前");
  },
  mounted() {
     
    console.log("mounted,挂载渲染之后");
  }