Vue 实例模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护(Vue.js官网教程)。

模板中表达式的值可以通过 “计算属性(computed)” 、“方法(methods)”、“侦听器(watch)”来进行修改。

可爱咖啡杯,今天也是元气满满(图片来自 Pinterest

以下示例代码用来演示这三种方法。

<body>
    <div id="app">
        <span>{{fullName}}</span>
        <span>{{gender}}</span>
        <span>{{figure()}}</span>
        <span>{{hobbies}}</span>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                firstName: "Xue",
                lastName: "Jingwei",
                gender: "Male",
                stature: "182cm",
                weight: "60kg",
                hobbyOne: "Learn Vue",
                hobbyTwo: "Learn JavaScript",
                //仅有侦听器需要这行属性
                hobbies: "Learn Vue, Learn JavaScript"
            }
        })
    </script>
</body>

计算属性:

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

如下代码中设置计算属性 fullName,该计算属性根据 firstName 属性和 lastName 属性求出结果,只要这两个属性不发生变化,fullName 属性不会重复求值。

computed: {
                fullName: function () {
                    console.log("It is computed!");
                    //依赖的firstName、lastName属性不发生改变时不执行:即使修改属性值,只要跟原属性值一致,计算属性不会重复执行
                    //gender属性改变与否,计算属性均不会执行
                    return this.firstName + " " + this.lastName;
                }
}

方法:

类似计算属性,下面的代码中定义一个方法 figure(),根据 stature 属性和 weight 属性来显示身高和体重。

与计算属性不同的是,即便不修改 stature 属性和 weight 属性,修改不相干的 gender 属性,方法也会再次执行,因为视图被重新渲染了(修改了 gender 属性),方法便会执行。

methods: {
                figure: function () {
                    console.log("It is executed!"); 
                    //页面一旦重新渲染,方法便会执行:修改gender属性,figure方法也会执行
                    return this.stature + " " + this.weight;
                }
}

侦听器:

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性。模仿 fullName 属性,在数据中添加 hobbies 属性,该属性根据 hobbyOne 和 hobbyTwo 两个属性求出结果。

在 watch 侦听器中设置监控 hobbyOne 和 hobbyTwo 属性,这两个属性其中任意一个发生改变时都会导致 hobbies 属性重新计算,但修改不相干的属性时,hobbies 属性不会重新计算,这一点与计算属性相同。

watch: {
                //依赖的hobbyOne、 hobbyTwo属性不发生改变时不执行,与计算属性相同
                //gender属性改变与否,侦听器均不会执行
                hobbyOne: function () {
                    console.log("HobbyOne is changed!")
                    this.hobbies = this.hobbyOne + ", " + this.hobbyTwo;
                },
                hobbyTwo: function () {
                    console.log("HobbyTwo is changed!");
                    this.hobbies = this.hobbyOne + ", " + this.hobbyTwo;
                }
}

经过测试可以发现,计算属性、侦听属性都具有缓存的特性,只要依赖属性不发生改变就不会重新计算。而方法是没有的,一旦视图重新渲染,方法便会执行,即使发生改变的是不依赖的属性。

发表评论

电子邮件地址不会被公开。 必填项已用*标注