1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="UTF-8">
  5.          <title>vue</title>
  6.      </head>
  7.      <body>
  8.          <div id="example">
  9.            <p>Original message: "{{ message }}"</p>
  10.            <p>Computed reversed message: "{{ reversedMessage }}"</p>
  11.            <p>Reversed message: "{{ reversedMessage2() }}"</p>
  12.          </div>
  13.          <!-- 开发环境版本，包含了用帮助的命令行警告 -->
  14.          <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  15.          <script type="text/javascript">
  16.              var vm = new Vue({
  17.                el: '#example',
  18.                data: {
  19.                  message: 'Hello'
  20.                },
  21.                computed: {
  22.                  // 计算属性的 getter,有缓存
  23.                  reversedMessage: function () {
  24.                    // `this` 指向 vm 实例
  25.                    return this.message.split('').reverse().join('')
  26.                  }
  27.                },
  28.                // 在组件中，方法无缓存
  29.                  methods: {
  30.                    reversedMessage2: function () {
  31.                      return this.message.split('').reverse().join('')
  32.                    }
  33.                  }
  34.              })
  35.          </script>
  36.      </body>
  37.  </html>

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。

如果你不希望有缓存，请用方法来替代。

计算属性

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="UTF-8">
  5.          <title>computed,methods,watch</title>
  6.          <div id="app">
  7.              {{fullName}}
  8.              {{age}}
  9.          </div>
  10.      </head>
  11.      <body>
  12.          <!-- 开发环境版本，包含了用帮助的命令行警告 -->
  13.          <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  14.          <script type="text/javascript">
  15.  
  16.              var app = new Vue({
  17.                  el: '#app',
  18.                  data: {
  19.                      firstName: 'Dell',
  20.                      lastName: 'Lee',
  21.                      age: 28
  22.                  },
  23.                  computed: {
  24.                      fullName: function() {
  25.                          console.log('计算了一次');
  26.                          return this.firstName + ' ' + this.lastName;
  27.                      }
  28.                  }
  29.              })
  30.  
  31.          </script>
  32.      </body>
  33.  </html>

方法

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="UTF-8">
  5.          <title>computed,methods,watch</title>
  6.          <div id="app">
  7.              {{fullName()}}
  8.              {{age}}
  9.          </div>
  10.      </head>
  11.      <body>
  12.          <!-- 开发环境版本，包含了用帮助的命令行警告 -->
  13.          <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  14.          <script type="text/javascript">
  15.  
  16.              var app = new Vue({
  17.                  el: '#app',
  18.                  data: {
  19.                      firstName: 'Dell',
  20.                      lastName: 'Lee',
  21.                      age: 28
  22.                  },
  23.                  methods: {
  24.                      fullName: function() {
  25.                          console.log('计算了一次');
  26.                          return this.firstName + ' ' + this.lastName;
  27.                      }
  28.                  }
  29.  
  30.              })
  31.  
  32.          </script>
  33.      </body>
  34.  </html>

watch  侦听器

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="UTF-8">
  5.          <title>vue</title>
  6.      </head>
  7.      <body>
  8.          <div id="app">
  9.              <div>
  10.                  {{fullName}}
  11.                  {{age}}
  12.              </div>
  13.          </div>
  14.  
  15.          <!-- 开发环境版本，包含了用帮助的命令行警告 -->
  16.          <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  17.          <script>
  18.              var app = new Vue({
  19.                  el: '#app',
  20.                  data: {
  21.                      firstName: 'Tom',
  22.                      lastName: 'Lee',
  23.                      fullName: 'Tom Lee',
  24.                      age: '33'
  25.                  },
  26.                  watch: {
  27.                      firstName: function(){
  28.                          console.log('计算了一次');
  29.                          return this.fullName = this.firstName + ' ' + this.lastName;
  30.                      },
  31.                      lastName: function(){
  32.                          console.log('计算了一次');
  33.                          return this.fullName = this.firstName + ' ' + this.lastName;
  34.                      }
  35.                  }
  36.              })
  37.          </script>
  38.      </body>
  39.  </html>

computed性能最好

vue computed和methods 计算属性和侦听器的更多相关文章

  1. vue入门：（计算属性和侦听器）

    methods watch computed 一.methods-方法 在数据渲染是需要基于多个数据时第一种方法,可以采用methods属性中的方法计算返回值来实现,先来看示例: <div id ...

  2. Vue学习笔记之计算属性和侦听器

    0x00 计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div> {{ message.split(''). ...

  3. vue 自学笔记(三) 计算属性与侦听器

    一:计算属性 虽然在模板内使用表达式对属性进行处理十分便利,例如在小胡子语法里写number + 1实现对数据的简单处理,但若我们在其中加入大量的代码,使得逻辑变重,导致难以维护.例如下面的代码,并不 ...

  4. 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法

    Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...

  5. Vue.js之Vue计算属性、侦听器、样式绑定

    前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...

  6. vue计算属性和侦听器

    一.计算属性: main.js: var app = new Vue({ el: '#app', data: { math: 80, physics: 90, english: 30 }, compu ...

  7. 一起学Vue之计算属性和侦听器

    概述 在Vue开发中,模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.当你想要在模板中多次引用相同表达式时,就会更加难以处理.所以,对于任何复 ...

  8. Vue.js 生命周期、计算属性及侦听器

    一.创建一个Vue实例 每个Vue应用都是使用Vue函数创建一个Vue实例.所有的Vue组件都是一个Vue实例,并且接受相同的选项对象(一些根实例特有的选项除外). 数据和方法 当一个实例被创建后,它 ...

  9. Vue学习之vue中的计算属性和侦听器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Linux账号管理与ALC权限设定（一）

    UID  与   GID UID用户的编号  GID 用户群组的编号 账号登录时,有一个对应的文本来记录某个账户的UID与GID.然后获得这个UID去对应的密码文本中,取得密码进行比对,然后登陆. 保 ...

  2. python中关于is,=和==的区别

    在Python中 '='相当于赋值 '=='相当于等号两边的值相同 is则是表示两边的id,也就是内存地址相同

  3. AE开发中实现Control中的各种图形工具的方法（转）

    Controls中的工具基本可以分为两类: 第一类:点击工具图标或按钮后,当前axMapControl的工具即为所点击的工具命令. 前面有Controls 后面有tool的工具都可以用同一类的代码实现 ...

  4. Largest Submatrix 3

    Largest Submatrix 3 给出一个\(n\times m\)的网格图,第i行第j列上的格子有数字\(a[i][j]\),显然,你可以从中找到一个子矩阵,保证子矩阵中的数字互不相同,求子矩 ...

  5. Java中的API

    待施工 111 API: Scanner Random String StringBuilder ArrayList 集合详解: 包 import java.util.ArrayList 构造方法pu ...

  6. Spring Boot 集成Mybatis实现多数据源

    静态的方式 我们以两套配置方式为例,在项目中有两套配置文件,两套mapper,两套SqlSessionFactory,各自处理各自的业务,这个两套mapper都可以进行增删改查的操作,在这两个主MYS ...

  7. 【SQL】Mysql常用sql语句记录

    1.创建用户.赋予权限 CREATE DATABASE scadm DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci; CREATE USER 's ...

  8. STM32嵌入式开发学习笔记（三）：使用按键控制小灯

    按键和小灯一样,也是通过GPIO外设与主板连接,也是通过GPIO_InitStruct类型结构体控制其工作. 查阅技术手册,按钮连接GPIOA控制下的管脚0. 但与之不同的是,按键是一种输入设备,输入 ...

  9. CSS：百科

    ylbtech-CSS:百科 1.返回顶部 CSS (层叠样式表) 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标 ...

  10. PHP面试 PHP基础知识 二（常量及数据类型）

    常量及数据类型 PHP八种数据类型 四种标量类型 字符串(string).布尔(boolean).浮点(float/double).整型(integer) 两种复合类型 数组(array).对象(ob ...