您现在的位置是：首页 >技术教程 >Vue全流程--Vue3组合一ref与reactive（实现响应式）网站首页技术教程

ref：定义基本类型的响应式数据

先看ref使用的位置

<script >
import {ref} from 'vue'
export default {name: 'App',
		setup()
    {
			//数据
			let name = ref('张三')
			let age = ref(18)
			

			//方法
			function changeInfo(){
				// name = '李四'
				// age = 48
        console.log(name,age)
			}

			//返回一个对象（常用）
			return {
				name,
				age,
				changeInfo
			}
		}
  }
</script>

从控制台我们可以看到Vue3中用ref包裹的数据会以引用数据的形式给出。

而我们要修改的值就在value中。

所以我们需要对代码稍加修改，在属性值后面加上“.value”

function changeInfo(){
				name.value = '李四'
				age.value = 48
			}

reactive:定义对象式响应式数据

let job = reactive({
				type:'前端工程师',
				salary:'30K'
			})

reactive(源对象)。返回的是一个代理对象（proxy对象）

reactive可以相应深层次的数据（{{{对象里面套对象的那种情况}}}