一、定义变量和应用类型(数组,对象)
常量用 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.