大家好，本篇文章我们继续学习和Vue关系的内容，当天我们演绎总结下如何经常使用watch监听组件中的数据变动，以及computed和watch的区别。

什么是watch，以及如何经常使用？

watch是Vue.js中用于监听数据变动的一种机制。它准许我们在数据出现变动时口头特定的操作。

在Vue中经常使用watch的方法如下：

1.在Vue组件中，定义一个watch对象，其中蕴含要监听的数据属性以及对应的回调函数。

watch:{>其中，dataName是要监听的数据称号，newValue是新的值，oldValue是旧的值。
2.在Vue实例中，经常使用$watch()方法启动监听
vm.$watch('someData',function(newVal,oldVal){//dosomethingwithnewVal});
watch通罕用于监听一个数据的变动并口头复杂的业务逻辑，例如在某个数据变动后须要启动HTTP恳求或许调用其余函数。
上方是一个便捷的watch的例子:
<template><div><inputv-model="message"><p>{{message}}</p></div></template><script>exportdefault{>在这个例子中，我们经常使用了watch来监听message的变动，并在数据变动时打印出更改前后的值。
当然，watch还可以接纳一个对象，其中可以定义多个监听器。这里有一个例子，它监听了多个数据：
watch:{firstName:function(newVal,oldVal){console.log('firstNamechangedfrom'+oldVal+'to'+newVal)},lastName:function(newVal,oldVal){console.log('lastNamechangedfrom'+oldVal+'to'+newVal)}}
一些初级用法引见
1、深度观察(deep:true)：假设你宿愿对对象外部属性的变动启动监听，可以经常使用deep:true选项。
data(){user:{name:'John',age:25}},watch:{'user.name':function(val){console.log('usernamechanged:',val)}}
在这个例子中，我们监听了user对象中的name属性，当该属性变动时，会口头回调函数。
2、设置初始值(immediate:true)：假设你宿愿watch在组件创立时立刻口头一次性，可以经常使用immediate:true选项。
data(){count:0},watch:{count:{handler:function(val,oldVal){console.log('countchanged');},immediate:true}}
3、异步处置(handler)：watch的回调函数是异步口头的，这象征着假设有多个值在短期间内出现变动，回调函数只会在这些变动完结后口头一次性。
watch:{searchText:function(val){this.searching=truesetTimeout(()=>{this.searchData(val)this.searching=false},500)}}
在这个例子中，我们监听了searchText属性，并在数据变动后提前500毫秒口头搜查操作。
4、经常使用watch观察器成功智能保留
data(){content:''},watch:{content:function(val){localStorage.setItem('content',val)}}
在这个例子中，我们监听了content属性，并在数据变动时智能保留到本地存储中。
运行场景引见
watch监听器还有许多其余的运行场景，例如：
1.在表单输入时启动验证，并显示失误信息
<template><form><label>Eml:<inputv-model="email"@keyup="validateEmail"/></label><pv-if="error">{{error}}</p></form></template><script>exportdefault{>2.在地图上实时显示用户位置
<template><div><div></div></div></template><script>exportdefault{>在这个示例中，我们经常使用了watch来监听userLocation的变动，在用户位置出现变动时，经常使用setCenter方法将地图核心设置为用户以后位置，并经常使用googlemapsAPI在地图上减少一个标志，显示用户以后位置。
3、监听路由变动并口头相应操作
<template></template><script>exportdefault{watch:{$route(to,from){//依据路由变动口头相应操作if(to.path==='/home'){this.getHomeData()}elseif(to.path==='/about'){this.getAboutData()}}},methods:{getHomeData(){//失掉首页数据},getAboutData(){//失掉关于页数据}}}</script>
4、监听窗口大小变动并调整规划
<template></template><script>exportdefault{>5、监听滚动事情并成功懒加载
<template><div@scroll="handleScroll"><imgv-for="(item,index)inimages":key="index":src="item.src"v-show="item.isLoaded"/></div></template><script>exportdefault{>总之，watch是一个十分弱小和灵敏的配置，它可以在数据变动时口头任何操作，并且可以与computed计算属性配合经常使用，来成功更复杂的逻辑。
computed和watch的区别
watch和computed都可以监听Vue实例中的数据变动，然而它们有着显著的不同。
用于监听某个特定的数据变动。
用于计算属性，可以计算出一个新的值。
每次数据变动都会触发回调函数。
仅在关系依赖出现扭转时才会触发从新计算。
适用于异步操作或复杂逻辑。
适用于便捷计算。
无法以在模板中经常使用
可以在HTML模板中经常使用
没有前往值
有前往值/getter
可以修正data中的数据
也可以经常使用setters修正>总之，假设你须要在数据变动时口头异步操作或复杂逻辑，经常使用watch是更好的选用；假设你须要在数据变动时计算出一个新值，经常使用computed是更好的选用。
关于watch的性能
watch的性能取决于你的代码成功形式和监听的数据量。
所以,在经常使用watch时,应该留意监听的数据量,并且在watch回调函数中尽量少口头复杂的逻辑.总之,watch监听数据降级并口头回调函数，性能会遭到监听数据量和回调函数成功形式的影响，假设有性能疑问，应该优化监听的数据量和回调函数的成功形式.
完结
当天的文章就引见到这里，关于watch的用法你学会了，宿愿当天的文章能协助到你，感谢你的浏览。假设你青睐我的分享，别忘了点赞转发，让更多的人看到，最后别遗记点个关注，你的支持将是我分享最大的能源，后续我会继续输入更多内容，敬请等候。

Vue2 和 Vue3 中的 watch 用法

数据

情况一，监视 ref 所定义的一个响应式数据

情况二，监视 ref 所定义的多个响应式数据

情况三，监视 reactive 所定义的一个响应式数据

输出结果：

情况四，监视 reactive 所定义的一个响应式数据中的某个属性,(需要写到函数里面)

情况五，监视 reactive 所定义的一个响应式数据中的某些属性,(需要用数组包裹，在写到函数里面)

输出结果：

输出结果：

watchEffect watch 的套路是：既要指明监视的属性，也要指明监视的回调 watchEffect 的套路是：不用指明监视哪个属性，监视的回掉中用到那个属性，那就监视哪个属性 watchEffect 有点像computed：

总结：

Vue中watch的使用

在vue中，使用watch来响应数据的变化。 监测 Vue 实例变化的一个表达式或方法。 回调函数得到的参数为新值和旧值，用一个函数取代。 简洁的说：watch的作用可以监控一个值的变换，并调用因为变化需要执行的方法。 可以通过watch动态改变关联的状态。 watch函数的参数中，第一个是改变之前的值，第二个是改变之后的值， 这两个参数非常有用。 watch的2个参数 (newValue, oldValue) 当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。 例如ajax请求，复杂的业务逻辑处理等。 数据初始化 mounted watch 需要使用handler函数,并且开启深度侦听deep 当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。 当监测为对象的时候（非数组情况），deep = true 可以监测对象中属性的变化，并且（监测为对象的时候，newVal == oldVal） 此时,需要watch对象的某一具体属性才可以监听到数据的变化,具体做法是使用对象点方法获取到属性,并且用引号 (1)如果要观察data下一个对象的属性，可以使用 对象.属性 的方式， 注意： 一定要要引号。 (2)如果改变了一个对象的属性，就必须使用 deep: true， 否则检测不到变化。 (3)数组（一维、多维）的变化不需要通过深度监听，对象数组中对象的属性变化则需要deep深度监听。 以上监听shipStatusArr的用法，会在shipStatusArr中任一属性变化时触发，如果是只监听shipStatusArr的name变化，更优写法是： 进入组件的时候，第一次并不会执行watch，只有值发生改变才会执行 , 是因为immediate 默认 false 当 immediate = true 的时候，进入组件会立即执行。 并且可以监测到组件传递数据。 回调将会在侦听开始之后被立即调用。 如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。 监听的复杂数据后面写成对象形式，包含handler方法和immediate，之前我们写的函数其实就是在写这个handler方法。 immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。 (1)在watch中不要使用箭头函数，即不应该使用箭头函数来定义 watcher 函数 , 因为箭头函数中的this是指向当前作用域 (2)开启深度侦听后,触发一次,两个数据一致,这是vue做了处理 =>复杂数据类型的侦听需要开启深度侦听才可以检测到内部数据的改变,但开启深度侦听后,2个参数值是相同的,都是为数据的内存地址,精确到对象的属性名进行深度侦听可以解决此问题 =>如果修改复杂类型内部的数据也会触发，触发的频率就回比较高,因为复制类型数据可能多个地方使用,如果都会触发侦听器,则会一直执行,因此vue做了这个优化,不发生触发,如果非要侦听，可以使用深度侦听 如下所示 watch监听的值可以不判断条件,只要数据发生变化就执行某些逻辑 比如 搜索功能实现