VUE：计算属性和监视 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--
            1、计算属性：
                在computed属性对象中定义计算属性的方法
                在页面中使用{{方法名}}来显示计算结果
            2、监视属性：
                通过vm对象的$watch()或watch配置来监视指定的属性
                当属性变化时，回调函数自动调用，在函数内部进行计算
            3、计算属性高级：
                通过getter/setter实现对属性数据的显示和监视
                计算属性存在缓存，多次读取只执行一次getter计算
        -->
        
        <div id="app">
            姓：<input type="text" placeholder="First Name" v-model="firstName"/><br />
            名：<input type="text" placeholder="Last Name" v-model="lastName" /><br />
            姓名1（单向）：<input type="text" placeholder="Full Name1" v-model="fullName1"/><br />
            姓名2（单向）：<input type="text" placeholder="Full Name2" v-model="fullName2"/><br />
            姓名3（双向）：<input type="text" placeholder="Full Name3" v-model="fullName3"/><br />
        </div>
        
        <script type="text/javascript" src="../js/vue.js" ></script>
        <script type="text/javascript">
            //const常量
            const vm=new Vue({
                el:"#app",
                data:{
                    firstName:'A',
                    lastName:'B',
                    fullName2:'A B'
                },
                computed:{
                    //计算属性的方法,方法的返回值作为属性值。
                    //执行条件：初始化显示的时候或data发生改变的时候调用
                    fullName1(){
                        return this.firstName+' '+this.lastName;
                    },
                    fullName3:{
                        //回调函数（1.你定义的，2.你没有调，3.但最终它执行了）计算并返回结果
                        //当需要读取当前属性值时回调，根据相关的数据计算并返回当前属性的值
                        get(){
                            return this.firstName+' '+this.lastName;
                        },
                        //当属性值发生改变时回调，更新相关的属性数据
                        //value：fullName3的最新值
                        set(value){
                            const names=value.split(' ');
                            this.firstName=names[0];
                            this.lastName=names[1];
                        }
                    }
                    
                    
                },
                watch:{
                    //传参    (新的值,旧的值) 或 (旧的值)
                    firstName:function(value){
                        this.fullName2=value+' '+this.lastName;
                    },
                    /*lastName:function(value){
                        this.fullName2=this.firstName+' '+value;
                    }*/
                }
            })
            
            vm.$watch('lastName',function(value){
                    this.fullName2=this.firstName+' '+value;
            })
        </script>
    </body>
</html>

重点：计算属性存在缓存

posted @ 2018-10-31 23:50  涛先森の日常  阅读(471)  评论(0)  编辑  收藏  举报