vue2与vue3知识点
1.vue2（optionsAPI）选项式API
2.vue3（composition API）响应式API
vue3 setup 中this是未定义（undefined）vue3中已经开始弱化this
vue2通过this可以拿到vue3setup定义得值和方法
setup语法糖
ref =========> 可以定义：基本类型、对象类型得响应式数据
reactive ======> 定义：对象响应式数据
toRef 的作用是将一个响应式对象中的属性转换成单独的响应式引用
toRefs 将一个对象的所有属性变成响应式引用，
import { reactive, toRefs } from 'vue';
export default {
setup() {
// 创建一个响应式对象
const state = reactive({
count: 0,
name: 'Vue 3'
});
// 使用toRefs将响应式对象的属性转换为响应式引用
const refs = toRefs(state);
// 返回响应式引用，以便在模板中使用
return {
...refs
};
},
};
<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>