computed watch区别,vue watch compute
本文主要介绍了Vue中computed和watch的用法和区别，并通过实例进行了详细说明。对Vue感兴趣的同学可以了解一下。
目录
computedcomputed只接收一个getter函数computed同时接收getter函数对象和setter函数对象。调试ComputedwatchEffect会立即执行对基本数据类型的监视。停止watchEffect并清理watchEffectwatchPostEffect和WatchSyncEffectwatchEffect不能监听的对象watch监听单个数据和监听多个数据(传入数组)正式文档摘要computedwatchEffectwatch
computed
computed只接收一个getter函数
1.getter必须有返回值
2.computed返回只读响应ref对象(只读、响应、对象)
注意：当omputed只接收一个getter函数时，返回的只读对象，即其返回值不可修改！
getter触发条件
1.当第一次读取计算的返回值时；2.当getter绑定的响应变量被修改时，脚本设置
从“vue”导入{ ref，computed }
const num=ref(1)
//computed返回只读响应ref对象computedNum
//computedNum是只读属性
设computed num=computed(()=num . value 1)
/脚本
模板
p编号：{{ num }} /p
p computer num:{ { computed num } }/p
！-修改响应变量num以触发绑定到它的计算的getter -
按钮@click=num num /button
！- computedNum是只读属性-
button @ click= computed num computed num/button
/模板
computed同时接收getter函数对象和setter函数对象
1.setter函数对象没有返回值。
2.computed返回可读可写响应对象。
3.setter函数对象有参数，参数是getter的返回值和计算值。
4.修改计算的返回值会触发setter函数对象执行，但不会真正修改计算的返回值(在setter中更改getter计算的值会更改计算的返回值)
setter触发条件
当计算的返回值被修改时
示例：
脚本设置
从“vue”导入{ ref，computed }
const num=ref(1)
//getter(只读)
设computed num=computed(()=num . value 1)
//getter和setter(可读和可写)
let computedNum2=computed({
get: ()=num.value 1，
set: (val)={
console . log(val)；
//修改//setter中的ref响应变量num将触发关联num的getter计算。
//computedNum和computedNum2的getter同时被触发
数值
}
})
/脚本
模板
p编号：{{ num }} /p
p computer num:{ { computed num } }/p
p computer num 2:{ { computed num 2 } }/p
按钮@click=num num /button
！- computedNum是只读属性，会有警告提醒写操作失败：计算值是ReadOnly-
button @ click= computed num computed num/button
！- computedNum2是一个可读写的属性-
button @ click= computed num 2 computed num 2/button
/模板
调试 Computed
使用范围：只有开发模式生效。
computed: object的第二个参数带有onTrack和onTrigger选项。
Onrack: Geter关联的响应数据。触发时：当与getter关联的响应数据是被修改时，触发脚本设置。
从“vue”导入{ ref，computed }
const num=ref(1)
设computed num=computed(()=num . value 1，{
onTrack: (e)={
console . log( onTrack )；
console . log(e)；
},
onTrigger: (e)={
console . log( onTrigger )；
console . log(e)；
}
})
/脚本
模板
p编号：{{ num }} /p
p computer num:{ { computed num } }/p
！-每次num将触发一个触发器-
按钮@click=num num /button
/模板
watchEffect
语法：
参数1:触发监控回调函数，可以传递一个onInvalidate函数作为参数！参数2: object，包含三个可选属性flush、onTrack、onTrigger立即执行和一个传入的函数。同时响应性地跟踪其依赖关系，当其依赖关系发生变化时，重新运行该函数。
1.会立即执行一次(效果与watch的immediate属性一致)
2.当相关响应数据为被修改时触发。
3.它会自动感知代码依赖。与watch不同，watchEffect会主动绑定和监控数据。
限制：不能监听对象(但是可以监听它们的属性)，只能监听ref基本数据类型之类的响应式数据。
立即执行 监听基本数据类型
脚本设置
从“vue”导入{ ref，watchEffect }
const num=ref(1)
//将立即执行一次。
watchEffect(()={
console . log( watch effect )；
数值
})
/脚本
模板
pnum: {{ num }}/p
按钮@click=num num /button
/模板
停止watchEffect
隐式：卸载组件时自动停止。
显式：调用watchEffect返回值。
const stop=watchEffect(()={
/* .*/
})
//显式停止
停止()
清理watchEffect
语法：watch effect(on invalid={ on invalid(()={ })})
Oninvalid是一个函数！先触发！
OnInvalidate执行时间：
1.当观察效果再次被触发时
2.当部件被卸载时
注意：当关联响应数据为首次被修改时，不会触发onInvalidate功能！
功能：清除计时器，事件监视器removeEventListener。
从“vue”导入{ ref，watchEffect }
const num=ref(1)
watchEffect((onInvalidate )={
console . log( watch effect-1 )；
数值
onInvalidate (()={
console . log( on invalidate-2 )；
})
console . log( watch effect-3 )；
})
//1，再次触发watchEffect时
//onInvalidate-2
//watchEffect-1
//watchEffect-3
//2.当组件被卸载时
//onInvalidate-2
//3.相关的响应数据第一次被修改(当组件被安装时)
//watchEffect-1
//watchEffect-3
watchPostEffect 和 watchSyncEffect
WatchPostEffect和watchSyncEffect是Vue3.2中新增的，和watchEffect的语法糖差不多。
watchEffect是可选参数对象{flush？post和sync在 pre post sync}中的语法糖，pre是默认值。
推迟触发watchPostEffect
WatchPostEffect是watchEffect可选参数对象{flush:post}的语法糖。
延迟watchEffect的触发时间！组件更新前触发！也就是说，它在生命周期onBeforeUpdate和onUpdated之间触发。
语法：
//延迟触发watchEffect
手表效果(
()={
/* .*/
},
{
同花顺：“发布”
}
)
//Vue3.2语法sugar watchPostEffect
watchPostEffect(()={
/* .*/
})
示例：
//试验第二个参数flush:watch effect的“post”属性
watchEffect(()={
Console.log(实验性watchEffect {flush: post}属性的第二个参数)；
console . log(obj . age)；
},{
同花顺：“发布”
})
watchEffect(()={
Console.log(watchEffect由正常时间触发)；
console . log(obj . age)；
})
//生命周期未更新
未更新(()={
console . log( on updated())；
})
//生命周期onBeforeUpdate
onBeforeUpdate(()={
console . log( onBeforeUpdate())；
})
修改obj.age时，执行结果：
WatchEffect正常计时触发器
onBeforeUpdate()
实验watchEffect第二个参数{flush: post}属性
未更新()
同步触发watchSyncEffect
WatchSyncEffect是watchEffect可选参数对象{flush:sync}的语法糖。
原力效果永远是同步触发！效率低！即在默认的watchEffect之前触发。
语法：
手表效果(
()={
/* .*/
},
{
刷新：“同步”
}
)
//Vue3.2语法糖watchSyncEffect
watchSyncEffect(()={
/* .*/
})
watchEffect不能监听对象
//假设对象的属性值被修改——obj . age被修改
Const obj=reactive({姓名：小明，年龄：18})
//watchEffect无法侦听对象更改。
watchEffect(()={
Console.log(watchEffect侦听对象更改)；
console . log(obj)；
})
//watchEffect可以监控对象属性的变化。
watchEffect(()={
Console.log(watchEffect侦听对象属性更改)；
console . log(obj . age)；
})
//观察以侦听对象更改
手表(obj，(obj)={
Console.log(watch侦听对象更改)；
console . log(obj)；
})
总结：watchEffect用于监控基本数据类型，不是对象，而是对象的属性；Watch可以监控基本的数据类型和对象！
watch
语法：
1-参数-监控的数据(形式：单个数据，数组，有返回值的回调函数)参数2-触发监控的回调函数，没有返回值的可选参数3-对象{immediate: true，deep:true}，对象包含两个可选参数且Vue2参数的效果一致。Vue3的手表和Vue2的手表基本一样。
1、需要指定监听数据
2、惰性，只在被监听数据变化时才触发（立即属性可以设置在初始化的时候触发)
监听单个数据
参数一被监听数据的形式：
1、单个基本数据类型；
2、回调函数：返回值为单个基本数据类型；
//侦听一个吸气剂
//被监听数据传入一个带返回值的回调函数
常量状态=反应性({ count: 0 })
手表（
()=state.count，
（计数，前计数)={
/* .*/
}
)
//直接侦听一个裁判员
const count=ref(0)
手表（计数，(计数，前计数)={
/* .*/
})
监听多个数据(传入数组)
手表([fooRef，barRef]，([foo，bar]，[prevFoo，prevBar])={
/* .*/
})
官方文档总结
以下代码截取官方文档，从分时（同分时)代码可以看出很多关于看和手表效果函数参数和返回值的细节！
computed
计算只接收一个吸气剂函数
吸气剂触发条件：
1、计算返回值首次被读取时
2、吸气剂绑定的响应式变量被修改时
计算同时接收吸气剂函数对象和作曲者函数对象
作曲者触发条件：已计算返回值被修改时
//只读的
函数计算值（
getter: ()=T，
调试器选项？调试器选项
):ReadonlyRefReadonlyT
//可写的
函数计算值（
选项：{
get: ()=T
set: (value: T)=void
},
调试器选项？调试器选项
):参考
接口调试器选项{
onTrack？(event: DebuggerEvent)=void
onTrigger？(event: DebuggerEvent)=void
}
接口调试器事件{
效果：反应效果
目标：任何
类型：操作类型
关键字：字符串符号未定义
}
watchEffect
参数1-触发监听回调函数，回调函数可传入一个onInvalidate函数作为参数！可选参数2-对象，包含3个可选属性flush、onTrack、onTriggerfunction watchEffect(
效果：(on invalidate:InvalidateCbRegistrator)=void，
选项？WatchEffectOptions
):停止句柄
界面WatchEffectOptions {
同花顺？前 后 同步//默认：前
onTrack？(event: DebuggerEvent)=void
onTrigger？(event: DebuggerEvent)=void
}
接口调试器事件{
效果：反应效果
目标：任何
类型：操作类型
关键字：字符串符号未定义
}
type InvalidateCbRegistrator=(invalidate:)=void)=void
类型StopHandle=()=void
watch
参数1-被监听数据（形式：单个数据、数组、带返回值的回调函数)参数2-触发监听的回调函数，无返回值参数3-传入{即时：真实，深层：真实}对象和Vue2参数效果一致//侦听单一源
函数手表(
来源：WatcherSourceT，
回拨： (
值：T，
旧值：T，
invalidate:InvalidateCbRegistrator
)=void，
选项？手表选项
):停止句柄
//侦听多个源
函数手表扩展了WatcherSourceunknown[](
来源：T
回拨： (
值：MapSourcesT，
旧值：MapSourcesT，
invalidate:InvalidateCbRegistrator
)=void，
选项？手表选项
):停止句柄
类型WatcherSourceT=RefT (()=T)
类型MapSourcesT={
[K in keyof T]: T[K]扩展WatcherSourceinfer V？从来没有
}
//参见`观看效果共享选项的类型声明
接口观察选项扩展了WatchEffectOptions {
立竿见影？boolean //默认：错误
深？布尔型
}
以上就是详解某视频剪辑软件中计算与看的用法与区别的详细内容，更多关于某视频剪辑软件电脑手表的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。