Vue3的新特性

在script中编写组合式API

这样一定要return声明的变量和方法

<script>
export default {
   setup () {
// 数据
 const message = "学习Vue3"
//函数
 const logMessage = () => {
     console.log(message)
 }

 return{
   message,
   logMessage
 }
   }
}
</script>

在script中声明则不需将方法变量返回

<script setup>
const message = "AI reture"

const logMessage = () =>{
  console.log(message)
}

</script>

reactive: 接收一个对象类型数据，返回一个响应式的对象

import { reactive } from '

const num = reactive({
  count: 100
})

const setCount = () =>{
    num.count++
}vue';

<div>{{ num }}</div>
  <button @click="setCount">动态增加</button>

Ref 接收简单类型或复杂类型，返回一个响应式数据

 本质:在原有数据上包裹一层对象，包成复杂类型

 底层:包成复杂类型，再借助reactive实现响应式

 注意：1.脚本需要通过.value

            2.在template，value不需要加帮我们扒了一层

import { Ref } from 'vue';
const age = ref(10)
const setAge = () =>{
  age.value++
}

<div>{{ age }}</div>
  <button @click="setAge">增加年龄</button>