计算属性

1.在computed属性对象中定义计算属性的方法，在页面上使用{{方法名}}来显示计算结果

2.通过getter/setter实现对属性数据的显示和监视

3.计算属性存在缓存，多次读取只执行一次getter

侦听属性

1.通过vm对象的$watch()或watch配置来监视指定的属性

2.当属性变化时，回调函数自动调用，在函数内部进行计算

计算属性与方法、侦听属性之间的比较

计算属性是基于它们依赖进行缓存，只有相关依赖发生改变时才会重新求值，调用方法是每当重发重新渲染时，总会调用执行函数。而侦听属性可以实现相应数据变动，但是它对需要侦听的属性编写重复的代码。但是watch在异步操作数据变化时很合适。

举个例子：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

</head>

<body>

<div id="demo">

  姓: <input type="text" placeholder="First Name" v-model="firstName"><br>

  名: <input type="text" placeholder="Last Name" v-model="lastName"><br>

  <!--fullName1是根据fistName和lastName计算产生-->

  姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br>

  姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>

  姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br>

  <p>{{fullName1}}</p>

  <p>{{getFullName()}}</p>

</div>

<!--<script type="text/javascript" src="../js/vue.js"></script>-->

<script type="text/javascript">

  const vm = new Vue({

      el: '#demo',

      data: {

          firstName: 'A',

          lastName: 'B',

          fullName2: 'A-B'

      },

      methods: {

          getFullName: function () {

              return this.firstName + '-' + this.lastName

          }

      },

      // 计算属性配置: 值为对象

      computed: {

          fullName1() { // 属性的get()

              // console.log('fullName1()', this)

              return this.firstName + '-' + this.lastName

          },

          fullName3: {

              // 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值

              get() {

                  console.log('fullName3 get()')

                  return this.firstName + '-' + this.lastName

              },

              // 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值

              set(value) {// fullName3的最新value值  A-B23

                  console.log('fullName3 set()', value)

                  // 更新firstName和lastName

                  const names = value.split('-')

                  this.firstName = names[0]

                  this.lastName = names[1]

              },

          },

      },

              watch: {

                  // 配置监视firstName

                  firstName: function (value) { // 相当于属性的set

                      console.log('watch firstName', value)

                      // 更新fullName2

                      this.fullName2 = value + '-' + this.lastName

                  },

                  lastName: function (value) {

                      this.fullName2 = this.firstName + '-' + value;

                  }

              }

  })

</script>

</body>

</html>

运行结果中fullName1和fullName2数据传输是“单向”的（输入firstname和lastname时fullname会相应变化，但是反过来就不行），fullName3实现数据传输双向的，当输入fullname时，firstname和lastname会相应的改变。get为取值，set为赋值

vuejs中的计算属性和监视的更多相关文章

  1. Vue的计算属性，监视属性代码理解

    1.计算属性:在computed属性对象中定义计算属性的方法,在页面中使用{{方法名}}来显示计算的结果 //计算属性 computed:{ // 计算属性值的一个方法,方法的返回值是属性值,初始化显 ...

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

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

  3. VUE：计算属性和监视

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. Blazor和Vue对比学习（基础1.8）：Blazor中实现计算属性和数据监听

    1.7章<传递UI片断>,需要做几个案例,这部分暂停消化几天.我们先把基础部分相对简单的最后两章学习了. 计算属性和数据监听是Vue当中的概念,本质上都是监听数据的变化,然后做出响应.两者 ...

  5. Vue - 在v-repeat中使用计算属性

    1.从后端获取JSON数据集合后,对单条数据应用计算属性,在Vue.js 0.12版本之前可以在v-repeat所在元素上使用v-component指令 在Vue.js 0.12版本之后使用自定义元素 ...

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

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

  7. vue学习-第三个DEMO(计算属性和监视) v-model基础用法

    <div id="demo"> 姓:<input type="text" placeholder="First Name" ...

  8. vue2.0中的计算属性

    计算属性是一个很邪门的东西,只要在它的函数里引用了data中的某个属性,当这个属性发生变化的时候,函数仿佛可以嗅探到这个变化,并自动重新执行. 上代码会源源不断的打印出a的值.如果希望b依赖data中 ...

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

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

随机推荐

  1. 【Leetcode】【Easy】Balanced Binary Tree

    Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced binary ...

  2. mysql 统计连续天数

    以下为例子数据 图1 图1 首先根据要求取出BeforeMeal要在7.0以下 并且 bingAfterMeal要在11.1以下 select AccountId,CreateTime from Di ...

  3. May 17th 2017 Week 20th Wednesday

    Men are nearly always willing to believe what they wish. 人总爱想入非非,把愿望变成现实. It is just the humancondit ...

  4. March 5 2017 Week 10 Sunday

    If you do what you love, you will never work a day in your life. 做你所爱的事情,你就不会觉得是在工作. Today, one mach ...

  5. 解决SQLite打开已有路径下的db问题

    最近遇到的需要加载已有路径下(sd card下)db的问题,找了一下资料,以下是解决的方法,仅供参考(转载自eoe): SQLiteOpenHelper 是Android框架为我们提供的一个非常好的数 ...

  6. NODE-windows 下安装nodejs及其配置环境

    相信对于很多关注javascript发展的同学来说,nodejs已经不是一个陌生的词眼.有关nodejs的相关资料网上已经铺天盖地.由于它的高并发特性,造就了其特殊的应用地位. 国内目前关注最高,维护 ...

  7. QT学习之窗口右键菜单

    #QT学习之窗口右键菜单 QWidget 及其子类都有右键菜单,主要因为其有两个与右键菜单相关联的函数: Qt::ContextMenuPolicy contextMenuPlicy() const ...

  8. IOS AFN请求 总结

    一.2大管理对象 1.AFHTTPRequestOperationManager* 对NSURLConnection的封装 2.AFHTTPSessionManager* 对NSURLSession的 ...

  9. 模线性方程&&中国剩余定理及拓展

    一.求解模线性方程 由ax=b(mod n) 可知ax = ny + b 就相当于ax + ny = b 由扩展欧几里得算法可知有解条件为gcd(a, n)整除d 可以直接套用扩展欧几里得算法 最终由 ...

  10. [18/12/01]super 关键字和final 关键字

    一.super 关键字 1.super是直接父类对象的引用.可以通过super来访问父类中被子类覆盖的方法或属性. 使用super调用普通方法,语句没有位置限制,可以在子类中随便调用. 代码示例: c ...