Vue计算属性、侦听器、过滤器的使用，以及生命周期介绍

Vue计算属性

• 为何需要计算属性？

  • 表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁

• 计算属性的用法

        computed: {
  
            reversedMessage: function(){
  
                return this.msg.split('').reverse().join('')
  
            }
  
        }
  

• 计算属性与方法的区别

  • 计算属性是基于他们的依赖进行缓存的

  • 方法不存在缓存

侦听器

• 应用场景：数据变化时执行异步或开销较大的操作

            watch:{
  
                firstName: function(val){
  
                    this.fullName = val + ' ' + this.lastName;
  
                },
  
                lastName: function(val){
  
                    this.fullName = this.firstName + ' ' + val;
  
                }
  
            }
  

过滤器

• 过滤器作用：格式化数据，比如格式化字符串为首字母大写

• 自定义过滤器：

    Vue.filter('过滤器名称',function(value){
  
        //过滤器业务逻辑
  
    })
  

例如：

    Vue.filter('upper',function(val){

        return val.charAt(0).toUpperCase() + val.slice(1); 

    })

• 过滤器使用：

  • <div>{{msg | upper}}</div>

  • <div>{{msg | upper | lower}}</div>

  • <div v-bind:id="id | formatId"></div>

• 局部过滤器：

    filters:{
  
        capitalize: function(){}
  
    }
  

• 带参数的过滤器：

    Vue.filter('format',function(value,arg1){
  
    //value就是过滤器传递的参数
  
    })
  

• 使用

  <div>{{data | format('yyyy-mm-dd')}}</div>

生命周期

• 主要阶段

  • 挂载（初始化相关属性）

    • beforeCreate

    • created

    • beforeMount

    • mounted:el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子

  • 更新（元素或组件的变更）

    • beforeUpdate

    • updated

  • 销毁（消除相关属性）

    • beforeDestroy

    • destroyed