1.Vue3.0组合式API和生命周期

Vue3.0组合式API和生命周期

<template>
  <div>
    <div>{
  {msg}}</div>
    <button @click="say">点击</button>
    <button @click="aaa">点击更换数据</button>
    <div class="gouzi">测试钩子是否能够拿到</div>
    <button @click="namechange()">测试refs</button>
    <div>{
  {obj.sex}}</div>
    <div>{
  {obj.name}}</div>
  </div>
</template>

<script>
import {onBeforeMount,onMounted,reactive,toRef} from "vue";
export default {
  name: "App",
  //组合api的起点，组合api的代码
  //可以理解为在beforecreate前进行执行，组件创建前
  //函数中不能使用this ===》undefined
  //之前的钩子不建议使用
  //模板中需要使用的数据和函数，需要在setup中返回
  //setup
  //使用具体的钩子函数需要导入
  setup(){
    const  msg = "hello Vue3.0"
    const  say=()=>{
      alert("你好vue3.0"