快速上手vue3.x

一、定义变量和应用类型（数组，对象）

常量用 ref()      引用类型用 reactive()

import {ref, reactive} from 'vue'

let num = ref(0)

let obj = reactive({

    a:1,
    b:2
})

let arr = reactive([1,2,3])

用ref获取dom

<input ref="refDom">

    onMount(()=>{
		    refDom.value&&refDom.value.focus()
	})

二、proxy

vue3 中的数据监听用的是new proxy() ,proxy 里面有三个方法，get set delete， 所以在更改对象属性时，也会监听到。

三、计算属性 使用

let componentsFn = computed({

		   return value
		
	})

	let componentsFn = computed({

		get(){
			return value
		},
		set(){
			return value
		}
	})

四、watch的使用

分为两种  监听ref 定义的数据， 监听reactive定义的数据

   let str = ref('abc')

	warch(str,(newval,oldval)=>{
		console.log(newval, oldval)
	})

	let obj = reactive({
		a:1,
		b: 2
	})

	watch(()=>obj.a,(new, old)=>{console.log(new, old)})

监听多个值   (new 和 old 分别是数组，对应前面所监听的)

watch([str,()=>obj.a],(new, old)=>{
console.log(new, old)
})

立即监听和深度监听

watch(
[str,()=>obj.a],
 (new, old)=>{console.log(new, old},
 {
    immediate: true,   //立即监听
     deep: true      //深度监听
})

watchEffect

    1.watchEffect自动收集依赖数据，依赖数据更新时重新执行自身
    2.立即执行，没有惰性，页面的首次加载就会执行
    3.