vue 的computed、方法、watch 、filter

网上关于computed的介绍很多，我这个只是作为自己学习记录使用

1.在vue的官网里有这么一段描述:

         计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算，注意 如果某个依赖（比如非响应式属性 new Date()）在实例范畴之外，计算属性是不会被更新的

computed:{
    fullname:function(){
        return this.firstname+' '+this.lastname
    }
}

其中 fullname为计算属性自己定义的变量，当其所依赖的firstname或者lastname发生变化时 fullname才会被重新计算。相对于方法来说在性能上有更大的优势,每当页面重新渲染 ，页面中的方法就会执行，计算属性确不会 。

computed常用于需要在页面中写较复杂逻辑的计算，这样html的可维护性更高。

当有多个变量的变化会同时影响一个变量的变化，比如（ 商品总数、商品单价 的变化 会影响 总金额） 此时用computed监测是合适的。

当一个变量的变化会影响多个变量的变化，此时用watch监测是合适的。代码看起来更整洁。

computed也可以写成set 、get的形式,但一般很少用   this.fullname=baodi.com#list  可以触发set函数。

computed:{
    fullname:{
        get:function(){
            return this.firstname+' '+this.lastname;
        },
        set:function(value){
            let name=value.split('#')
            this.firstname=name[0]
            this.lastname=name[name.length-1]
        }
    }
}

2. filter 常用来做页面的简单逻辑处理，不需要依赖data实例化里的值 

<!--  这里是html代码 -->
<!--  在花括号中-->
<div>{{message | filterA |filterB }}</div>
<!--  在v-bind中->
<div v-bind:id="rawId | filterA"></div>


//这里是script代码
filters:{
    filterA:function(message){
        return message.split('#')
    },
    filterB:function(filterA){
        return filterA[0]
    }
}

3.watch 只能监测data实例化里的数据，如果要监测某个对象里的某一个属性，需要进行深度监测。

  watch监测的变量函数里可以执行异步操作，这是计算属性无法做到的

watch :{
   message:function(newval,oldval){
        //可以执行异步操作
        this.axios.get('url').then((res)=>{})
  }
}
------------------------------------------
watch:{
    message:{
        handler:function(){

       },
        immediate:true   // 页面初始化时 不会执行监听函数，只有值发生改变才会执行 设置                                                            
                            immediate:true 可以解决这个问题
        deep:true    //监测 对象里的某一个属性 要设置deep :true
    }
}