Vue中的计算属性和侦听属性

computd 计算属性

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

• 分析：<p> {{ msg.split('').reverse().join('') }} </p>
  上面代码的写法，有些违背关注点分离，而且会让我们的DOM结构看起来不简洁

• 解决方案：
  从上面的案例得出两个结论：
  1. 我们的使用结果是要想data选项中定义的数据一样直接使用，那就是最好的
  2. 我们还必须需要一定的逻辑支撑，一想到逻辑，那我们就想到了函数

• 综上： vue这边提出来一个新的解决方案就是： 计算属性

• 在项目中， 使用时候使用计算属性呢?
  只要满足一下两个条件：
  1. 有逻辑处理
  2. 像变量一个使用

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

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

• computed vs methods

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

• 项目中：

  computed： 1. 有逻辑 2. 像变量一样使用

  methods: 事件处理程序

  watch: 异步操作（ 数据请求 ）

watch 侦听属性

1. 是用来监听 data 选项中的数据的，只要data中的数据发生改变，它就会自动触发

2. watch是一个对象，它里面存储的是 { [key: string]: string | Function | Object | Array }

3. 往往watch我们里面常存储的是方法

4. watch中方法的名称就是 data 选项中数据的名称

5. 深度监听

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

mixin 混入

使用它的好处：

1. 将 options 中的配置项可以单独抽离出来，单独管理，这样方便维护

• 使用：
  1. 新建一个对象用来保存 options 中某一个配置项，比如： methods
  2. 接下来要将我们创建好的对象混入到我们的 ViewModel 中，我们的混入形式有两种
     • 局部混入 【 推荐 】
       只是在当前 vm 中才有

         new Vue({
         mixins: [ myMixin ]
         })
     

     • 全局混入
       在所有的vm中都会有

         Vue.mixin({
         methods: {
             aa () {}
         }
         })