51. Vue名称案例-使用watch监听数据变化

需求

上一章节,我才用了监听keyup事件的方式,实现了一个名称拼接的案例。那么其中Vue框架提供一个watch组件,可以用来监听数据的变化,然后再执行相关的业务方法。

那么,本篇章则可以使用watch来实现。下面先来看看官网的基本功能说明。

侦听器watch官网说明

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

例如:

Ask a yes/no question:

{{ answer }}

结果:

Ask a yes/no question:

I cannot give you an answer until you ask a question!

在这个示例中,使用 watch 选项允许我们执行异步操作 (访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。

除了 watch 选项之外,您还可以使用命令式的 vm.$watch API。

可以从上面的例子中看到,其实watch 简单来说,上面的例子就是监听一个v-model的参数,当监听的参数发现变化,则执行编写的函数方法。

下面我们在名称拼接案例中运用一下。

示例

1.使用watch编写名称拼接案例代码



    
        
        Title
        
        
    
    

        



2.打开浏览器查看效果

51. Vue名称案例-使用watch监听数据变化_第1张图片
image-20200301185013048
51. Vue名称案例-使用watch监听数据变化_第2张图片
image-20200301185033401

可以从效果来看,使用watch可以实现这种数据变化,执行相关业务的方法。

更多精彩原创Devops文章,快来关注我的公众号:【Devops社群】 吧:

image
51. Vue名称案例-使用watch监听数据变化_第3张图片
image

你可能感兴趣的:(51. Vue名称案例-使用watch监听数据变化)