如何使用Vue.js methods-js教程-PHP中文网

首页

web前端

js教程

如何使用Vue.js methods

php中世界最好的语言

Jun 14, 2018 am 11:40 AM

methods vue.js

这次给大家带来如何使用Vue.js methods，使用Vue.js methods的注意事项有哪些，下面就是实战案例，一起来看一下。

1.首先最明显的不同就是调用的时候，methods要加上（）

2.我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。

而使用 methods ，在重新渲染的时候，函数总会重新调用执行

为了方便理解，先上一段源码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
  </head>
  <body>
    <p class="test">  <!--computed计算属性-->
      <p>{{now}}</p>
      <p>{{now}}</p>
      <p>{{now}}</p>
      <p>{{now}}</p>
      <hr />      <!--横线分割-->
</p>
    <p class="test2">  <!--methods方法，注意new（）加了括号-->
      <p>{{now()}}</p>
      <p>{{now()}}</p>
      <p>{{now()}}</p>
      <p>{{now()}}</p>
    </p>
  </body>
  <script type="text/javascript">
    var myVue = new Vue({
      el: ".test",
      computed: {
        now: function() {
          var yanshi = 0;
          for(var o = 0; o < 2000; o++) {   //延时
            for(var q = 0; q < 2000; q++) {
              yanshi++;
            }
          }
          return Date.now()
        }
      }
    });
    var vue2 = new Vue({
      el: '.test2',
      methods: {
        now: function() {
          var yanshi = 0;
          for(var o = 0; o < 2000; o++) {
            for(var q = 0; q < 2000; q++) {
              yanshi++;
            }
          }
          return Date.now()
        }
      }
    })
  </script>
</html>

登录后复制

运行结果如上，可以看出computed计算属性的话，每次进入页面将一直沿用第一次的信息，不会再触发now，这就是依赖缓存。（有延时的情况下多次输出时间相同）

那什么是相关依赖发生改变时才会重新取值呢比方说reversedMessage function（）计算属性中调用了message变量

就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

而methods是实时的，在重新渲染时，函数总会重新调用执行，不会缓存，（多次输出时间不同）

可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：所以其实computed也是可以传参的。

ps：下面看下vue计算属性computed和methods的区别

在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码，但是什么时候用哪个属性，要好好区分一下才能做到正确的运用vue。
computed称为计算属性，顾名思义，计算就要返回一个计算的结果，所以，当我们要处理大量的逻辑，但是最后要取得最后的结果的时候可以用computed；
简单示例：
要求：
<input type="text v-model="num1"><input type="text v-model="num2">
现在要返回num1和num2的和；
<script>
  new Vue({
    el:"#box",
    data:{
        num1:0,
        num2:0
        }
    computed:{  
        result:function(){
            return this.num1 + this.num2  
            // 计算属性必须有一个返回值
        }
    }
   })
</script>
methods：是方法的意思，在js中，我们把一些函数叫做方法，一般情况下，要触发这个方法就要执行，要执行就要有一个源来触发，所以就需要一个事件源。这是和computed的一点不同之处；
methods的示例：
要求：
<\button @click="do()">点击弹出<\/button>
<script>
  new Vue({
    el:"#box",
    data:{
        num1:0,
        num2:0
        }
    methods:{  
        do:function(){
           alert('ok')
           //这里根据情况，可以返回有返回值也可以没有返回值。
        }
    }
   })
</script>
对比computed 和 methods：
computed计算的结果如果不发生改变就不会触发result这个函数。而methods中一般都是定义的需要事件触发的一些函数。每次只要触发事件，就会执行对应的方法。如果把computed中的方法写到method中会浪费性能。
computed必须返回一个值页面绑定的才能取得值，而methods中可以只执行逻辑代码，可以有返回值，也可以没有。

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7647

CakePHP 教程

1392

steam的账户名称是什么格式

win11激活密钥永久

NYT迷你填字游戏答案

110

显示更多

Related knowledge

深入探讨vite是怎么解析.env文件的 Jan 24, 2023 am 05:30 AM

使用vue框架开发前端项目时，我们部署的时候都会部署多套环境，往往开发、测试以及线上环境调用的接口域名都是不一样的。如何能做到区分呢？那就是使用环境变量和模式。

图文详解如何在Vue项目中集成Ace代码编辑器 Apr 24, 2023 am 10:52 AM

Ace 是一个用 JavaScript 编写的可嵌入代码编辑器。它与 Sublime、Vim 和 TextMate 等原生编辑器的功能和性能相匹配。它可以很容易地嵌入到任何网页和 JavaScript 应用程序中。Ace 被维护为Cloud9 IDE的主要编辑器，并且是 Mozilla Skywriter (Bespin) 项目的继承者。