Vue基础篇-计算&监听属性

1.计算属性

（a）基本用法

关键词：cumputed

说一下：在模板中放入太多的逻辑会让模板过重且难以维护，为了使得计算清晰明了，计算属性就诞生了

小技巧：1.依赖其他计算属性（计算属性函数相互间使用）；2.vue实例间的依赖（数据的想通相变）

<div id="app">
  <p>原始字符串: {{ str }}</p>
  <p>反转字符串: {{ renderStr }}</p>
</div>
 
<script>
var vm = new Vue({
  el: '#app',
  data: {
    str: '丫头'
  },
  computed: {
    renderStr: function () {
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

（b）比较methods定义的函数

1.效果相同，都是定义函数的地方；

2.computed依赖实例的缓存变则变，methods只要重渲染函数总会重新调用；

3.computed性能会好些，自己管自己不用担心影响到其他；

（c）计算属性的setter（设置器）

默认为getter，如需setter需要进行配置（其实用的上setter的机会并不多，也不提倡用）

var vm = new Vue({
  el: '#app',
  data: {
    name: '丫头'
  },
  computed: {
    site: {
      get: function () {
        return this.name
      },
      set: function (newValue) {
        this.name = newValue
      }
    }
  }
})

// 调用 setter， vm.name会被对应更新
vm.site = '新字段';

2.监听属性

（a）基本用法

关键字：watch

说一下：此属性用来响应数据的变化，适当场景用的还是很频繁的

<div id = "app">
    <p>计数器: {{ counter }}</p>
    <button @click = "num++">点我</button>
</div>

<script>
var vm = new Vue({
    el: '#app',
    data: {
        num: 1
    }
});
vm.$watch('num', function(nval, oval) {
    alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>

（b）使用场景

1.基础监听：60分以下不及格；60分-85分良好；85分以上优秀

<div id="app">
  分数：<input type="number" v-model="achievement"><br>
  提示：<span> {{infoMsg}} </span>
</div>
 
<script>
new Vue({
    el:"#app",
    data:{
        achievement:"",
        infoMsg:""
    },
    watch:{
        achievement:function(newVal,oldVal){
           if(newVal<60){
               this.infoMsg="不及格"
           }else if(newVal>60 && newVal<85){
               this.infoMsg="良好"
           }else{
               this.infoMsg="优秀"
           }
        }
    }
})
</script>

2.进阶监听：后台传值，且值藏在内部（非data的直接子数据）

注意：1.不可用箭头函数，因其this指向不是vue实例；2.新添属性deep，意为深度监听

<div id="app">
  分数：<input type="number" v-model="info.achievement"><br>
  提示：<span> {{infoMsg}} </span>
</div>
 
<script>
new Vue({
    el:"#app",
    data:{
        info:{
            achievement:"",
        }
        infoMsg:""
    },
    watch:{
        info:{
            handler:function(newVal,oldVal){
               if(newVal.achievement<60){
                   this.infoMsg="不及格"
               }else if(newVal.achievement>60 && newVal.achievement<85){
                   this.infoMsg="良好"
               }else{
                   this.infoMsg="优秀"
               }
            },
            deep:true
        }
     }
})
</script>

3.高级监听：后台传值，且内部数值对有好多

<div id="app">
  分数：<input type="number" v-model="info.achievement"><br>
  提示：<span> {{infoMsg}} </span>
</div>
 
<script>
new Vue({
    el:"#app",
    data:{
        info:{
            achievement:"",
            age:"",
            name:"",
            city:""
        }
        infoMsg:""
    },
    computed:{
        getAchievement:function(){
            return this.info.achievement
        }
    },
    watch:{
        getAchievement:{
            handler:function(newVal,oldVal){
               if(newVal<60){
                   this.infoMsg="不及格"
               }else if(newVal>60 && newVal<85){
                   this.infoMsg="良好"
               }else{
                   this.infoMsg="优秀"
               }
            },
            deep:true
        }
    }
})
</script>

前端工作不好做，具有耐心不用说。

加油学习别放弃，勤奋就是可补拙。