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

1.计算属性

（a）关键词：cumputed

 {{ strRender }} 

new Vue({
    el:"#app",
    data:{
        str:"12345"
    },
    computed:{
        strRender(){
            this.str="54321"
        }
    }
})

（b）诞生原因

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

（c）小小技巧

1.依赖其他计算属性（计算属性函数相互间使用）；

2.vue实例间的依赖（数据的想通相变）；

  
原始字符串: {{ str }}
  
反转字符串: {{ renderStr }}

 

var vm = new Vue({
  el: '#app',
  data: {
    str: '丫头'
  },
  computed: {
    renderStr: function () {
      return this.str.split('').reverse().join('')
    }
  }
})

（d）比较methods

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

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

（e）计算属性的 “设置器”：默认只有getter

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

    
计数器: {{ counter }}
    点我

（b）使用场景

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

  分数：

  提示： {{infoMsg}} 

 

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

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

  分数：

  提示： {{infoMsg}} 

 

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

  分数：

  提示： {{infoMsg}} 

 

 

 

 

 

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

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