computed

  1. computed 是基于响应性依赖来进行缓存的。只有依赖数据发生改变，才会重新进行计算，computed是计算属性的意思，watch是监听的意思。
  2. 不支持异步，当 computed 内有异步操作时无效，无法监听数据的变化的值。
  3. 如果函数所依赖的属性没有发生变化，从缓存中读取。
  4. 必须有return返回。
  5. 使用方法和data中的数据一样，但是类似一个执行方法。

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app" class="app">
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <input type="text" v-model="fullName">
</div>
    <script>
    var app = new Vue({
        el : ".app",
        data:{
            firstName : 'Alive',
            lastName : 'Seven',
        },
        // 计算属性
        computed : {
            // 定义一个fullName属性用于计算firstName+lastName，并且return出来
            fullName(){
                return this.firstName + this.lastName
            }
        }
    })
</script>

watch

  1. 只会监听数据的值是否发生改变，而不会去监听数据的地址是否发生改变，要深度监听需要配合deep：true属性使用
  2. 不支持缓存，数据变，直接会触发相应的操作
  3. watch可以没有return
  4. watch中的函数是不需要调用的
  5. watch支持异步
  6. 监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
  7. 监听数据必须是data中声明过或者父组件传递过来的props中的数据

总结

  1. computed 是计算属性，依赖其他属性计算值，并且 computed 的值有缓存，只有当计算值变化才会返回内容。 watch 监听到值的变化就会执行回调，在回调中可以进行一些逻辑操作。
  2. computed函数不能有异步；watch可以
  3. computed必须有return；watch可以没有
  4. watch监听的数据要在data中声明过，computed可以不用