computd watch methods和mixin

computd vs watch vs methods

1. 项目中：

   1. computed计算属性：
      1. 有逻辑
      2. 像变量一样使用
      3. 一定要有return返回值

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

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

   2. methods
      • 事件处理程序
   3. 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('我也改变了') } } } }) 

2. computed vs methods

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

mixin

1. 1. 使用它的好处：
      1. 将 options 中的配置项可以单独抽离出来，单独管理，这样方便维护
         使用：
      2. 新建一个 对象 用来保存 options 中某一个配置项，比如： methods
      3. 接下来要将我们创建好的对象混入到我们的 ViewModel 中，我们的混入形式有两种
         • 局部混入 【 推荐 】
           只是在当前 vm 中才有
           new Vue({
           mixins: [ myMixin ]
           })
         • 全局混入
           在所有的vm中都会有
           Vue.mixin({
           methods: {
           aa () {}
           }
           })

转载于:https://www.cnblogs.com/zhaoyingzi/p/10920082.html