09_计算属性和监听器
计算属性的使用(computed):
computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化
<div id="app"> <!-- 当多次调用 reverseString 的时候 只要里面的 num 值不改变 他会把第一次计算的结果直接返回 直到data 中的num值改变 计算属性才会重新发生计算 --> <div>{{reverseString}}</div> <div>{{reverseString}}</div> <!-- 调用methods中的方法的时候 他每次会重新调用 --> <div>{{reverseMessage()}}</div> <div>{{reverseMessage()}}</div> </div> <script type="text/javascript"> /* 计算属性与方法的区别:计算属性是基于依赖进行缓存的，而方法不缓存 */ var vm = new Vue({ el: '#app', data: { msg: 'Nihao', num: 100 }, methods: { reverseMessage: function(){ console.log('methods') return this.msg.split('').reverse().join(''); } }, //computed 属性 定义 和 data 已经 methods 平级 computed: { // reverseString 这个是我们自己定义的名字 reverseString: function(){ console.log('computed') var total = 0; // 当data 中的 num 的值改变的时候 reverseString 会自动发生计算 for(var i=0;i<=this.num;i++){ total += i; } // 这里一定要有return 否则 调用 reverseString 的 时候无法拿到结果 return total; } } }); </script>
注意计算属性和方法的区别：计算属性是依赖缓存的。
侦听器的基本使用(watch)：
使用watch来响应数据的变化
一般用于异步或者开销较大的操作(如：当搜索框中数据变化会向后台发起请求时类似于某度)
watch 中的属性 一定是data 中 已经存在的数据
当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听
基本使用：
<div id="app"> <div> <span>名：</span> <span> <input type="text" v-model='firstName'> </span> </div> <div> <span>姓：</span> <span> <input type="text" v-model='lastName'> </span> </div> <div>{{fullName}}</div> </div> <script type="text/javascript"> /* 侦听器 */ var vm = new Vue({ el: '#app', data: { firstName: 'Jim', lastName: 'Green', // fullName: 'Jim Green' }, //watch 属性 定义 和 data 已经 methods 平级 watch: { // 注意： 这里firstName 对应着data 中的 firstName // 当 firstName 值 改变的时候 会自动触发 watch firstName: function(val) { this.fullName = val + ' ' + this.lastName; }, // 注意： 这里 lastName 对应着data 中的 lastName lastName: function(val) { this.fullName = this.firstName + ' ' + val; } } }); </script>
使用案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <div> <span>用户名：</span> <span> <input type="text" v-model.lazy='uname'> </span> <span>{{tip}}</span> </div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 侦听器 1、采用侦听器监听用户名的变化 2、调用后台接口进行验证 3、根据验证的结果调整提示信息 */ var vm = new Vue({ el: '#app', data: { uname: '', tip: '' }, methods: { checkName: function(uname) { // 调用接口，但是可以使用定时任务的方式模拟接口调用 var that = this; setTimeout(function(){ // 模拟接口调用 if(uname == 'admin') { that.tip = '用户名已经存在，请更换一个'; }else{ that.tip = '用户名可以使用'; } }, 2000); } }, watch: { uname: function(val){ // 调用后台接口验证用户名的合法性 this.checkName(val); // 修改提示信息 this.tip = '正在验证...'; } } }); </script> </body> </html>
注意：官网侦听器案例中有对输入框变化频率限制案例建议掌握。
