侦听属性 watch

侦听属性 watch

watch

1. 作用

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

      new Vue({
        el: '#app',
        data: {
          firstName: '',
          lastName: '',
          fullName: ''
        },
        watch: {
          //1. watch中可以设置方法，方法名就是data中的 key  
          firstName ( val ) {
            console.log( val ) //改变后的值
            this.fullName = val + this.lastName
          },
          lastName ( val ) {
            this.fullName = this.firstName + val
          }
        }
      })

3. 使用方式（ 重点 ）

• 方法

  watch: {
    fn () {}
  }

• 对象： （ 深度监听 ）

 watch: {
   fn: {
     handler(){},
     deep: true
   }
 }

  /*  
      watch 的深度监听
    */
    new Vue({
      el: '#app',
      data: {
        firstName: '',
        lastName: '',
        fullName: '',
        name: {
          xiaoming: {
            xiaoming: {
              xiaoming: 'xiaomign'
            }
          }
        }
      },
      watch: {
        //1. watch中可以设置方法，方法名就是data中的 key  
        firstName ( val ) {
          console.log( val ) //改变后的值
          this.fullName = val + this.lastName
        },
        lastName: {
          handler ( val ) { //处理程序
            this.fullName = this.firstName + val
          },
          deep: true
        }
      }
    })

计算属性

1. 使用方式
   • 里面存放方法

     computed: {
       fn () {
         return ''   //必须要有返回值
       }
     }
   

   • 里面存放对象

     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的使用： 事件程序程序 （ 用户交互 ）