需求: 在 Vue 中, 我们可以像下面这样通过在 引号 或 双花括号 内写 js 表达式去做一些简单运算, 这是可以的, 不过这样写是不直观的, 而且在 html 中 夹杂 一些运算逻辑这种做法其实并不好. 最理想的情况是: html 只负责展示, 绑定的数据都是 赤裸裸 的 变量, 而非 表达式 , 这样就会比较人性化. 想要达到这种效果可以有两种方法: computed 和 methods.

1. 使用 methods 相当于是为这个 字符串倒序 的功能单独写了一个函数, 这个函数在 Vue 实例对象的 methods 属性中, 我们可以直接在 html 中使用它, 注意这里要带括号: inputValueReverse()

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

  <title>Vue Test</title>

</head>

<body>

    <div id="app">

        <input type="text" v-model:value="inputValue" />

        <span>{{ inputValueReverse() }}</span>

    </div>

    <script>

        var vApp = new Vue({

            el: "#app",

            data: {

                inputValue: ''

            },

            methods: {

                inputValueReverse: function () {

                    return this.inputValue.split('').reverse().join('');

                }

            }

        })

    </script>

</body>

</html>

2. 使用 computed, 其效果跟使用 methods 类似, 只是 作用原理 不同, 计算属性 computed 的执行是 惰性 的, 只有它所 依赖缓存 的变量发生了改变, 它才会重新执行, 这是它和 methods 的本质区别, methods 是只要发生 重新渲染 就会执行, 而 computed 不会. 所以我们可以认为 使用 computed 时性能会更好, 但 使用 methods 会更灵活, 所以具体使用哪一个得视情况而定. 另外需要注意的一点是 使用 computed 时是 不需要加括号 的, 如下所示, 它可以像一般变量一样 赤裸裸 地绑定, 而且性能也好, 可以说是很 nice 了.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

  <title>Vue Test</title>

</head>

<body>

    <div id="app">

        <input type="text" v-model:value="inputValue" />

        <span>{{ inputValueReverse }}</span>

    </div>

    <script>

        var vApp = new Vue({

            el: "#app",

            data: {

                inputValue: ''

            },

            computed: {

                // 计算属性的 getter

                inputValueReverse: function () {

                    return this.inputValue.split('').reverse().join('');

                }

            }

        })

    </script>

</body>

</html>

怎样理解 Vue 中的计算属性 computed 和 methods ?的更多相关文章

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

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

  2. Vue中的计算属性与$watch

    计算属性:在模板中绑定表达式是非常便利的,但是他们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么vue.js将绑定表达式限制为一个表达式. ...

  3. VUE学习之计算属性computed

    计算属性:computed 先看一下官网的说法 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="ex ...

  4. Vue教程：计算属性computed与侦听器watch（三）

    计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...

  5. vue监听器watch & 计算属性computed

    侦听器watch vue中watch是用来监听vue实例中的数据变化 watch监听时有几个属性: handle:其值是一个回调函数,就是监听对象对话的时候需要执行的函数 deep:其值true 或者 ...

  6. [Vue]method与计算属性computed、侦听器watch与计算属性computed的区别

    一.方法method与计算属性computed的区别 方法method:每当触发重新渲染时,调用方法method将总会再次执行函数: 计算属性computed:计算属性computed是基于它们的响应 ...

  7. Vue中的计算属性和监听器（computed 与 watch）

    react中数据是单向绑定的,而vue中数据是双向绑定的.为什么? 在react中,主要是通过setState 去改变state的值:而在vue中,会自动的触发set 与get 改变属性的值. 在vu ...

  8. vue计算属性computed和methods的区别

    computed和methods的区别 在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue. com ...

  9. 浅谈vue中的计算属性和侦听属性

    计算属性 计算属性用于处理复杂的业务逻辑 计算属性具有依赖性,计算属性依赖 data中的初始值,只有当初始值改变的时候,计算属性才会再次计算 计算属性一般书写为一个函数,返回了一个值,这个值具有依赖性 ...

随机推荐

  1. mac使用frida

    mac使用frida 安装 https://github.com/frida/frida/releases 根据手机的cpu的版本,选择相应的文件,一般通过手机信息可以看到 我这里是frida-ser ...

  2. redis基础操作概念等笔记

    Redis常用配置 daemonize ->是否是后台进程 port ->对外端口 logfile ->Redis 系统日志 dir ->Redis 工作目录 Redis的链接 ...

  3. 发布mybatis-generator-core 1.3.5的中文注释版

    源码剖析介绍:基于mybatis-generator-core 1.3.5项目的修订版以及源码剖析 目前,我把该项目,发布到了Maven中央仓库中,可直接使用: 使用方式 在项目.pom中,添加以下部 ...

  4. git status： HEAD detached from origin/master问题的解决

    问题:执行git status,提示: HEAD detached from origin/master 原因:分支选错了,后续的提交都提交到了一个匿名分支之上,整个状态是游离了的 解决方法: 1.查 ...

  5. Qt 串口通信 高速发送出错的解决方法总结

    使用网上的qextserialport-1.2类,自行开发多线程串口通信.开发的过程中,出现两个问题:   问题1:我用信号槽跨线程调用串口类MyCom 发送和接收数据,中间运行的时候,会内存错误,Q ...

  6. R语言：实现SQL的join功能的函数

    library(dplyr) ribao <- full_join(ribao,result,by = '渠道',copy = T) ribao <- full_join(ribao,se ...

  7. 使用 docker 快速安装 oracle 11g

    前言 我们在手动安装oracle数据库时,安装步骤纷繁复杂,耗时较长 在此介绍如何使用docker快速安装oracle 11g 一.docker 及其安装环境 操作系统: [root@centos7 ...

  8. Ajax案例-基于XML，以POST方式，完成省份-城市二级下拉联动

    <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC & ...

  9. RecoderUtils录音工具类

    import android.media.MediaRecorder; import android.os.Environment; import java.io.File; import java. ...

  10. linux简单命令10---权限

    1:文件权限设置 数字的用法:chmod 755 文件名 ---------------------------------------------下面是文件权限------------------- ...