vue3—ref使用

1. 导入ref对象

<script>
import {ref} from 'vue'
</script>

2. 声明
   2-1 全局使用setup

<script setup>
import {ref} from 'vue'
const count = ref(0)
</script>

2-2 局部使用setup

<script>
import {ref} from 'vue'
export default {
	name: 'App',
	setup() {
		const count = ref(0)
	}
}

</script>

3. 调用
   3-1 全局setup，直接调用

<h1>{{count}}</h1>

<script setup>
import {ref} from 'vue'
const count = ref(0)
</script>

3-2 局部setup，返回变量后，调用

<h1>{{count}}</h1>

<script>
import {ref} from 'vue'
export default {
	name: 'App',
	setup() {
		const count = ref(0)
		return { count }
	}
}

</script>

4. 操作数据
   4-1 全局setup

<h1>{{count}}</h1>
<button @click="increase">+1</button>

<script setup>
import {ref} from 'vue'
const count = ref(0)
const increase = () => {
	count.value ++
}
</script>

4-2 局部setup

<h1>{{count}}</h1>
<button @click="increase">+1</button>

<script>
import {ref} from 'vue'
export default {
	name: 'App',
	setup() {
		const count = ref(0)
		const increase = () => {
			count.value ++
		}
		return { count, increase }
	}
}

</script>

总结：
①使用ref的基本步骤

1. 通过vue导入指定对象或函数
2. 再setup中声明变量(全局和局部)
3. 再html页面中调用
   ② 知识点
4. 通过ref生成的变量, 通过 变量名.value = X， 赋值
5. 在全局setup中，变量和函数可以直接在html中调用， 局部setup中，变量和函数需要return返回，才能在html中调用