1.computed里是偏向于通过监听data里的值变化后,经过运算返回一个新的计算结果,
所以k不能与data里的k重名,并且必须有return,
能够缓存,依赖的值不变化不会进行重复计算;
而watch是监听data里的值的变化,k是data里的k,不能自己单独定义k
watch里经常放异步函数。
不能缓存。
watch顾名思义,用于监听数据变化,其中可以监听的数据来源有三部分:props、data、computed内的数据;watch提供两个参数(newValue,oldValue),第一个参数是新值,第二个参数保存旧值;
computed用于处理复杂的逻辑运算,主要和methods储存方法来进行区分;methods储存方法,,computed储存需要处理的数据值;methods每次都会调用,computed有缓存机制,只有改变时才执行,性能更佳;
1 <div id="app"> 2 <input type="text" v-on:input='input'> 3 <ul> 4 <li v-for='item in result'>{{item}}</li> 5 </ul> 6 </div> 7 <script src="vue.js"></script> 8 <script> 9 var vm = new Vue({ 10 el:'#app', 11 data:{ 12 flag: false, 13 result:[], 14 15 }, 16 methods:{ 17 input:function(){ 18 this.flag = true 19 } 20 }, 21 watch:{ 22 flag:function(newValue,old){//两个参数表示变化之前的值和变化之后的值
setTimeout(()=>{
24 this.result = [1,2,3,4,5]
25 console.log(old,newValue)
26 },500)
27 }
28 }
29 })