vue中的watch有immediate和deep两个配置参数,看看是咋用的。

immediate

假设我们页面上有一个搜索框,每次输入内容的时候去请求一个接口,同时一进页面的时候需要调一下这个接口,我们可能一般这样写:

我们将这个输入框的内容绑定一个变量value,同时利用watch去监视value有没有发生变化,如果变化了就是调用getData,然后在mounted里面调用getData,因为已进入的时候需要调用一次。

其实上面的第一次调用getData可以在watch中配置一个immediate,就像这样:

immediate表示立即执行的意思,这样就是说不用等到value变化才会执行,默认的时候就会立刻执行一次。handler表示需要调用的方法。

deep

如果我们用watch监视一个对象的时候,往往得不到正确的结果,例如:

我们定义了一个对象obj,将输入框和obj.name进行绑定,那么我们利用watch去监测obj,那么当输入框输入内容的时候,watch的obj是不会触发的。

此时可以用deep,因为用watch去监测obj,只有obj发生变化才会触发,如果是obj.name变化则没反应,如果用deep的话,表示可以监测到obj的下层变动:

但是如果用deep的话,还会有一些副作用,假如obj还有一个age的属性,那么age属性的变动也会被监测到。如果只是想单纯的监测obj.name的变动,直接监测'obj.name'可能会更好:

watch中不要用箭头函数

注意,watch观察的对象不能用箭头方法,否则this是undefined。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字