vue定义侦听器,vue数据监听原理

　　Vue提供了一种更通用的方法来观察和响应当前活动实例中的数据变化：截取属性。下面这篇文章主要介绍Vue3.0各种拦截方式的相关信息，有需要的可以参考一下。

侦听器

　　虽然计算属性在大多数情况下更合适，但有时需要自定义侦听器。这就是为什么Vue通过watch选项提供了一种更通用的方式来响应数据的变化。当数据更改时需要执行异步或昂贵的操作时，这种方法最有用。

一、wacthEffect

　　立即执行，不立即

　　监听，watchEffect是立即执行的，没有立即，也不需要传递监听内容。它会自动感知代码依赖，不需要传递参数。你只需要传递一个回调函数就可以得到之前的值。

　　如果需要停用监听器，可以回调这个监听器函数。

　　const stop=watchEffect(()={

　　//console.log(num:，num . value)；

　　//console.log(num:，str . value)；

　　})

二、watch

　　不会立即执行，需要手动打开立即。

　　//指定主要侦听的值num。

　　手表(数字，(val，oval)={

　　//val:新值，oval:以前的值

　　//console . log(num . value)；

　　//console.log(val，oval)；

　　}，{//第二个参数obj immediate，deep

　　Immediate:true//默认情况下，它只在数据更改时侦听，

　　//第一次创建时不会执行。将其设置为true，它将在第一次执行。

　　})

　　听ref的数据来源

　　监听反应性数据源

1.1第一种方式侦听

　　//监听状态下的id，对象数据的变化

　　手表(状态，(val，oval)={

　　//console.log(id ，val.id，oval)；

　　},{

　　即时：真的，

　　Deep:true//开启深度监听，可以监听对象属性值的变化。

　　})

1.2第二种方式侦听

　　//监听state.uname

　　watch(()=state.uname，(uname，p)={

　　//uname新值，p旧值

　　console.log(uname，p)；

　　},{

　　即时：正确

　　})

1.3侦听多个数据源

　　//监听多个数据(id，uname)

　　//()=state.id，相当于//object.values(toRefs(state))解构

　　const stop=watch([()=state.id，()=state.uname]，([id，uname]，[oid，oname])={

　　//id是新的，oid是旧的

　　console.log(id ，id，oid)；

　　//uname新，oname旧

　　console.log(uname ，uname，oname)；

　　})

总结

　　关于Vue3.0多种拦截模式的这篇文章到此为止。更多关于Vue3.0拦截模式的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。