computd watch methods和mixin

computd vs watch vs methods

项目中：
computed计算属性：
有逻辑
像变量一样使用
一定要有return返回值

 <div id="app">
        <p> {{split_msg}} </p>
    </div> 

  new Vue({
    el:'#app',
    data:{
        msg:'xixihaha'
    },
    computed:{//这里存放的是多个方法，这些方法往往都和data选项中的数据有关系
        split_msg() {
            return this.msg.split('')
        }
    }
})

methods
事件处理程序

watch侦听属性：异步操作（ 数据请求 ）双向数据请求，用v-model指令
1. 是用来监听 data 选项中的数据的，只要data中的数据发生改变，它就会自动触发
2. watch是一个对象，它里面存储的是 { [key: string]: string | Function | Object | Array }
3.往往watch我们里面常存储的是方法
4. watch中方法的名称就是 data 选项中数据的名称
5深度监听

 <div id="app">
        <input type="text" v-model="msg">
        <input type="text" v-model="num">
    </div>

 new Vue({
        el:'#app',
        data:{
            msg:'hello',
            num:'haha'
        },
        watch:{
            msg(){
                console.log('改变啦')
            },
            num:{//深度监听
                deep:true,
             handler(){
                    console.log('我也改变了')
                }
            }
        }
    })

computed vs methods

1. 计算属性是基于它们的依赖进行缓存的。
   2.计算属性只有在它的相关依赖发生改变时才会重新求值
   mixin
   使用它的好处
   1.将 options 中的配置项可以单独抽离出来，单独管理，这样方便维护
   使用：
   2.新建一个 对象 用来保存 options 中某一个配置项，比如： methods
   3.接下来要将我们创建好的对象混入到我们的 ViewModel 中，我们的混入形式有两种
   局部混入 【 推荐 】
   只是在当前 vm 中才有
   new Vue({
   mixins: [ myMixin ]
   })

全局混入
在所有的vm中都会有
Vue.mixin({
methods: {
aa () {}
}
})