执着于理想,纯粹于当下

目录
计算属性
/  

计算属性

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中的数据,当数据变化时,触发其他操作,函数有两个参数:immediatedeep

4、computed 和 methods 的对比

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