vue3响应式 setup 使用this、ref、reactive、toRef、toRefs详解

setup

setup() 是VUE3写组合式 API 的地方，其在创建组件之前执行，因此在其中不能使用this，也就不能在setup里使用data()里的数据、methods里的方法、computed计算属性里的数据。

在setup里可以使用的property有：props，attrs，slots，emit，如何使用？这就要靠setup的两个参数：props和context。

export default {
    
    
  props: {
    
    
    title: String
  },
  setup(props, context) {
    
    
  	const {
    
     title } = toRefs(props) //props是响应式的，不能使用 ES6 解构，需借助toRefs
  	const {
    
     attrs, slots, emit } = context //context可直接解构
    ...
  }
}

响应式

如总人数30人，男20人，女10人。
创建一个响应式的变量用ref()，创建一个响应式的对象用reactive()。
访问ref的值：需要用.value；访问reactive的值，不需要。（模板里不需要.value：{ { total }}）

toRef和toRefs用法请看代码，当然例子没必要用他们，只作示范，假如响应式对象catgory是从父组件继承的，那就会很有用。

import {
    
     ref,reactive,toRef,toRefs } from 'vue'
export default {
    
    
  props: {
    
    
    title: String
  },
  setup(props, context) {
    
    
  	let total = ref(30) 
	total.value=50 //.value
	console.log(total.value) //50
	
	let catgory = reactive({
    
    male:20,female:10})
	catgory.male=40 //不用.value
	console.log(catgory.male) //40

	let male2 = toRef(catgory, 'male')  //toRef用响应式对象的属性新建一个新的ref，这个ref.value改变会同步改变原对象值 参数：(响应式对象，属性名)
	male2.value = 60 //toRef创建的是ref，所以要.value
	console.log(catgory.male) //60，说明原始对象的值也被改变
 	
 	let {
    
    male,female} = toRefs(catgory) //toRefs用解构的方式，把响应式对象的属性新建为多个新的ref
 	male.value=80
    female.value=20
    console.log(catgory.male) // 80，说明原始对象的值也被改变
    console.log(catgory.female)// 20，说明原始对象的值也被改变
  }
}