vue中computed与methods区别

最新推荐文章于 2024-12-17 21:32:23 发布

原创最新推荐文章于 2024-12-17 21:32:23 发布 · 272 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue中computed与methods区别

vue 专栏收录该内容

6 篇文章

订阅专栏

计算属性computed是依赖于其他值发生改变的，当关联值发生改变之后才会重新计算
method是在页面渲染的时候就会重新调用。在使用的时候如果调用次数特别多会影响执行效率
methods调用的时候带上（），eg：{{aa()}}
computed不用带上（），eg：{{aa}}
计算属性通过指定computed进行设置
计算属性的值会根据当前依赖的数据内容进行改变
如果依赖的数据没有改变那么在重新render页面的时候会使用缓存的数据
在开发的时候建议根据实际情况进行选择
在下面的例子中，
最初都是1553170782072，
随着输入，computed中的computedNow() {
return Date.now();
},因为不是一渲染就改变，所以

computedNow: {{computedNow}}

中的值不变，而

nowMethod: {{nowMethod()}}

中的值变化。

``` computed-vs-methods

nowMethod: {{nowMethod}}

nowMethod: {{nowMethod()}}

computedNow: {{computedNow}}

<!-- trim 去掉前后的空格 -->
<input type="text" v-model.trim="fullName">
<p>full name: {{fullName}}</p>
<p>first name: {{firstName}}</p>
<p>last name: {{lastName}}</p>

``` 在附上一个computed的例子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>计算属性</title>
</head>
<body>
  <!-- 
    计算属性通过指定computed进行设置
      计算属性的值会根据当前依赖的数据内容进行改变
        如果依赖的数据没有改变那么在重新render页面的时候会使用缓存的数据
   -->
  <div id="app">
    <p>反转之后的内容为: <span>{{reverseTxt}}</span></p>
    <input type="text" v-model="txt">
    <hr>
    <p>全名为: {{fullName}}</p>
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
  </div>
  <script src="./lib/vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        txt: '',
        firstName: '',
        lastName: ''
      },
      computed: {
        reverseTxt: function() {
          return this.txt.split('').reverse().join('');
        },
        fullName() {
          return this.firstName + ' ' + this.lastName;
        }
      },
    })
  </script>
</body>
</html>