vue的 watch vs computed vs methods 区别

watch vs computed vs methods 区别

• watch 是对数据进行监听，更多完成的是异步数据请求
• methods 它是事件处理程序
• computed 它是对数据进行重计算

computed-计算属性

• 作用： 对data选项中的数据做计算
• 解决问题：
  1，对数据计算的逻辑放在v里面 不合适
  2， 让模板结构不清晰
  3，计算属性中的key直接在模板中当做全局变量用

//html 代码
<div id="app">
    <h3> 计算属性-方法 </h3>
    <p> {{ newMsg }} </p>
    <hr>
    <h3> 计算属性存储器写法 </h3>
    姓： <input type="text" v-model = "firstName"> <br>
    名： <input type="text" v-model = "lastName"> <br>
    全名： <input type="text" v-model = "fullName"> <br>
  </div>


//js代码
new Vue({
    el: '#app',
    data: {
      msg: 'hello world',
      firstName: '',
      lastName: ''
    },
    methods: {
      
    },
    computed: {
      // 普通写法：是一个方法
      newMsg () {
        return this.msg.split('').reverse().join('')
      },
      fullName: {
        get () {  //获取值
          return this.firstName + this.lastName
        },
        set ( val ) {   //赋值
          // val  就是fullName对应input的value    
          this.firstName = val.slice( 0, 1 )
          this.lastName = val.slice( 1 )

        }
      }
    }
  })

watch 侦听属性

• watch 是做什么的？
  1，watch是用来监听data中数据的变化，当数据改变式，我们可以做一些数据请求
  2，上拉加载、刷新

• watch特点
  watch中key的名字就是data选项中数据 - 名字对起来

浅监听 - 监听一层

<div id="app">
    <button @click = "addCount"> + </button>
    <p> count的值为：{{ count }} </p>
</div>


//js代码
new Vue({
    el: '#app',
    data: {
      count: 0,
    },
    watch: { 
      count () { // 浅监听 - 监听一层
        console.log('触发')
        }
    },
    methods: {
      addCount () {
        this.count ++
      }
    },
  })

深度监听 - 监听数据多层结构

<div id="app">
    <input type="text" v-model = "obj.name">
</div>



//js代码
new Vue({
    el: '#app',
    data: {
      obj: {
        name: 'aaa'
      }
    },
    watch: { 
      obj: {
        deep: true, // 深度监听 - 监听数据多层结构
        handler () {
          console.log('obj发生了改变')
        }
      }
    }
  })