Composition API 监听属性
watchEffect
<script>
import {ref,watchEffect} from 'vue'
export default {
name: 'HelloWorld',
props: {
msg: String
},
setup(){
const count = ref(0)
const stop = watchEffect(()=>{//立即执行,没有immediate
//自动感应代码的依赖,只需要传一个回调函数
//可以通过调用它的返回值来停止侦听器
console.log(count.value)
})
setInterval(() => {
count.value++
}, 1000);
return{
count,
stop
}
}
}
</script>
watch
<script>
import {ref,watchEffect,reactive,watch} from 'vue'
export default {
name: 'HelloWorld',
props: {
msg: String
},
setup(){
const count = ref(0)
//直接这样写类似watchEffect,创建时自己调用
var stop = watch(()=>{
console.log(count.value)
})
//指定数据,传入三个参数,(要监听的属性,回调函数,属性对象)
var stop = watch(count,(val,oval)=>{//回调函数接收两个参数,旧值,新值
console.log(val,oval)
},{
immediate:true//默认创建不会自己调用,设置true来让它创建自动调用
})
//
setInterval(() => {
count.value++
}, 1000);
return{
count,
stop,
}
}
}
</script>
监听对象
<script>
import {ref,watchEffect,reactive,watch,toRefs} from 'vue'
export default {
name: 'HelloWorld',
props: {
msg: String
},
setup(){
const user = reactive({
id:1010,
name:'张三'
})
var stop = watch(user,(val,oval)=>{
console.log(val.id,oval)//这样访问
},{
immediate:true,
deep:true//深度监听(侦听某个对象具体的值,必须开启深度侦听,否则侦听不到值)
})
return{
user,
stop,
}
}
}
</script>
监听对象中的单个属性
var stop = watch(()=>user.id,(val,oval)=>{
console.log(val,oval)
},{
immediate:true,
//deep:true
})
//相当于这样,()=>就是将属性转换成了ref,回调函数传入的参数默认会换成别的格式
setup(){
const user = reactive({
id:1010,
name:'张三'
})
let num = toRefs(user)
var stop = watch(num.id,(val,oval)=>{
console.log(val,oval)
},{
immediate:true,
//deep:true
})
监听多个属性
//用数组的形式,回调函数中参数,第一个数组中的是新值,第二个数组中是旧值
var stop = watch([()=>user.id,()=>user.name],([id,name],[oid,oname])=>{
console.log(id,name)
},{
immediate:true,
//deep:true
})