1.computed

1.1 定义

是一个计算属性,类似于过滤器,对绑定到view的数据进行处理

1.2 get用法

  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }

1.3 get和set用法

data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
  fullName：{
   get(){//回调函数 当需要读取当前属性值是执行，根据相关数据计算并返回当前属性的值
      return this.firstName + ' ' + this.lastName
    },
   set(val){//监视当前属性值的变化，当属性值发生变化时执行，更新相关的属性数据
       //val就是fullName的最新属性值
       console.log(val)
        const names = val.split(' ');
        console.log(names)
        this.firstName = names[0];
        this.lastName = names[1];
   }
   }
  }

computed的缓存功能

首先，我们要明白缓存究竟有什么用？
相比大家都知道HTTP缓存，其核心作用就是对一些服务端未更新的资源进行复用，避免一些无谓的请求，优化了用户的体验

对于computed也是一样的：

在Vue实例化的时候，computed定义computedTest方法会做一次计算，返回一个值

在随后的代码编写中，只要computedTest方法依赖的message数据不发生改变，computedTest方法是不会重新计算的

2. watch

2.1 定义

watch是一个观察的动作

2.2 示例

  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
     firstName: function (val) {
     this.fullName = val + ' ' + this.lastName
  },
  lastName: function (val) {
     this.fullName = this.firstName + ' ' + val
   }
   }

上面是监听firstName和lastName的变化，但是仅限简单数据类型

2.2 监听简单数据类型

data(){
      return{
        'first':2
      }
    },
    watch:{
      first(){
        console.log(this.first)
      }
    },

2.3 监听复杂数据类型

1.监听复杂数据类型需用深度监听

data(){
      return{
        'first':{
          second:0
        }
      }
    },
    watch:{
      secondChange:{
        handler(oldVal,newVal){
          console.log(oldVal)
          console.log(newVal)
        },
        deep:true
      }
    },

2.console.log打印的结果,发现oldVal和newVal值是一样的,所以深度监听虽然可以监听到对象的变化,但是无法监听到具体对象里面那个属性的变化

3.oldVal和newVal值一样的原因是它们索引同一个对象/数组。Vue 不会保留修改之前值的副本
vm.$watch的深度监听

4.深度监听对应的函数名必须为handler,否则无效果,因为watcher里面对应的是对handler的调用

2.4 监听对象单个属性

方法一：可以直接对用对象.属性的方法拿到属性

data(){
          return{
            'first':{
              second:0
            }
          }
        },
        watch:{
          first.second:function(newVal,oldVal){
            console.log(newVal,oldVal);
          }
        },
    

方法二：watch如果想要监听对象的单个属性的变化,必须用computed作为中间件转化,因为computed可以取到对应的属性值

data(){
      return{
        'first':{
          second:0
        }
      }
    },
    computed:{
      secondChange(){
        return this.first.second
      }
    },
    watch:{
      secondChange(){
        console.log('second属性值变化了')
      }
    },

关键的watcher.js

• get 收集依赖
• udpate 更新dirty为true，从而可以重新evaluate
• evaluate 重新获得computed属性的值
• depend 通知dep收集依赖
• addDep watcher订阅依赖

关键的dep.js

• addSub：添加订阅
• depend： 添加依赖
• notify：通知更新

3、 computed和watch的区别

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

3.1 computed特性

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

3.2 watch特性

1.是观察的动作，
2.应用：监听props，$emit或本组件的值执行异步操作
3.无缓存性，页面重新渲染时值不变化也会执行

3 props传值

3.1 常见错误1

传入的值想作为局部变量来使用,直接使用会

props:['listShop'],
    data(){
      return{}
    },
    created(){
      this.listShop=30
}

报错

这个错误是说的避免直接修改父组件传入的值,因为会改变父组件的值,贴上官网介绍

3.2 解决方案1

简单数据类型解决方案:
所以可以在data中重新定义一个变量,改变指向,但是也只是针对简单数据类型,因为复杂数据类型栈存贮的是指针,

props:['listShop'],
    data(){
      return{
        listShopChild:this.listShop
      }
    },
    created(){
      this.listShopChild=30
    }
    

这样就可以愉快的更改传入的简单数据类型的数据啦!不会有任何报错,也不会影响父组件!

4、计算属性vs方法

1. 调用方式不同。computed直接以对象属性方式调用，不需要加括号，而methods必须要函数执行才可以得到结果。
2. 绑定方式不同。methods与compute纯get方式都是单向绑定，不可以更改输入框中的值。compute的get与set方式是真正的双向绑定。
3. 是否存在缓存。methods没有缓存，调用相同的值计算还是会重新计算。competed有缓存，在值不变的情况下不会再次计算，而是直接使用缓存中的值。

在官方文档中，强调了computed区别于method最重要的两点

1. computed是属性访问，而methods是函数调用
2. computed带有缓存功能，而methods不是

Vue中，copmuted和methods写法上有些相似，但是还是有一些不同点。

1.计算属性是有一个返回值的，且必须有，返回值是一个差值表达式，而函数是不需要的，有没有返回值或者返回值是什么类型没有限制。（返回值方面）

2.用法上，在某些情况下是可以用方法代替计算属性的，比如某个不需要监听的值，而当值会变化并且视图需要随着值得变化去更新的话就不能用方法。（视图更新方面）

3.在写上也有些不同方法必须后面带（）并且可以传参，而计算属性是不用调用的，直接用且不能传参。（写法方面）

4.计算属性是有缓存的。（性能方面）

5、计算属性 vs 侦听属性

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。

计算属性对比侦听属性（watch）来说，前者更像是一个方法，后者更像是一个命令。性能方面计算属性会更好一点，例如：

conputed看起来更加好一点，但是，watch就毫无用处了吗，官方给出了解释

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

计算属性的用法

目前版本的Vue中是不支持对象的双向绑定的，举个例子：

上述代码中直接引用发生变化是不会更新视图的，而computed和watch是可以的，具体原因大家可以去了解一下深拷贝和浅拷贝，值传递和引用传递。这个例子告诉我们对对象的监听是有两种方法的，并且computed的性能会更好一点。

当然，Vue3.0事已经解决了这个问题，可以不做处理了