setup
新的option，所有的组合Api函数都在此使用，只在初始化时执行一次
函数如果返回对象，对象中的属性或方法，模板中可以直接使用
***ref是用来定义一个基本类型的响应式数据的
作用: 定义一个数据的响应式
语法: const xxx = ref(initValue):
创建一个包含响应式数据的引用(reference)对象
js中操作数据: xxx.value
模板中操作数据: 不需要.value
一般用来定义一个基本类型的响应式数据
vue3 双向数据绑定示例
vue2实现
<template>
<h2>setup和ref的基本使用</h2>
<div>{{count}}</div>
<button @click="upDate">更新数据</button>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
//需求：页面打开后可以直接看到一个数据，点击按钮后，该数据可以发生变化
export default defineComponent({
name: 'Home',
//vue2 实现
data(){
return{
number:0
}
},
methods:{
upDate(){
this.number ++
}
}
});
</script>
vue3 错误实现
<template>
<h2>setup和ref的基本使用</h2>
<div>{{count}}</div>
<button @click="upDate">更新数据</button>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
//需求：页面打开后可以直接看到一个数据，点击按钮后，该数据可以发生变化
export default defineComponent({
name: 'Home',
//vue3 实现
setup(){
let count = 0 //不是响应式数据（响应式数据：数据变化，页面跟着渲染变化）
function upDate(){
console.log('执行upDate方法了吗')
count++
}
return{
count,
upDate
}
}
函数被执行，数据无变化，因为count当前不是响应式数据
});
</script>
vue3 正确实现
<template>
<h2>setup和ref的基本使用</h2>
<div>{{count}}</div>
<button @click="upDate">更新数据</button>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
//需求：页面打开后可以直接看到一个数据，点击按钮后，该数据可以发生变化
export default defineComponent({
name: 'Home',
//vue3 实现
setup(){
// let count = 0 不是响应式数据
//ref 是一个函数，作用：定义一个响应式数据，返回的是一个Ref对象,对象中有一个value属性，如果需要对数据进行操作
//需要使用该Ref调用value属性进行数据操作
//html模板中是不需要使用ref对象的.value属性的方法
const count = ref(0) //定义一个响应式count数据，他的初始值是0
function upDate(){
console.log('执行upDate方法了吗')
count.value++
// count++ //报错 count是ref对象，不能对对象数据类型进行++操作
}
return{
count,
upDate
}
}
});
</script>
