vue3

composition-api

setup()

1. props
2. ref
3. reactive
4. computed
5. watch
6. 生命周期
7. refs
8. toRefs

ref

接收一个参数值，返回一个响应式且可改变的ref对象

const num  = ref(0);
const num2 = ref(1)
console.log(ref.value)

reactive

接收一个普通对象，返回该普通对象的响应式原理

const state = reactive({
			num1: 0,
			num2: 1,
			result: 0
})
console.log(state.num1)
const num=> (){
	state.result=state.num1+state.num2
}

computed

计算属性

const result=computed(()=> {
	get: ()=> {
		return 2020-state.age
	},
	set:(val)=> {
		state.age = 2020 - val
	}
	
})

watch

const state = reactive({
	age: 18,
	name: zhangsan
})
watch(()=>state.age,(newVal,oldVal)=>{
	console.log(newVal,oldVal)
})
const change = (val)=> {
	state.age += val;
}
监测ref
const age = ref(18)

watch(age,(newVal,oldVal)=>{
	console.log(newVal,oldVal)
)}
监测两个值
watch([()=>state.age,()=>state.name],
([newAge,newName],[oldAge,oldName])=>{
	console.log(newAge,newNmae)
	console.log(oldAge,oldName)
))

生命周期

beforeCreate -> 使用 setup()
created -> 使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured

refs

<h2 ref="oH2">Vue3<h2>
<botton>click</botton>

const oH2 = ref(null)
const change = ()=> {
 	oH2.value.style.color = "#f00"
 })

toRefs

响应式对象转换为普通对象

const state = reactive({
	name: "张三“
})
 return {
    ...toRefs(state)
  }