（1）script setup
直接在script标签里面写setup，不用return数据啦。举个栗子
```
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld :msg="test"></HelloWorld>
<span>{{ test }}</span>
</template>
<script setup>
import HelloWorld from "@/components/HelloWorld";
import { ref } from "vue";
const test = ref("new feat");
</script>
```
（2）ref
直接实用ref，ref:name形式，访问的时候可以不使用.value
```
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<MyInput v-model="test" ref="myInput"></MyInput>
<span>{{ test }}</span>
</template>
<script setup>
import { default as MyInput } from "@/components/MyInput";
import { ref, useContext } from "vue";
ref: myInput = null;
ref: test = "hello";
setTimeout(() => {
myInput.clear();
}, 1000);
</script>
```
（3）css变量
使用v-bind直接绑定响应式数据
```
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<div id="app">
<div>{{ test }}</div>
<button @click="color = 'blue'">Blue</button>
<button @click="color = 'red'">Red</button>
</div>
</template>
<script setup>
import { default as MyInput } from "@/components/MyInput";
import { ref, useContext } from "vue";
ref: test = "hello";
ref: color = "red";
ref: mTop = 10;
setTimeout(() => {
mTop = 100;
}, 3000);
</script>
<style>
#app {
text-align: center;
color: v-bind(color);
margin-top: v-bind('mTop + "px"');
}
</style>
```
