一、computed 与 methods 的区别

• computed 是属性调用，methods 是函数调用

• computed 带有缓存功能，而 methods 没有

下面我们来看例子：

<div id="app"> <div>{{ message }}</div> <div>{{ message.split('').reverse().join('') }}</div> <div>{{ reversedMessage }}</div> <div>{{ getReversedMessage() }}</div> <div>{{ fullname }}</div> </div> <script src="./vue.js"></script> <script> // 创建 Vue 实例，ViewModel const vm = new Vue({ el: '#app', // View data: { // Model 数据 message: 'Hello Vue.js', firstname: '小明', lastname: '吴' // fullname: '吴小明' }, methods: { getReversedMessage() { return this.message.split('').reverse().join('') } }, computed: { // 计算属性 // reversedMessage() { // getter // return this.message.split('').reverse().join('') // } reversedMessage: { get() { console.log('调用 getter 方法') return this.message.split('').reverse().join('') } // set() {} }, fullname() { return this.lastname + this.firstname } } }) </script>

我们可以发现： ①、computed 的方法我们以属性访问的形式来调用，{{ reversedMessage }}，{{ fullname }} ②、而 methods 里的方法我们必须加上（）来调用，否则会出现报错，{{ getReversedMessage() }}

二、computed 的缓存属性

计算属性是基于它们的响应式依赖进行缓存的：就是说计算属性的值会被缓存，只有当其依赖项发生改变后，才会重新计算新的值并继续进行缓存

计算属性 vs 方法(methods)

计算属性值可被缓存，如果依赖项未发生改变，每次直接使用计算属性的缓存值就行了，而方法的调用，每调用一次，都会重新执行方法主体的任务（逻辑运算）

三、侦听器（watch 与其 immediate 属性）

watch: { // 侦听属性 firstname(newVal, oldVal) { // console.log('firstname 变化', a, b, c) this.fullname = this.lastname + newVal } }

计算属性 vs 侦听属性：

通常，计算属性是可以由多个数据项生成一个计算值，而侦听属性可以由一个数据项的变化影响多个其它数据项。

计算属性可以被缓存，而侦听属性不能缓存。

计算属性中不能使用到异步任务，而侦听属性中可以使用异步任务。

watch: { obj: { handler(newName, oldName) { console.log('obj.a changed'); }, immediate: true } }

immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。