vue（5）-----computd vs watch vs methods

computed

1. computed 计算属性

• 案例： 为什么vue中要使用计算属性？让一个字符反向
• 分析：

<p> {{ msg.split('').reverse().join('') }} </p> 

上面代码的写法，有些违背关注点分离，而且会让我们的DOM结构看起来不简洁。

• 从上面的案例得出两个结论：

  1. 我们的使用结果是要想data选项中定义的数据一样直接使用，那就是最好的。
  2. 我们还必须需要一定的逻辑支撑，一想到逻辑，那我们就想到了函数。
  3. 综上： vue这边提出来一个新的解决方案就是： 计算属性

• 在项目中， 使用时候使用计算属性呢?

  1. 有逻辑处理
  2. 像变量一个使用

  总结： 计算属性一定要有返回值

  computed vs methods

  • 计算属性是基于它们的依赖进行缓存的。
  • 计算属性只有在它的相关依赖发生改变时才会重新求值。

<div id="app">
    <h3> computed  </h3>
    <p> {{ msg.split('').reverse().join('') }} </p>
    <h3> 计算属性处理的 </h3>
    <p> {{ reverse_msg }} </p>
  </div>

 new Vue({
    data: {
      msg: ' my name is 王二狗'
    },
    computed: {
      //这里存放的是多个方法，这些方法往往都和data选项中的数据有关系
      reverse_msg () {
        return this.msg.split('').reverse().join('')
      }
    }
  }).$mount('#app') // 手动挂载app模板
  

watch

• watch 侦听属性

  1. 是用来监听 data 选项中的数据的，只要data中的数据发生改变，它就会自动触发
  2. watch是一个对象，它里面存储的是 { [key: string]: string | Function | Object | Array }
  3. 往往watch我们里面常存储的是方法
  4. watch中方法的名称就是 data 选项中数据的名称
  5. 深度监听

    watch: {
      num: {
        deep: true,
        handler () {
          //数据改变之后执行的事情
        }
      }
    }
  

   new Vue({
      el: '#app',
      data: {
        msg: ' hello ',
        num: 100
      },
      watch: {
        msg () { // 方 法
          console.log('msg这条数据发生了改变')
        },
        num: {
          deep: true,
          handler () {
            console.log( 'num 发生了改变' )
          }
        }
      }
  })
  

computd vs watch vs methods

项目中：
computed：
1. 有逻辑
2. 像变量一样使用
methods
事件处理程序
watch
异步操作（ 数据请求 ）