zoukankan      html  css  js  c++  java
  • vue methods computed watch区别

    一.methods和computed

    computed是计算属性,methods是方法。

    html:

    <p>Reversed message: "{{ reversedMessage() }}"</p>

    js:

    1.

    
    
    var vm = new Vue({
    el: '#example',
    data: {
    message: 'Hello'
    },
    computed: {
    // a computed getter
    reversedMessage: function () {
    // `this` points to the vm instance
    return this.message.split('').reverse().join('')
    }
    }
    })

    2.

    
    
    var vm = new Vue({
    el: '#example',
    data: {
    message: 'Hello'
    },
     
    
    
    methods: {
    reversedMessage: function () {
    return this.message.split('').reverse().join('')
    }
    }
    })

    我们可以将同一函数定义为一个 method 或者一个计算属性。对于最终的结果,两种方式确实是相同的。

    不同的是computed计算属性是基于它们的依赖进行缓存的。计算属性computed只有在它的相关依赖发生改变时才会重新求值。这就意味着只要message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。而对于method ,只要发生重新渲染,method 调用总会执行该函数。

    当有一个性能开销比较大的的计算属性 A ,它需要遍历一个极大的数组和做大量的计算。然后我们可能有其他的计算属性依赖于 A ,这时候,我们就需要缓存!

    但是,缓存也有自己的缺点:

    也同样意味着下面的计算属性将不再更新,因为 Date.now() 不是响应式依赖:

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

    总之:数据量大,需要缓存的时候用computed;每次确实需要重新加载,不需要缓存时用methods

    二.computed和watch

    Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:watch 属性。

    当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而,更好的想法是使用 computed 属性而不是命令式的 watch 回调。细想一下这个例子:

    
    
    <div id="demo">{{ fullName }}</div>
    
    
    var vm = new Vue({
    el: '#demo',
    data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
    },
    watch: {
    firstName: function (val) {
    this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
    this.fullName = this.firstName + ' ' + val
    }
    }
    })

    上面代码是命令式的和重复的。将它与 computed 属性的版本进行比较:

    
    
    var vm = new Vue({
    el: '#demo',
    data: {
    firstName: 'Foo',
    lastName: 'Bar'
    },
    computed: {
    fullName: function () {
    return this.firstName + ' ' + this.lastName
    }
    }
    })

    总之:尽量用computed计算属性来监视数据的变化,因为它本身就这个特性,用watch没有computed“自动”,手动设置使代码变复杂。

    摘自: https://blog.csdn.net/xiaoninvhuang/article/details/70543602

  • 相关阅读:
    import 本地Python module或package
    JSON+YAML初步学习+ciscoconfparse
    Ansible用于网络设备管理 part 4 使用NAPALM成品库+Gabriele的方法+循环
    Community Value再理解
    职业素养-8S
    JavaWeb项目的数据库访问简单基础类
    FastJson+Servlet实现Ajax案例
    Echarts和JSTL、EL标签的混合使用
    大数据典型应用场景
    Web前端开发与设计13-购物车案例
  • 原文地址:https://www.cnblogs.com/Mr-Rshare/p/9592070.html
Copyright © 2011-2022 走看看