Vue中watch-computed-methods

Posted 2022-02-01 xiaohanga

Vue中watch-computed-methods

watch

1. 作用

• 用来监听data中定义的数据，当data中定义的数据发生了变化，那么watch中的key就会触发
• watch是一个对象
  watch:
• watch中可以设置多个类型的键值

1. 使用方式（ 重点 ）

• 方法

    watch: 
      fn () 
    

• 对象： （ 深度监听 ）

    watch: 
      fn: 
        handler(),
        deep: true
      
    

## 计算属性
1. 使用方式
    - 里面存放方法
    ```javascript
      computed: 
        fn () 
          return ''   //必须要有返回值
        
      

- 里面存放对象
?```javascript
  computed: 
    newName: 
      get () 
        return '' //get里面要有return
      ,
      set ( val )  //val就是修改后的值

      
    
  
?```
- 注意： 上面的get,set我们统一起了个名字叫做： 存储器，别人也叫getter/setter
- get set 这两者， 对象中有，类里面也有
- **get set 是计算属性的    这个理解是错的**

watch vs computed

1. watch是用来监听某一个数据的，当数据发生改变是，watch就会自动触发，然后我们可以进行一些任务
2. computed是为了暴露一个全局变量，这个全局变量是经由一定逻辑产生的
3. 什么时候选择 watch ？ 什么是选择 computed ? 什么时候选择 methods?

• 数据量较大，并且有异步操作我们选择 watch 应用场景： 上拉加载，下拉刷新
• computd的使用满足两个就可以了
  • 暴露一个类似全局变量的数据
  • 可以进行逻辑的处理
• methods的使用： 事件程序程序 （ 用户交互 ）