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,挂载渲染之后");
}