计算属性(computed)+侦听器(watch)+ 方法(methods)
Poki-Q 人气:2计算属性 computed
当数据改变时,方法的结果也会发生改变。如果多处地方调用计算属性里面的同一个方法时,该方法只会执行一次。如图,在控制台改变data里面的num值时,虽然在多处使用computedNum方法,但该方法只执行一次。
<body> <div id="app"> <p>computedNum:{{computedNum}}</p> <p>computedNum:{{computedNum}}</p> <p>computedNum:{{computedNum}}</p> <p>computedNum:{{computedNum}}</p> <p>computedNum:{{computedNum}}</p> </div> <script> var vm = new Vue({ el:"#app", data:{ num:1 }, computed:{ // 如果有多处 computedNum:function(){ console.log("computing"); return this.num*2; } } }) </script> </body>
侦听器 watch
侦听指定属性,属性改变时执行相应的方法。
<body> <div id="app"> <p>watchNum:{{watchNum}}</p> </div> <script> var vm = new Vue({ el:"#app", data:{ num:1, watchNum:"" }, // 侦听器 watch watch:{ // 形式1:num 一发生变化就会执行 num 后面的函数 // 监听 num 的变化,num发生变化后,newV为变化后的新值,oldV为变化前的旧值。 // num:function(newV, oldV){ // console.log("watch...."); // this.watchNum = newV * 2; // }, // 形式2: immediate 为 true 时先执行一次 handler 函数,后续 num 发生变化时也执行handler方法。 num:{ immediate:true, // immediate为true时,第一次执行handler函数newValue为data里面的num值,oldValue为undefined handler:function(newValue, oldValue){ console.log("watch...."); this.watchNum = newValue*2 } } }, }) </script> </body>
方法 methods
在 methods 里面定义的方法可以在模板表达式里面使用。与计算属性不同的是,每当方法里面的数据发生改变,每个使用该方法的地方都会调用一次该方法。如图所示有4处地方调用了该方法,改变 num 值,执行了4次。
<body> <div id="app"> <p>countNum:{{countNum()}}</p> <p>countNum:{{countNum()}}</p> <p>countNum:{{countNum()}}</p> <p>countNum:{{countNum()}}</p> </div> <script src="./vue.js"></script> <script> var vm = new Vue({ el:"#app", data:{ num:1 }, // 里面的方法可以在模板表达式里面使用 methods:{ countNum:function(){ console.log("counting..."); return this.num*2 } } }) </script> </body>
加载全部内容