Vue.js（2.x）之计算属性

Posted ann_glx

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.js（2.x）之计算属性相关的知识，希望对你有一定的参考价值。

昨天看完大神的文章后，深感惭愧，硬着头皮继续看官网文档，然而这真的没是没办法，介绍的实在有些敷衍：

1）、计算属性:也不说下computed是计算属性关键词，vm实例是可以像代理data一样代理computed的，可以直接把其属性当文本插值放到html标签中。

 

2）、这里的getter是什么意思？

        console.log()又是干嘛用的？

        vm.reversedMessage的值取决于vm.message，那反过来成立吗？

  • 查了半天资料，知乎上面的解释全一点：getter 和 setter 方法有什么意义？看了半天，总得自己总结下吧：getter就是用来获取data的属性值，并可以作修改后输出（结合上方例子），但并不会影响data的属性值。
  • console.log()是在浏览器控制台里打印查看信息使用的函数（基础不牢啊），有网友介绍的很详细：http://blog.csdn.net/bcbobo21cn/article/details/51810601
  • 反过来不成立，vm.reversedMessage的值取决于vm.message，但vm.reversedMessage的值单独修改也无效，使用console.log()查看信息截图如下：

    可以清楚地看到更改vm.reversedMessage的值后，vm.message的值并没有更改，再打印它本身，也同样没有修改。

     不明白的地方是为何下方会出现undefined？

3）、简单理解getter，就是会返回值（获取值），setter就是设置属性值。可官网上给的例子与线下测试的并不一样：

 

代码如下图：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
</head>
<style>
  .static {
    background: #444;
    color: #eee;
    width: 100px;
    height: 100px;
  }
</style>
<body>
<div id="demo">{{ fullName }}</div>
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el: \'#demo\',
        data: {
            firstName: \'Foo\',
            lastName: \'Bar\',
            fullName: \'Foo Bar\'
        },
        computed: {
            fullName: {
                // getter
                get: function () {
                    return this.firstName + \' \' + this.lastName
                },
                // setter
                set: function (newValue) {
                    var names = newValue.split(\' \');
                    this.firstName = names[0];
                    this.lastName = names[names.length - 1];
                }
            }
        }
    })
</script>
</body>
</html>
View Code
 
从左图的浏览器的控制台打印信息可以看出，setter并没有被调用，vm.firstName和vm.lastName并没有被更新。这到底啥问题呢?
等到后面睁大眼睛后发现data里也设置了fullName，注释掉data里设置的fullName后，再运行并打印vm.firstName与vm.lastName，它们的值的确改变了，如右图所示：
            

由此偶这么猜想：当data里的属性名与计算属性computed里的属性名相同时，以data里的属性名为主，computed里的无效。

 

copy小结：

计算属性关键词: computed。

计算属性在处理一些复杂逻辑时是很有用的。

 计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。

以上是关于Vue.js（2.x）之计算属性的主要内容，如果未能解决你的问题，请参考以下文章

vue.js使用之计算属性与方法返回的差别

vue之计算属性和侦听器

Vue.js系列之二Vue实例

vue.js 是不是更新依赖于方法的计算属性？

Vue JS计算属性没有重新计算

Vue JS - 遍历计算属性以显示年份列表