vue的watch和computed

methods和computed的区别

假设有这样一个场景，需要拼接data里的属性，如果直接{{first+second}}，不利于修改；

我们会想到method获取，但是直接在{{}} 里放函数表达式，会消耗多余性能，不建议使用，举例说明：

假设函数为getTegeter，如果用函数取值，其他的data属性修改时会重新render Dom，getTegeter函数会再执行一次，这不是我们希望看到的，

此时，computed的好处就体现了（具体代码看第二段）：

computed定义的函数，只有与他相关的值发生修改时才会再次触发，减少了不必要的执行。

<div id="app">
{{getTegether()}}  
<!-- {{first + second}} -->
<div @click="test=!test">{{test}}</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
  el:'#app',
  data:{
    first:'我',
    second:'你',
    test:true
  },
  methods:{
    getTegether(){
      console.log(1)
      return this.first + this.second
    }
  }
})

使用computed的写法：

<div id="app">
{{getTegether}} 
<div @click="test=!test">{{test}}</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
  el:'#app',
  data:{
    first:'我',
    second:'你',
    test:true
  },
  computed:{
    getTegether(){
      console.log(1)
      return this.first + this.second
    }
  }
})
</script>

computed的原理：

1. 他是基于Object.defineProperty处理的，里面有get和set两个方法，默认触发get方法，有修改操作时会触发set
2. computed会有缓存，如果依赖的数据不发生变化，不会重新执行方法

let vm = new Vue({
  el:'#app',
  data:{
    first:'我',
    second:'你',
    test:true
  },
  computed:{
    getTegether:{
      get(){
        return this.first + this.second
      },
      set(val){
        this.test = val;
      }
    }
  }
})

watch和computed区别

先上一段watch的用法

watch:{
  first:{
    handler(newVal,oldVal){
      setTimeout(()=>{
        this.test = newVal
      },1000)
    },
    imediate:true,//侦听开始时立即调用
    deep:true//只要属性发生变化就触发此函数，不论其被嵌套多深（默认监听到第一层）
  }
}

watch和computed在处理同步方法时，效果差不多，

处理简单的事件，异步事件（比如数据变化就发送请求接口）时使用watch；

只是计算一个值的结果，就用computed

animate动画

<div id="app">
<input type="text" v-model="filter">
<transition-group
  enter-active-class="bounceIn"
  leave-active-class="bounceOut">
  <div class="box animated" v-if="isShow" v-for="(d) in searchData" :key="d.title">
    {{d.title}}
  </div>
</transition-group>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="../node_modules/velocity-animate/velocity.js"></script>
<script>
let vm = new Vue({
  el:'#app',
  data:{
    isShow:true,
    filter:'',
    dataList:[
      {title:'标题1'},{title:'标题2'},{title:'标题3'}
    ]
  },
  computed:{
    searchData(){
      return this.dataList.filter((item)=>{
        return item.title.includes(this.filter)
      })
    }
  },
})
</script>
<style>
  .box{
    width:100px;height:100px;
    background:#f00;
    color:#fff;
  }
  .bounceIn{
    color:#000;
  }
  .bounceOut{
    color:#ff0;
  }
</style>