您现在的位置是:首页 >技术交流 >vue3—ref使用网站首页技术交流

vue3—ref使用

帝博格T-bag 2024-06-17 10:22:20
简介vue3—ref使用
  1. 导入ref对象
<script>
import {ref} from 'vue'
</script>
  1. 声明
    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>
  1. 调用
    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>
  1. 操作数据
    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中调用
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。