3-4#去哪儿网app#计算属性、方法、监听器

0.引言

初学的时候，如果要打印这个人的全名，就要像上图1一样用插值表达式，但比较麻烦。下面给出三个方法。

1.计算属性：computed

代码：

<div id="app">
    {{fullName}} {{age}}
    <!--插值表达式不仅可以放置data里的属性，还可以调用函数-->
</div>

 

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            firstName: "Dell",
            lastName: "Lee",
            age: 28
        },
        // 1.使用 计算属性 来达到{{firstName + " " + lastName}}效果
        computed: {
            fullName: function() {
                console.log("计算了一次");
                // 计算属性有缓存功能
                return this.firstName + " " + this.lastName
                    // 这里写return
            }
        }
//后面省略

计算属性computed具有缓存功能，即只要不修改函数里的变量值，当页面重新渲染时，不重新执行函数；只有修改如firstName时，才会重新执行，添加console.log("计算了一次")可以看出，下面在网页中进行验证：

并且网页这里还可以看出来，在网页的console中修改属性，网页会重新渲染(v-model的双向绑定之一，这点应该是通用的，v-model只是实现了另一向绑定)：

2.计算方法：写到methods中

代码：

<div id="app">
    {{fullName()}} {{age}}
    <!-- 注意：使用methods中的方法时，要加() -->
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            firstName: "Dell",
            lastName: "Lee",
            age: 28
        },
        // 2.使用计算方法来达到{{firstName + " " + lastName}}效果
        methods: {
            fullName: function() {
                console.log("计算了一次");
                return this.firstName + " " + this.lastName
            }
        }
    })
</script>

 

计算方法与计算属性对比而言：由于后者计算属性有缓存功能，所以效率更高，也可以在网页验证:

可以看出来，每次修改任意值后，重新渲染网页都会打印"计算了一次"

3.监听器

和计算属性类似，也具有缓存的功能。但代码比计算属性复杂很多，所以如果二者都可以用，则选择计算属性。

代码：

<div id="app">
    {{fullName}} {{age}}
    <!-- 监听器不用加括号  -->
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            firstName: "Dell",
            lastName: "Lee",
            fullName: "Dell Lee",
            age: 28
        },
        // 3.第三种方法：监听器，目的是修改某个name，从而改变fullName
        watch: {
            firstName: function() {
                console.log("计算了一次");
                this.fullName = this.firstName + " " + this.lastName;
            },
            lastName: function() {
                console.log("计算了一次");
                this.fullName = this.firstName + " " + this.lastName;
            }
        }
    })
</script>

网页中验证效果与计算属性的效果一致：

 

 

 

4.总结

注意计算方法的插值表达式中调用函数后面要加()

监听器方法代码过于复杂，如果可以用别的，则优先别的方法

这三种方法都是要定义函数