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编写名称拼接案例代码

    
        
        
        
        
    
    

        


            
            

                姓氏：
                
                

                名称：
                
                

                姓名：
                
                

            

        

        

    

2.打开浏览器查看效果

image-20200301185013048

image-20200301185033401

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

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

image

image