vue第四章方法的使用和计算属性及监视

一、简介

本文介绍了vue计算属性的使用和vue实例的方法示例，分享给大家，具体如下：

二、方法和计算属性代码

<div id="root">
    姓：<input type="text" v-model="firstName"></input>
    名：<input type="text" v-model="lastName"></input>
    <p>{{firstName + '1'+ lastName}}</p>
    <p>{{getFullName()}}</p>
    <p>{{getFullName()}}</p>
    <p>{{fullName}}</p>
    <p>{{fullName}}</p>
</div>

<script src="./js/vue.js"></script>
<script>
    let vm = new Vue({
        el:'#root',
        data:{
            firstName:'bb',
            lastName: 'cc',
            fullName2:''
        },
        methods:{
            //通过方法 我们可以实现名称的显示
            getFullName(){
                console.info("getFullname被调用")
                return this.firstName + '-'+ this.lastName;
            }
        },
        //计算属性  当我们需要这个数据但是又没有 这个数据和原有的数据还有关系 时使用
        //它的底层实现： Object.defineProperty
        computed:{//性能相比methods较高,因为第一次访问之后会进行缓存
            fullName(){
                //通过计算属性也可以实现名称的显示 而且和方法的 写法差不错
                console.info("计算属性fullName被调用")
                return this.firstName + '----'+ this.lastName;
            }
        },
        //计算属性和methods方法的区别
        //计算属性和methods都可以实现我们的功能
        //但是计算属性效率是比methods高很多，因为内部存在缓存
        //监视：
        watch:{
            firstName:{
                handler(newValue,oldValue){
                    //当firstName这个数据发生改变的时候会调用handler函数
                    this.fullName2 = newValue + '-'+this.lastName;
                }
            }
        }
    })
    //监视：
    vm.$watch('lastName',function(newValue,oldValue){
        this.fullName2 = this.firstName + '-' + newValue;
    })
</script>

三、效果

四、vue监视