VUE2与VUE3的比较
- 大量API挂载在VUE的对象原型上
- VUE3的Template支持多个根标签，VUE2不支持
一、setup()函数
setup()函数是vue3中，专门为组件提供的新属性。setup()函数会在beforeCreate之后，created之前执行，vue3也取消了这两个钩子函数，统一用setup()代替，setup()相当于一个生命周期函数，vue2以前的data，watch，computed等全部用setup()代替。
setup(props){
return {
}
}
- props用来接收props数据
- 在vue3中没有this，值为undefined
- 返回值：return{},返回响应式数据
二、reactive()函数
reactive()函数，接收一个普通对象，创建出来之后，在setup()中return出去，直接在template中调用即可。
<template>
<div>
{{name}} // test
</div>
<template>
<script>
import { reactive, ref } from 'vue';
export default{
setup() {
const state = reactive({
name: 'test'
});
return {
state
}
}
};
</script>
三、ref()函数
ref()根据给定的值来创建数据对象，ref()函数返回值是一个对象，在setup()内部访问ref()函数的时候加上.value。
<template>
<div>
{{count}} // 10
</div>
<template>
<script>
import { reactive, ref } from 'vue';
export default{
setup() {
const count = ref(10)
return {
count
}
}
};
</script>
四、toRefs()函数
toRefs()函数可以将reactive()创建出来的响应式对象，转换为普通的对象。
<template>
<div>
{{state}} // test
{{age}} // 21
</div>
<template>
<script>
import { reactive, ref } from 'vue';
export default{
setup() {
const state = reactive({
name:"test"
})
const age = ref(21)
return {
...toRefs(state),
age
}
}
};
</script>
五、computed()
该函数用来创造计算属性，和vue2一样，它返回的值是一个ref对象。
<template>
<div>
{{count}} // test
</div>
<template>
<script>
import { computed, ref } from 'vue';
export default{
setup() {
const num = ref(1)
const count = computed(()=>{
return num.value+1
})
return {
count
}
}
};
</script>
