Vue：计算属性computed / 方法methods / 监视watch·源栈课堂·一起帮

Vue：计算属性computed / 方法methods / 监视watch

当前系列： Vue.js

computed

比如说我们从后台拿到了文章正文内容，前台显示时只需要显示前面25个字符，怎么办？

之前我们的做法：

<h1 id="yz-hello" >{{body.substring(0,25)}}</h1>

data: {
    body : '一起(17)帮(bang)是一个旨在直接解决编程/电脑操作等具体问题、互助式的虚拟社区平台。直接解决具体问题 '
}

如果使用计算属性，代码就变成这样：

<h1 id="yz-hello">{{summary}}</h1>

var vm = new Vue({
    el: "#yz-hello",
    data: {
        body: '一起(17)帮(bang)是一个旨在直接解决编程/电脑操作等具体问题、互助式的虚拟社区平台。直接解决具体问题 '
    },
    computed: {
        summary: function () {
            return this.body.substring(0, 25);
        }
    }
})

首先，我们在Vue的option参数中额外添加了一个属性：computed
然后，在computed里面又添加了一个summary的属性，类型为函数
summary函数会根据vue data中的body进行计算（注意这里的this），返回一个字符串
最后，在模板里就可以把summary当做vue data一样直接使用了（注意没有圆括号()）

可以简单的理解为：计算属性把以前在模板里面的工作给做了。

当然，计算属性可以做得更多：模板里面的JavaScript表达式只能是单行的，计算属性的复杂度不受任何限制。

数组的筛选

回到我们前面筛选列表但是不要同时使用v-for和v-if的问题，使用计算属性该如何实现呢？

computed: {
    filtered: function () {
        return this.students.filter(function (s, i) {    //filter是JavaScript内置方法
            return i > 1;
        })
    }
}

getter和setter

默认，我们是通过计算属性取值用。

但其实还可以给计算属性赋值：

computed: {
    summary: {
        get: function() {
            return this.body.substring(0, 25);
        },
        set: function (value) {
            console.log(value);
        }
    }
}

这样，当summary的值（因为表单输入/事件等原因）发生变动时，就会触发set函数（setter）。

之前未声明get/set的写法类似于只有get的简写。

控制台演示：修改vm.summary的值（如果没有定义setter还会报错）

和方法的区别

或者你想起来了，computed好像也可以用methods代替？

确实如此，但他们两者有区别：计算属性是有缓存的。

设断点对比演示：

<span>{{now()}}</span> <!--methods-->
<span>{{now}}</span> <!--computed-->

//methods: {
computed: {
    now: function () {
        return Date.now();
    }
}

F12控制台修改vm.greet的值：

computed：不会被击中，值不会变化
methods：会被击中，值会变化

但是注意：computed的缓存是依赖于vue data的。换言之，如果说vue data发生变化，由这些vue data计算生成的计算属性也要相应变化。

演示：修改body，summary会变动；修改title，summary不变动

data: {
    title: '源栈欢迎你',

如果你不希望有缓存，就只能使用方法。

watch

和computed也很类似。

但它需要指定被watch的vue data：

watch: {
    // newBody == this.body：更改后的值
    // oldBody：更改前的this.body
    body: function (newBody, oldBody) {
        this.summary = oldBody.substring(0, 25);
    }
}

如上述代码，当vue data中body发生更改时，就会触发body:后面的方法。

watch还可以进行更多的设置，详见API文档。

如何选择？

	computed	methods	watch
缓存	有	没有	没有
异步	不行	不行	行
触发	模板使用：数据	模板使用：方法	被监控数据发生变动
灵活度	最低	高	最高
推荐度	最高	其次	最低（依赖关系容易变得复杂）