Vue经常使用特性-计算属性computed 和侦听器 watch

时间 2020-11-30

标签 javascript vue java 缓存 app 异步 this spa code 对象栏目 JavaScript 繁體版

原文原文链接

1.计算属性 computed

1.1为什么须要计算属性？javascript

模板中放入太多的逻辑会让模板太重且难以维护使用计算属性可让模板更加的简洁vue

1.2.计算属性与方法的区别 java

计算属性是基于它们的依赖进行缓存的缓存

方法不存在缓存app

1.3.计算属性是基于它们的响应式依赖进行缓存的异步

1.4.computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则咱们监控的这个值也就会发生变化this

 <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>

2.侦听器 watch

侦听器的应用场景spa

数据变化时执行异步或开销较大的操做code

使用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>

案例：验证用户名是否可用

需求：输入框中输入姓名，失去焦点时验证是否存在，若是已经存在，提示重新输入，若是不存在，提示能够使用。

案例：需求分析

① 经过v-model实现数据绑定

② 须要提供提示信息

③ 须要侦听器监听输入信息的变化

④ 须要修改触发的事件

<body>
    <div id="app">
        <div>
            <span>用户名：</span>
            <span>
                <input type="text" v-model.lazy='uname'>
            </span>
            <span>{{tip}}</span>
        </div>
    </div>
    <script src="vue.js"></script>
    <script>
        //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>

Vue经常使用特性-计算属性computed 和 侦听器 watch

1.计算属性 computed

2.侦听器 watch

案例：验证用户名是否可用

Vue经常使用特性-计算属性computed 和侦听器 watch