1.vue2（optionsAPI）选项式API

2.vue3（composition API）响应式API

vue3 setup 中this是未定义（undefined）vue3中已经开始弱化this

vue2通过this可以拿到vue3setup定义得值和方法

setup语法糖

ref =========> 可以定义：基本类型、对象类型得响应式数据

reactive ======> 定义：对象响应式数据

toRef 的作用是将一个响应式对象中的属性转换成单独的响应式引用

toRefs 将一个对象的所有属性变成响应式引用，

javascript">import { reactive, toRefs } from 'vue';export default {setup() {// 创建一个响应式对象const state = reactive({count: 0,name: 'Vue 3'});// 使用toRefs将响应式对象的属性转换为响应式引用const refs = toRefs(state);// 返回响应式引用，以便在模板中使用return {...refs};},
};

javascript"><template><div><!-- 使用ref --><el-button type="warning">Warning</el-button><el-button type="danger" @click="changeData">Danger</el-button><div>姓名{{ name }}</div><div>年龄{{ age }}</div><div>电话{{ tel }}</div><!-- 使用reactiv --></div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
//数据
let name = ref('张三')
let age = ref(42)
let tel = ref(15231971993)
const changeData = () => {age.value = age.value + 10
}
// reactive
let car = reactive({brand: '银行',price: 20,color: 'red'}
)
console.log(car,'car')
</script>