computed&&watch 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>if判断</title>
</head>
<body>  
    
    <div id="app">
        <span>1-{{name}}</span><br>
        <span>2-{{addName()}}</span><br>
        <span>3-{{addName()}}</span><br>
        <span>4-{{addName2}}</span><br>
        <span>5-{{addName2}}</span><br>
        <span>6-{{time}}</span><br>
        <span>7-{{num}}</span><br>


    </div>

</body>

<script src="js/vue.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            name:'ddddd',
            num:0
             
        },
        methods:{  //  方法   每次都会重新计算里面的操作  无缓存
            addName:function(){
                console.log('addName调用');
                return "hello" + "-"+this.name;
                
            }

        },
        computed:{   //计算  只有当依赖的数据改变时才重新计算        有缓存   在数据的基础上进行依赖
            // addName2:function(){
            //     console.log('addName2调用！');
            //     return "hello"+ "-"+this.name;   //只有当name值改变时 才从新调用addName方法
            // },
            addName2:{
                get:function(){
                    console.log('addName2被调用');
                    return "hi"+"-"+this.name;
                },
                set:function(name){
                    this.name=name
                }
            },
            time:function(){
                console.log('time调用！');
                return new Date();
            }
        },
        watch:{  //监测   数据改变进行的操作
            name:function(){  //监测 data里的数据改变时  进行的操作 
                console.log('检测到name发生改变！');
                this.num=1;   //data里的num  +1
            }
        }

    });

    this.name='jinsuo'

</script>
</html>

 

posted @ 2019-03-08 18:35  Jinsuo  阅读(131)  评论(0)    收藏  举报