1、watch
理解
: 监听器,监听某个数据的变化从而来执行一些操作,当data里面的数据发生变化的时候来执行一下开销较大或异步的操作
1、监听值类型(简单类型)数据
//在一个vue实例中
new Vue({
el:"#myApp",
data:{
num1:1,
num2:2
},
methods:{},
watch:{
//这里两个属性,第一个值是变化后最新的值,第二个是变化前
num1(after,before){
this.num2 = after +1
}
immediate:true //页面首次加载的时候做一次监听。
//这里的意思就是,监听num1的变化,当num1的数据发生变化的时候,来操作num2的值
}
})
2、监听引用(复杂)类型的数据
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | new Vue({ el: "#myApp" , data:{ obj:{ userName: "caicai" } }, watch:{ obj:{ handler(newValue,oldValue){ // handler函数是当你的obj发生变化的时候你要做什么 console.log(newValue.userName,oldValue.userName); }, deep: true //是否深度侦听,true开启,false关闭,默认false //加了deep之后相当于在对象obj每一层的属性都加上了handler侦听器。否则的话侦听到的只是引用地址,不会执行handler函数 } } }); |
2、computed
理解: 计算属性,顾名思义就是通过某个属性(数据)来计算得到某个属性,这个重点在于计算,我们希望的是拿到data数据后处理一下,得到计算的结果。
在原vue中的template模板,作者初衷只是进行一些简单的运算,那么比较复杂的计算就可用computed来进行操作
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <div id= "myApp" > <input type= "text" v-model= "str" > 1、第一种操作,写在模板里,导致模板过重,难于维护 <p>{{str.split( "" ).reverse().join( "" )}}</p> 2、第二种,使用一个方法来调用,若多处使用,就执行多次,降低运行速度,性能减少 <p>{{fn(str)}}</p> 3、第三种,使用过滤器,具有缓存,只要str不发生变化,就不会再次进行运算 <p>{{reverseStr}}</p> </div> <script type= "text/javascript" > new Vue({ el: "#myApp" , data:{ str: "abcd" }, methods:{ fn(v){ //若多出调用,就执行多次 return v.split( "" ).reverse().join( "" ) //炸开--反转--组合 } }, computed:{ reverseStr(){ //str不发生变化的话,我只执行一次,具有缓存 return this .str.split( "" ).reverse().join( "" ) } } }) </script> |