③. 计算属性(computed)
①. 模板中放入太多的逻辑会让模板过重且难以维护,使用计算属性可以让模板更加的简洁。
②. 计算属性是基于它们的依赖进行缓存的(依赖就是指的data中的数据),而方法不存在缓存
③. 注意:只要data中的数据不发生改变,那么第二次调用计算属性的时候使用的就是第一次的结果,直接用缓存;方法不会用到缓存中的数据,你显示申明调用几次,方法就会执行几次
④. 需要返回一个新的结果使用计算属性(computed)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> {{message}} {{message.split('').reverse().join('')}} <h2>computed...</h2> <!-- 这里使用了两次reversedMessage,但是由于data中的message信息没有发生改变, 所以第二次用了缓存;console.log("computed.....")出现一次 --> {{reversedMessage}} {{reversedMessage}} <!-- 这里是调用两次方法,方法不会使用缓存,所有会出现两次 alert("method...."); --> {{handle()}} {{handle()}} </div> <script src="../js/vue.js"></script> <script> var vm=new Vue({ el:'#app', data:{ message:'hello' }, methods:{ handle:function(){ //console.log("mehtod....."); alert("method...."); return this.message.split('').reverse().join(''); } }, computed: { //reverseString 这个是我们自己定义的名字 reversedMessage: function () { //这里一定要有return 否则 调用 reverseString的时候无法拿到结果 console.log("computed....."); return this.message.split('').reverse().join(''); } } }); </script> </body> </html>
④. 侦听器(watch)
①. watch 中的属性一定是data中已经存在的数据
②. 当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变只有data中的数据才能够监听到变化,此时就需要deep属性对对象进行深度监听
③. 数据变化时执行异步或开销较大的操作,只需要监听数据的变化使用侦听器(watch)
需要返回一个新的结果使用计算属性(computed)
只需要监听数据的变化使用侦听器(watch)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <div id="demo">{{ fullName }}</div> </div> <script src="../js/vue.js"></script> <script> var vm=new Vue({ el:'#app', data:{ firstName: 'Foo', lastName: 'Bar', //fullName: 'Foo Bar' }, methods:{ }, //注意:如果data中的属性发生了改变(firstName|lastName)会触发watch watch: { firstName: function (val) { //vm.firstName="xiaozhi" //firstName change....xiaozhi console.log("firstName change...."+val) this.fullName = val + ' ' + this.lastName }, lastName: function (val) { console.log("lastName change...."+val); this.fullName = this.firstName + ' ' + val } }, //这里可以使用计算属性computed(更加简洁) computed: { // 计算属性的 getter fullName: function () { // `this` 指向 vm 实例 return this.firstName+' '+this.lastName; } } }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <span>用户名:</span> <input type="text" v-model.lazy="username"> <span>{{tip}}</span> </div> <script src="../js/vue.js"></script> <script> /* 侦听器: 1.采用侦听器监听用户名的变化 2.调用后台接口进行验证 3.根据验证的结果调整提示内容 */ var vm=new Vue({ el:'#app', data:{ username:'', tip:'' }, methods:{ checkName:function (username) { var that=this; setTimeout(function(){ //注意定时器中的this代表的是window对象 console.log(this); if(username=='admin'){ that.tip='用户名已经存在....'; }else{ that.tip='用户名不存在...'; } },2000); } }, watch:{ username:function(val){ this.tip="正在验证...."; //调用后台接口验证用户名的可用性 this.checkName(val); } } }); </script> </body> </html>
④. 从这里我们可以知道侦听器有两个值,第一个是侦听到的最新的值,第二个是旧值
<body> <div id="app"> <input type="text" v-model="num" @click="num++" /> <div>{{num}}</div> {{msg}} </div> <script src="../js/vue.js"></script> <script> var appel = document.getElementById("app"); var vm = new Vue({ el: '#app',//元素的挂载位置(值可以是css选择器或者DOM元素) //el:appel data: { //模型数据:值是一个对象 num: 0, msg: "" }, watch: { num: function (valNew, valOld) { console.log("得到的最新的值是:" + valNew); console.log("以前的值是:" + valOld); if (valNew > 3) { this.msg = "库存不足"; } }, }, }); </script>
