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来打印判断

      

  • 相关阅读:
     Go is more about software engineering than programming language research.
    perl 处理json 数组格式
    perl 处理json 数组格式
    mongodb 限制ip访问
    mongodb 限制ip访问
    haproxy 访问www.zjdev.com 自动跳转到appserver_8001 对应的nginx
    haproxy 访问www.zjdev.com 自动跳转到appserver_8001 对应的nginx
    docker 数据盘映射方案
    docker 数据盘映射方案
    perl encode_utf8 和decode_utf8
  • 原文地址:https://www.cnblogs.com/cn-oldboy/p/12684000.html
Copyright © 2011-2022 走看看