zoukankan      html  css  js  c++  java
  • vue中计算属性和方法的区别,演示代码

    第一个,使用计算属性,来修改数据

       <div id="example">
            <p>{{ now }}"</p>
            <p>{{msg}}</p>
          </div>
          
          <script>
            //  在控制台,使用vm.msg=2,修改msg的时候,时间不会发生变化
          var vm = new Vue({
            el: '#example',
            data: {
              msg: 'Hello'
            },
            computed: {
              now: function () {
                return Date.now()
              }
            }
          })
          </script>
    

     第二种,使用方法来修改数据

     <div id="example">
            <p>{{ now() }}"</p>
            <p>{{msg}}</p>
          </div>
          
          <script>
            //   在控制台,使用vm.msg=2,修改msg的时候,时间发生了变化
          var vm = new Vue({
            el: '#example',
            data:{
                msg:"你好"
            },
            methods: {
              now: function () {
                return Date.now()
              }
            }
          })
          </script>
    

      区别和联系

    • 两者的执行结果是完全相同的
    • 计算属性是基于他们的依赖进行缓存的,只有在相关依赖发生改变时,他们才会重新求值,也就是说,只要他的依赖没有发生变化,那么每次访问的时候计算属性都会立即返回之前的计算结果,不再执行函数
    • 每次触发重新渲染时,调用方法将总会再次执行函数
    • 上方两个例子,计算属性将总会返回相同值,而方法则不会
      另一个例子
      
        <div id="example">
            <p>{{msg}}</p>
            <p>{{ reversedMessage()}}"</p>
            <hr>
            {{ceshi}}
        </div>
    
        <script>
            //   在控制台,使用vm.ceshi="修改",修改ceshi的时候,计算属性中的函数,没有执行
            var vm = new Vue({
                el: '#example',
                data: {
                    msg: 'Hello',
                    ceshi:"测试"
                },
                // computed: {
                //     // 计算属性的 getter
                //     reversedMessage: function () {
                //         // `this` 指向 vm 实例
                //         console.log("计算属性执行了")
                //         return this.msg.split('').reverse().join('')
                //     }
                // },
                 //   在控制台,使用vm.ceshi="修改",修改ceshi的时候,方法中的函数,都会执行
                methods: {
                    reversedMessage: function () {
                        console.log("方法执行了")
                        return this.msg.split('').reverse().join('')
                    }
                }
            })
        </script>
    

      再总结:计算属性中的函数,只有在依赖改变的时候,才会执行。方法中的函数,数据一遍,这个函数也会执行。

      会不会执行,通过console.log来打印判断

      

  • 相关阅读:
    VS2010如何以管理员权限启动? 转载
    ArcGIS属性编辑字符型字段值出现乱码问题
    点批量移动到线上(ArcGis版) 转载
    C#判断数据库中取出的字段值是否为空(NULL) .
    方框内打勾(钩)的符号(word和excel)
    C# 获取屏幕的大小
    神通数据库的备份和还原
    推荐系列文章:《DotText源码阅读》
    Lucene.Net 2.3.1开发介绍 —— 阅读索引(转载)
    Lucene.Net:使用eaglet的盘古分词进行分词和搜索(转载)
  • 原文地址:https://www.cnblogs.com/cn-oldboy/p/12684000.html
Copyright © 2011-2022 走看看