computd watch methods和mixin

Posted 2021-12-04 zhaoyingzi

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