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,说明原始对象的值也被改变
  }
}
Logo

前往低代码交流专区

更多推荐