首页 > 其他 > 详细

vue中计算属性和方法的区别,演示代码

时间:2020-04-12 11:30:38      阅读:44      评论:0      收藏:0      [点我收藏+]

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

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

  区别和联系

  • 两者的执行结果是完全相同的
  • 计算属性是基于他们的依赖进行缓存的,只有在相关依赖发生改变时,他们才会重新求值,也就是说,只要他的依赖没有发生变化,那么每次访问的时候计算属性都会立即返回之前的计算结果,不再执行函数
  • 每次触发重新渲染时,调用方法将总会再次执行函数
  • 上方两个例子,计算属性将总会返回相同值,而方法则不会


  

vue中计算属性和方法的区别,演示代码

原文:https://www.cnblogs.com/cn-oldboy/p/12684000.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!