vue中watch学习记录

watch属性在官网的解释

watch主要用于数据监听，与data,methods同级

使用方式（以按钮加载状态为例）：

1），页面上放一个btn按钮，给一个加载状态和一个点击事件

2），加载状态绑定到data上

3），点击事件绑定到methods

 

 4），在watch中进行监听

 

首先讲一下watch工作流程：点击按钮触发methods点击事件，改变data中loading的状态，watch监听到loading状态改变，触发相应的动作

watch中的事件名应与data中的状态命名一样（loading）

loading函数有两个参数，分别是目前的状态（newOld）与改变之前的状态（oldVal）

immediate  ：

watch默认首次渲染不触发 ，可以通过添加    immediate  属性，设置创建watch监听器后立即触发，第一次调用时参数   oldVal  为  undefined，添加    immediate    属性后写法需要改变一下，函数体名称变为 handler , 原  loading  函数改为对象格式

 

 

deep：

watch默认监听一层，如果data中的状态定义的是    Object    或者    Array    ,则无法进行深度监听

 如果修改成这样，watch就无法进行监听了，因为默认只监听一层

此时在watch中添加deep属性，就可以触发深度监听

异步：

watch中可以进行异步操作

作用域问题： 

在watch中最好使用  function 而不要使用箭头函数，因为箭头函数的this指向使得它不能访问到data中定义的变量，

----------------------------------------------------------

以上为个人理解，如有不足，欢迎在评论区指正