一、setup
1、特性
1)、setup函数是处于 围绕 beforeCreate 和 created 生命周期钩子运行。
2)、setup函数是 Composition API（组合API）的入口。
3)、在setup函数中定义的变量和方法最后都是需要 return 出去的， 不然无法在模板中使用。
2、注意点
1)、由于在执行 setup函数的时候，还没有执行 Created 生命周期方法，所以在 setup 函数中，无法使用 data 和 methods 的变量和方法。
2)、由于我们不能在 setup函数中使用 data 和 methods，所以 Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined
3)、setup函数只能是同步的不能是异步的。
3、写法
1)、写法一，直接写成setup函数，将函数中的变量和方法return出来，return出来的变量和方法。
// HTML
<template>
<div class="home">
{{state}}
</div>
</template>
// JavaScript
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "HomeView",
/**
* setup函数，
* 1、无this指向，如果在setup中打印this，this是undefined
* 2、在模板中使用的数据和函数，都需要setup将其return出来
* 如果不return，页面无法获取到数据和方法
* 3、从setup函数中，我们可以看出，代码属于同步执行
*/
setup() {
console.log(this) // undefined
const state = '哈哈'
return {
state
}
}
});
</script>二、ref
1、定义
是对原始数据的拷贝，让数据变成响应式,即改变会引发视图层的变化 ref通过给value属性设置setter和getter实现数据劫持，但是他的原始数据不会发生更改。
2、注意
常用来操作基本数据类型的数据（string、number、boolen等）
3、写法
// JavaScript
<script lang="ts">
import { defineComponent ,ref } from "vue";
export default defineComponent({
name: "HomeView",
setup() {
const scrollbarRef = ref('')
return {
scrollbarRef
}
}
});
</script>4、操作dom
<template>
<div ref='scrollbarRef' @click='handleScrollbar'></div>
</template>
// JavaScript
<script lang="ts">
import { defineComponent ,ref } from "vue";
export default defineComponent({
name: "HomeView",
setup() {
const scrollbarRef = ref(null)
const handleScrollbar = () => {
console.log(scrollbarRef )
}
return {
scrollbarRef,
handleScrollbar,
}
}
});
</script>5如果将某个对象中的属性变成响应式数据，修改响应式数据是不会影响到原始数据，同时页面ui发生更新，如图：
<script lang="ts">
import { defineComponent ,ref } from "vue";
export default defineComponent({
name: "HomeView",
setup() {
const data = {name:'',label:''}
const scrollbarRef = ref(data.name)
const handleScrollbar = () => {
scrollbarRef.value = "132123"
console.log(data,scrollbarRef )
}
return {
data,
scrollbarRef,
handleScrollbar,
}
}
});
</script>三、reactive
1、定义
响应式数据对象，响应式编程是一种异步编程风格，它关注数据流和变化的传播，当定义页面的数据发生更改，其定义里面的变量自动更改。
2、注意
通常用于定义数组和对象（引用类型的数据）
3、写法
<script lang="ts">
import { defineComponent, reactive} from "vue";
export default defineComponent({
name: "HomeView",
setup() {
const scrollbarRef = reactive({
Id: '',
Version: '',
Status: '',
fileMangerList: [],
apiList: [],
});
const handleScrollbar = () => {
console.log(scrollbarRef )
}
return {
scrollbarRef,
handleScrollbar,
}
}
});
</script>四、toRef()（单个）
1、定义
是对原始数据的引用，修改toRef数据时，原始数据也会发生改变，但是视图并不会更新，主要是将对象中的某个值转化为响应式数据 toRef(obj,key)。
2、写法
<script lang="ts">
import { defineComponent ,toRef} from "vue";
export default defineComponent({
name: "HomeView",
setup() {
const data = {name:'',label:''}
const scrollbarRef = toRef(data.name)
const handleScrollbar = () => {
scrollbarRef.value = "132123"
console.log(data,scrollbarRef )
}
return {
data,
scrollbarRef,
handleScrollbar,
}
}
});
</script>五、toRefs()（多个）
1、定义
是将整个对象转化成响应式数据 toRefs(obj) 如果我们想要将一个对象中的多个属性变为响应式数据的话那就需要使用toRefs()
2、写法
<script lang="ts">
import { defineComponent ,toRefs} from "vue";
export default defineComponent({
name: "HomeView",
setup() {
const data = {name:'',label:''}
const scrollbarRef = toRefs(data)
const handleScrollbar = () => {
scrollbarRef.name.value = "132123"
scrollbarRef.label.value= "221222"
console.log(data,scrollbarRef )
}
return {
data,
scrollbarRef,
handleScrollbar,
}
}
});
</script>以上就是vue变量的定义以及简单的使用，ref定义变量需要读取变量的value进行修改，reactive定义对象需要拿到属性的value值进行修改。
