JaneChelle | Blog

1、计算属性getter和setter

每个计算属性都包含一个getter和一个setter

• 一般,我们只是使用getter来读取。
• 在某些情况下,你也可以提供一个setter方法 (不常用)。
• 在需要写setter的时候,代码如下:

	computed: {
           fullName: {
                set: function (newValue){
                    console.log(newValue);
                    const names = newValue.split(' ');
                    this.firstName = names[0];
                    this.lastName = names[1];
                },
                get: function (){
                    return this.firstName + ' ' + this.lastName;
                }
            }
        }

计算属性一般是没有set方法的，他是只读属性的，即

	computed: {
            fullName: {
                get: function (){
                    return this.firstName + ' ' + this.lastName;
                }
            }
        },

再化简，即，

       computed: {
            fullName: function (){
                return this.firstName + ' ' + this.lastName;
            }
        }

用这个计算属性的时候，不需要加括号

<div id="app">
{{fullName}}
</div>

2、计算属性

• 支持缓存，只有依赖数据发生改变，才会重新进行计算
• 不支持异步，当computed内有异步操作时无效，无法监听数据的变化
• computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
• 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
• 如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

3、侦听属性watch：

• 不支持缓存，数据变，直接会触发相应的操作；
• watch支持异步；
• 监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
• 当一个属性发生变化时，需要执行对应的操作；一对多；
• 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数：immediate、deep

4、computed和methods的对比

• computed是响应式的，methods并非响应式；
• 调用方式不一样，comput定义的成员像属性一样访问，methods定义的成员必须以函数形式调用；
• computed是带缓存的，只有其引用的响应式属性发生改变时才会重新计算，而 methods里的函数在每次调用时都要执行；
• computed中的成员可以只定义一个函数作为只读属性，也可以定义 get/set变成可读写属性，这点是 methods中的成员做不到的;