Vue2.0学习笔记4：计算属性、监视属性

目录

一、计算属性

1.什么是计算属性

2.计算属性的优点

 3.计算属性使用示例

4.计算属性的简写

二、监视属性

1.什么是监视属性

2.实现监视的两种方法

3.深度监视

3.监视属性的简写

三、计算属性与监视属性对比

1.主要区别

---

一、计算属性

1.什么是计算属性

“计算属性”中的“属性”指的是data配置项中的属性。而将这些属性进行“加工”，从而得到新的属性，这就是“计算属性”。“计算属性”是一个全新的配置项，它的名字是computed。

计算属性的定义：要用的属性不存在，要通过已有的属性计算得来

计算属性的原理：底层借助了Obhect.defineproperty方法提供的getter和setter

在计算属性的值被读取时，它里面的get方法就会被调用，get方法的返回值就会成为计算属性的值，计算属性的值会随着它所依赖的数据的变化而变化。并且有着缓存机制，当它依赖的数据并未变化时，并不会重新进行计算属性，而是读取缓存中之前计算出来的值。

get函数：

用处：显示计算属性的值

执行时间：

（1）初次读取fullName时
（2）所依赖的数据发生变化

set函数：

用处：可以用来通过修改data中属性的值（需要通过自己写代码来修改），来修改计算属性的值。一般不使用，因为一般计算属性只用来读取、展示属性，而不用来进行修改。

计算属性示例：

 new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三'
        },
        computed:{        //计算属性
            fullName:{
                //get作用：当读取fullName时，get就会被调用，且返回值就作为fullName的值
                //get什么时候调用？1.初次读取fullName时  2.所依赖的数据发生变化时
                get(){
                    return this.firstName +"-"+ this.lastName   //此处的this是vm
                },
                //set什么时候调用？当fullName被修改时
                set(value){
                    const arr = value.split('-')
                    this.firstName = arr[0]
                    this.lastName = arr[1]
                }
            }
        }
    })

2.计算属性的优点

与methods方法实现相比，内部有缓存机制（复用），效率更高，调试方便

下附mathods实现方法（使得姓名一栏的值随着输入框的值变化而变化）：

<div id="root" align="center">
    姓：<input type="text" v-model="firstName"><br><br>
    名：<input type="text" v-model="lastName"><br><br>
    姓名：<span>{{fullName()}}</span>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false

    const vm = new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三'
        },
        methods:{
            fullName(){
                return this.firstName + "-" + this.lastName
            }
        }
    })

</script>

 3.计算属性使用示例

所实现的功能：两个文本框中依次输入值，它们的值会实时地出现在下方的文本中。

其中的computed是一个Vue的配置项，fullName是一个对象。

其中的get方法在fullName被调用时自动执行，它的返回值会作为fullName的值

其中的set方法通过修改this.firstName等的值，从而修改了计算属性的返回值，也就是它自己

<div id="root" align="center">
    姓：<input type="text" v-model="firstName"><br><br>
    名：<input type="text" v-model="lastName"><br><br>
    姓名：<span>{{fullName}}</span>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三'
        },
        computed:{
            fullName:{
                //get作用：当读取fullName时，get就会被调用，且返回值就作为fullName的值
                //get什么时候调用？1.初次读取fullName时  2.所依赖的数据发生变化时
                get(){
                    return this.firstName +"-"+ this.lastName   //此处的this是vm
                },
                //set什么时候调用？当fullName被修改时
                set(value){
                    const arr = value.split('-')    //测试：在控制台改变fullName的值时，firstName与lastName的值也会随之变化
                    this.firstName = arr[0]
                    this.lastName = arr[1]
                }
            }
        }
    })

</script>

4.计算属性的简写

适用情况：当计算属性只需要用getter方法（也就是不考虑修改）时，可以进行简写。

其中的function函数可以当作getter函数来使用

示例如下：

<div id="root" align="center">
    姓：<input type="text" v-model="firstName"><br><br>
    名：<input type="text" v-model="lastName"><br><br>
    姓名：<span>{{fullName}}</span>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三'
        },
        computed:{
            // fullName:{
            //     get(){
            //         return this.firstName +"-"+ this.lastName
            //     }
            // }
            //当计算属性只需要用getter方法（也就是不考虑修改）时，可以进行简写，其中的function函数可以当getter函数来使用。形式如下
            fullName:function(){
                return this.firstName +"-"+ this.lastName
            }
        }
    })

</script>

---

二、监视属性

1.什么是监视属性

在某些情况下，需要监视属性发生的变化时，可以使用监视属性，产生动作。监视属性也是一个配置项，它的名字是watch。

监视属性的作用：当监视属性变化时，回调函数(如handler)自动调用，进行相关操作

监视属性的前提：监视的属性必须存在，才能进行监视

监视属性的配置：它可以设置监视属性的一些选项

        handler：当被监视的属性发生变化时，handler方法将被执行。它有两个自带的参数newValue（变化之后的新值）和oldValue（变化之前的旧值）

        immediate：（true/false）当它的值为true时，当实例初始化时将调用一次handler

        deep:（true/false）当它的值为true时，可以监视多级结构中某个属性的变化（深度监视）

监视属性示例：

        const vm = new Vue({
        el:'#root',
        data:{
            isHot:'true'
        },
        computed:{
            info(){
                return this.isHot? '炎热':'凉爽'
            }
        },
        methods:{
            changeWeather(){
                this.isHot = !this.isHot
            }
        },
        watch:{        //监视属性
            isHot:{
                immediate:true,     //true:初始化时让handler调用一次
                //handler什么时候调用？当isHot发生改变时
                handler(newValue,oldValue){
                    console.log(newValue,oldValue)
                }
            }
        }
    })

2.实现监视的两种方法

下面的示例还是使用上面的：

1.new Vue时传入配置--适合在创建Vue实例时已经知道监视的对象的情况下：

 watch:{
            isHot:{
                immediate:true,     //true:初始化时让handler调用一次
                //handler什么时候调用？当isHot发生改变时
                handler(newValue,oldValue){
                    console.log(newValue,oldValue)
                }
            }
        }

2.通过vm.$watch监视--适合Vue实例创建时监视对象未知，之后才确定监视对象时使用

    //实现监视的另一种方法
    vm.$watch('isHot',{
        immediate:true,     //true:初始化时让handler调用一次
        //handler什么时候调用？当isHot发生改变时
        handler(newValue,oldValue){

        }
    })

3.深度监视

Vue中的watch默认不检测对象内部值的改变，它默认只能检测到一层的改变。通过配置deep:true可以检测对象内部值的改变，也就是采用深度监视

在下面的情况下，当配置项 deep为false时，监视属性只能检测到对象numbers的变化，而a的变化无法检测到。只有当deep为true时，当numbers对象中的a或b属性发生变化时，监视属性可以检测到，这就是深度监视

    const vm = new Vue({
        el:'#root',
        data:{
            isHot:'true',
            numbers:{
                a:1,
                b:1
            }
        },
        watch:{
            //监视多级结构中某个属性的变化(深度监视)
            numbers:{
                deep:true,
                handler(){
                    console.log('a被改变了')
                }
    }
        }
    })

3.监视属性的简写

使用情况：当监视属性中只需要使用handler配置项，而无需配置其他配置项时，可以使用它的简写形式

第一种情况是new Vue时传入配置，第二种写法是通过vm.$watch监视，都有相应的简写，示例如下：

<script type="text/javascript">
    Vue.config.productionTip = false

    const vm = new Vue({
        el:'#root',
        data:{
            isHot:'true'
        },
        computed:{
            info(){
                return this.isHot? '炎热':'凉爽'
            }
        },
        methods:{
            changeWeather(){
                this.isHot = !this.isHot
            }
        },
        watch:{
            //正常写法1
            // isHot:{
            //     //handler什么时候调用？当isHot发生改变时
            //     handler(newValue,oldValue){
            //         console.log(newValue,oldValue)
            //     }
            // }
            //简写1
            isHot(newValue,oldValue){
                //handler什么时候调用？当isHot发生改变时
                console.log(newValue,oldValue)
            }
        }
    })

    //正常写法2
    // vm.$watch('isHot',{
    //         handler(newValue,oldValue){
    //             console.log(newValue,oldValue)
    //         }
    // })
    //简写2    注意不能写箭头函数
    vm.$watch('isHot',function (newValue,oldValue){
        console.log(newValue,oldValue)
    })


</script>

---

三、计算属性与监视属性对比

1.主要区别

        1.computed可以完成的功能，watch都可以完成

        2.watch可以完成的功能，computed不一定能完成。例如：watch可以进行异步操作

但是computed的使用较watch简单，所以当两个都可以使用时，建议使用computed

其他注意事项：

1.所被Vue所管理的函数，最好写成普通函数，这样this的指向才是 vm 或 组件实例对象
2.所有不被Vue所管理的函数（定时器的回调函数，ajax的回调函数等），最好写成箭头函数，这样this的指向才是vm或者组件实例对象