Vue 侦听器

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

当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。

例如:

<div id="watch-example">
  <p>
    Ask a yes/no question:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>
<!-- 因为 AJAX 库和通用工具的生态已经相当丰富,Vue 核心代码没有重复 -->
<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
  el: ‘#watch-example‘,
  data: {
    question: ‘‘,
    answer: ‘I cannot give you an answer until you ask a question!‘
  },
  watch: {
    // 如果 `question` 发生改变,这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = ‘Waiting for you to stop typing...‘
      this.debouncedGetAnswer()
    }
  },
  created: function () {
    // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
    // 在这个例子中,我们希望限制访问 yesno.wtf/api 的频率
    // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
    // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识,
    // 请参考:https://lodash.com/docs#debounce
    this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
  },
  methods: {
    getAnswer: function () {
      if (this.question.indexOf(‘?‘) === -1) {
        this.answer = ‘Questions usually contain a question mark. ;-)‘
        return
      }
      this.answer = ‘Thinking...‘
      var vm = this
      axios.get(‘https://yesno.wtf/api‘)
        .then(function (response) {
          vm.answer = _.capitalize(response.data.answer)
        })
        .catch(function (error) {
          vm.answer = ‘Error! Could not reach the API. ‘ + error
        })
    }
  }
})
</script>

结果:

Ask a yes/no question:

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

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

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

原文地址:https://www.cnblogs.com/xiewangfei123/p/12311154.html

时间: 02-15

Vue 侦听器的相关文章

js事件流、事件处理程序/事件侦听器

1.事件流 事件冒泡 IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档). 事件捕获 事件捕获的思想是不太具体的节点应该更早的接收到事件,而最具体的节点应该在最后接收到节点.事件捕获的用意在于事件到达预定目标之前捕获它. DOM事件流 “DOM2级事件流”规定的事件流包括三个阶段:事件捕获阶段.处于目标阶段和冒泡阶段.首先发生的是事件捕获,为截获事件提供了机会.然后是实际的目标接收到

31SkypeForBusiness2015进阶篇--创建侦听器并重新发布拓扑

6.3.13 创建侦听器 创建侦听器之前,我们需要更改下之前侦听器的DNS记录指定的IP地址,更新到我们规划的IP地址:172.16.10.23/24 6.3.15 重新发布拓扑

SQL Server 2012 AlwaysOn高可用配置之九:添加侦听器

9.   添加侦听器 9.1 点击"添加侦听器" 9.2 输入侦听器名称和端口,点击"添加" 9.3 输入侦听器IP,点击"确定" 9.4 点击"确定" 9.5 成功创建完成侦听器后如下" 9.6 在AD中自动生成相应的对象 9.7 在DNS自动生成相应的DNS记录 SQL Server 2012 AlwaysOn高可用配置篇成功完结 -----------------------------------------

16.3 添加侦听器

16.3  添加侦听器 16.3.1 添加侦听器 在 SSMS 中,右键单击"可用性组侦听器",然后在右键菜单中选择"添加侦听器". "在新的可用性组侦听器"窗口,为侦听器指定 DNS 名称.端口(实例当前使用的端口).IP 地址. 添加完成后,在"可用性组侦听器"中将列出已有的侦听器. 上述操作,脚本为: USE [master] GO ALTER AVAILABILITY GROUP [HAGroup01] ADD LIS

【转】写一个通用的事件侦听器函数

// event(事件)工具集,来源:github.com/markyun markyun.Event = { // 页面加载完成后 readyEvent : function(fn) { if (fn==null) { fn=document; } var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = fn; } else { window.onload = functi

通用的事件侦听器函数

// event(事件)工具集,来源:github.com/markyunmarkyun.Event = { // 页面加载完成后 readyEvent : function(fn) { if (fn==null) { fn=document; } var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = fn; } else { window.onload = functio

关于如何获取 MAXScript 侦听器内的文本

用来保存记录?还没想到实际用处,先记上. macroRecorder as string listener as string

没有终结点在侦听可以接受消息的 http://erp-test/5.0/U9WorkflowService。这通常是由于不正确的

描述:启用工作流的单据,提交时提示,没有终结点在侦听可以接受消息的 http://erp-test/5.0/U9WorkflowService.这通常是由于不正确的地址或者 SOAP 操作导致的.如果存在此情况,请参见 InnerException 以了解详细信息. 解决:因服务器 的 U9Mailservice_5.0和U9NotificationService_5.0未启动,启动即可.

Android Listener侦听的N种写法

Android中,View的Listener方法,在是否使用匿名类匿名对象时,有各种不同的写法. OnClickListener和其他Listener方法一样,都是View类的接口,重载实现后就能使用,其接口定义如下: [java] view plaincopyprint? public interface OnClickListener { /** * Called when a view has been clicked. * * @param v The view that was cli

[Mark]Tomcat/IIS 更改 HTTP 侦听端口

目的: IIS HTTP 侦听端口改为 8088 Tomcat HTTP 侦听端口改为 80 环境: Windows Server 2012 R2 IIS8.5 (默认端口是 80) Tomcat8.0 (默认端口是 8080) SQL Server 2014 预想: 关掉IIS服务,修改HTTP协议的侦听端口,重启IIS 修改Tomocat HTTP协议的侦听端口,重启Tomcat BUT that's too easy... 按上面预想的步骤简单操作后,直接 http://localhost