持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情
Watch
Vue2---watch监听
//配置型完整写法
watch{
要监听的变量1:{
immediate:true//立即执行监听
deep:true//深度监听
handler(newvalue,oldvalue){
//这里就可以拿到newvalue和oldvalue
}
}
}
Vue3--watch监听
- 准备工作
import {ref,reactive,watch} from 'vue'
export default{
name: 'Demo',
setup(){
//定义数据
//监听
//return数据供模版使用
return {num,str,obj}
}
}
- 监听ref定义的响应式数据
setup(){
let num=ref(0)
let str=ref("onion")
//触发改变的事件直接写到模版中
//1、监听单个ref定义的响应式数据
watch(num,(newvalue,oldvalue)=>{
//代码块
console.log('num变了',newValue,oldValue)
})
//2、监听多个ref定义的响应式数据
watch([num,str]()=>{
//代码块
console.log('num或str变了',newValue,oldValue)
})
//3、立即执行immediate:true
watch([变量1,变量2........]()=>{
//代码块
},{immediate:true})
}
注意：ref也可以用来定义复杂数据类型比如obj，当我们监听ref定义的复杂数据类型时需要加上.value；这是因为ref定义的复杂数据要实现响应式借助了reactive函数proxy代理，我们打印可以发现value属性下面的proxy代理里面有我们需要监听的东西，所以当ref定义复杂数据类型我们需要监听时要加.value*
- 监听reactive定义的响应式数据
//定义一个reactive的响应式数据
let obj=reactive({
name:"张三",
age:"45",
children:
{
name:"张小三",
age:20,
house:
{
hou1:"浙江",
hou2:"上海"
}
}
})
//1、监听reactive定义的响应式数据obj的所有属性
watch(obj,(newValue,oldValue)=>{
console.log('ojb变化了',newValue,oldValue)},
{deep:false})
/*通过打印结果我们发现，配置的深度监听并未生效，而且并不能拿到正确的oldvalue*/
//2、监听reactive定义的响应式数据obj的某些属性（注意：可以得到newvalue和oldvalue）
watch([()=>obj.name,()=>obj.age],(newValue,oldValue)=>{
console.log("obj的name或者age变化了",newValue,oldValue)
})
/*只要把obj中的某个属性写成回调函数的方式，我们就可以监听到obj中某*个/些*属性的变化（特殊情况除外）*/
//3、特殊情况：比如现在我们要监听obj中children的变化
watch(()=>obj.children,(newValue,oldValue)=>{
console.log('obj的children变化了',newValue,oldValue)},
{deep:true})//这里配置的deep生效了，注意：拿不到正确的oldvalue
computed
Vue2的写法
在Vue2的data中的所有都是属性，然而计算属性computed是一个特殊的属性，需要单独配置。
.......
computed:{
resultX(){
//当第一次读取X时或者当计算属性X所依赖的属性发生变化时，get就会被调用；且返回的值就是X的值（具有缓存特性，如果多次读取，此get方法只会执行一次）
get(){
console.log(this)//此处的this指向组件实例
return "返回计算的结果"
},
//当X被修改的时候会执行set方法，一般不常用；当set被调用的时候会传入修改后的值
set(){
//代码块
}
}
/*简写*/
//这里相当于将计算的结果X这个函数当做get函数调用了
computed:{
resultX(){
return "返回计算的结果"
}
}
Vue3写法
//逻辑和Vue2差不多
setup(){
...........
let resultX=computed(()=>{
return "返回计算的结果"
})
........
}
watchEffect
//也可以用来监听---该函数不需要像watch一样指明要监听的是谁，而是在函数逻辑中用到谁就会监听谁
watchEffect(()=>{
//当下面的数据变化就会执行函数
const1=num.value
const2=obj.age
})
//注意：watcheffect函数的监听有些像computed计算属性，但又不完全一样；computed更在意计算出来的结果而且回调必须有返回值才行，而watchEffect函数更注重过程
