vue 计算属性computed和watch监听

在Vue视图显示中，有时候，总是需要一些数据处理然后再显示，这样就可以使用computed属性。

• computed

1. computed使用

//v-model 数据绑定
 <input type="text" v-model="testName">
//数据显示{{}}
 <div class="div_name">{{testName}}</div>

2.computed属性实现

    data:function(){
        return {
            name:"测试",
            test:"computed",
            lastName:"",
            firstName:"",
            index:0,
            list:[{
                name:"王 辉",
                age:20
            }]
        }
    },
    computed:{
        //常规的计算属性 相当于get方法
        commenName:function(){
            return ""
        },
        testName:{
            //重新写set 和get方法
            get:function(){
                console.log("index****"+this.index);
                return  this.lastName+this.firstName +this.index++;
            },
            set:function (val) {
                if (val.indexOf(' ')!=-1) {
                    var obj = val.split(" ");
                    if(obj.length>1){
                        this.lastName = obj[0];
                        this.firstName =obj[1];
                    }
                }
            }

        }

    }

注意点:computed计算属性，多次获取计算属性，会有缓存，用的还是第一次的结果。

• watch 监听属性中值的变化

1. data中普通属性的监听

    data:function(){
        return {
            test:"computed",
        }
    },
    watch:{
        test:function(newData,oldData){

        }
    }

2.需要深度监听的，比如：Array中某一项数据的变化,需要使用到deep,

   data:function(){
        return {
            list:[{
                name:"李 辉",
                age:20
            }]
        }
    },    
watch:{
        list:{
            handler:function(newData,oldData){
                    console.log(newData);
                    console.log("$$$$$$");
                    console.log(oldData);
                },
            immediate: true,//在初始化实例时，会触发 handler调用
            deep:true //当容器内部的元素发生更改时，会出发handler ，比如 list中第一个元素的name更改成 王二，会触发 handler调用
        },
    },

学习博客:

https://blog.csdn.net/Hanhanyoona/article/details/81531290

https://www.cnblogs.com/cq-0715/p/9795011.html

https://www.cnblogs.com/yesu/p/9546458.html