vue3 compositionapi初使用

setup函数和响应式对象

setup函数
1.使用composition api的入口
2.在beforecreate之前使用
3.在setup中没有this
4.返回对象中的属性可在模板中使用

ref 函数
1.返回一个响应式引用
2.name是一个响应式对象

<template>
  <div id="app">
    <p>{{ name }}</p>
    <p>{{ age }}
      <button type="button" @click="plusOne()">+</button>
    </p>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {//返回对象中的属性可在模板中使用
    const name = ref("测试");//定义name对象
    const age=ref(18);//定义age对象,在模板中使用时，会自动获取值
    function plusOne(){//定义plusOne函数
      age.value ++;//age是对象，要通过.value获取值
    }
    return { name ,age,plusOne};//返回的响应式对象
  },
};
</script>

<style >

</style>