【前端】vue监视属性和计算属性对比

首先分开讲解各个属性的作用。
1.计算属性
作用：用来计算出来一个值，这个值调用的时候不需要加括号，会根据依赖进行缓存，依赖不变，computed的值不会重新计算。

    const vm = new Vue({
        el:'#root',
        data:{
            lastName:'张',
            firstName:'三',
        },
        computed:{
            fullName:{
                //get作用，读取fullName时get调用且返回值是fullName的值
                get(){
                    return this.lastName.slice(0,3)+'-'+this.firstName.slice(0,3);
                },
                //当fullName被修改时，会调用set
                set(value){
                    const arr = value.split('-');
                    this.lastName = arr[0];
                    this.firstName = arr[1];
                }
            }
        }
    })

其中computed的属性就是计算属性，其中get读取方法尽在初次读取的时候调用以及所依赖的数据发生变化的时候调用。set设置方法是当数据发生变化时就会直接调用去重新计算属性值。

2.监听属性
作用：和js中的事件监听类似，当vue中的属性值发生变化时执行。

const vm = new Vue({
        el:'#root',
        data:{
            ishot:true,
            numbers:{
                a:1,
                b:1
            }
        },
        methods:{
            change(){
                //this.ishot = (this.ishot==true)?false:true
                this.ishot = !this.ishot
            },
        },
        computed:{
            info(){
                return this.ishot?'炎热':'凉爽'
            }
        },
        watch:{
            ishot:{
                immediate:true,   //初始化时让handler调用一下
                //handler什么时候调用？当isHot发生改变时。
                handler(newValue,oldValue){
                    console.log("ishot被改变了：",newValue,'->',oldValue)
                }
            },
            //监视多级结构中某个属性的变化
            'numbers.a':{
                immediate:true,   //初始化时让handler调用一下
                //handler什么时候调用？当isHot发生改变时。
                handler(newValue,oldValue){
                    console.log("a被改变了：",newValue,'->',oldValue)
                }
            },
            //监视多级结构中所有属性的变化
            numbers:{
                deep:true,  //开启深度监视
                handler(){
                    console.log('numbers改变了');
                }
            }
        }
    })

上述代码中watch属性就是计算属性，它包含两个属性值，其中immediate属性记录的是，在初始化 的时候是否需要计算一次监视属性；还有一个deep属性值代表的是当所要监视的属性值是对象是，是否要进行深度监视，即当对象内部属性值发生变化时是否调用监视函数。

案例：列表过滤
问题描述搜索框，对列表中的数据进行模糊筛选。

在这个问题里面，列表会根据input框中的内容对列表中的名字内容进行筛选。
因为要显示的内容跟data中的列表不一样，所以一定是需要重新建一个参数的，因此就需要初始化。例如监听属性中immediate属性。

html：
    <div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <ul>
            <!-- 动态绑定id标识 -->
            <li v-for="(person,index) in filteredPersons" :key="person.id">
                {{person.name}}-{{person.age}}-{{person.sex}}
            </li>
        </ul>
    </div>

监视属性写法：js：
    new Vue({
        el:'#root',
        data:{
            keyWord:'',
            persons:[
                {id:'001',name:'马冬梅',age:19,sex:'女'},
                {id:'002',name:'周冬雨',age:20,sex:'女'},
                {id:'003',name:'周杰伦',age:21,sex:'男'},
                {id:'004',name:'温兆伦',age:22,sex:'男'}
            ],
            filteredPersons:[]
        },
        watch:{
            //这里接收输出的值可以有两个，分别是新值和旧值；也可以只有一个新值
            keyWord:{
                immediate:true,
                handler(newValue){
                    this.filteredPersons = this.persons.filter((p)=>{
                        return p.name.indexOf(newValue)>=0;
                    })
                }
            }
        }
    })

计算属性写法：js：
    new Vue({
        el:'#root',
        data:{
            keyWord:'',
            persons:[
                {id:'001',name:'马冬梅',age:19,sex:'女'},
                {id:'002',name:'周冬雨',age:20,sex:'女'},
                {id:'003',name:'周杰伦',age:21,sex:'男'},
                {id:'004',name:'温兆伦',age:22,sex:'男'}
            ]
        },   
        computed:{
            filteredPersons:{
                get(){
                    var filteredPersons = [];
                    for(var i in this.persons){
                        if(this.persons[i].name.indexOf(this.keyWord)>=0){
                            filteredPersons.push(this.persons[i]);
                        }
                    }            
                    return filteredPersons;         
                },
                set(value){
                    this.keyWord = value;
                }
            }
        }
    })