zoukankan      html  css  js  c++  java
  • Vue计算属性和侦听器

    计算属性

    模板内的表达式非常便利,但是在模板中放入太多的逻辑会让模板过重切难以维护。对于任何复杂逻辑都应该使用计算属性。

    
    <p>{{ reverseMsg }}</>
    
    var vm = new Vue({
        el: '#example',
        data: {
            message: 'hello'
        },
        computed: {
            reverseMsg: function() {
                return this.message
            }
        }
    })
    

    这里声明一个计算属性reverseMsg。我们提供的函数将作用属性vm.reverseMsg的getter函数。

    我们可以在表达式中调用方法来达到和计算属性相同的作用。但是计算属性是基于它们的依赖缓存的。只有在相关依赖改变的时候才会重新求值。这就意味着只要message没有改变,多次访问reverseMsg还是返回同样的值,而不是执行函数。

    
    computed: {
        now: function() {
            return Date.now()
        }
    }
    

    如上是不会发生改变的,应该不是响应式依赖。

    1. 计算属性的setter

    计算属性默认只有getter,不过在需要时也可以提供一个setter。

    
    computed: {
        fullName: {
            get: function() {},
            set: function() {
                
            }
        }
    }
    

    侦听器

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

    来源:https://segmentfault.com/a/1190000016840663

  • 相关阅读:
    MVC传递数据的方式
    c#面向对象的多态
    使用扩展方法创建 HTML Helper
    了解视图、视图数据和 HTML Helper
    十种技能方法提高IT人薪酬
    ASP.net 2.0:系统优化
    第一个简单的MVC页面
    用户体验时代到来,功能不再重要
    关于SQL递归优化
    web(2)
  • 原文地址:https://www.cnblogs.com/qixidi/p/10126283.html
Copyright © 2011-2022 走看看