计算属性

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. mif文件C语言生成

    1:正弦波 用函数 sin (x * π/180°) /************************************************** 正弦波 mif 生成 ********** ...

  2. March 24 2017 Week 12 Friday

    Our lives are brief, that is why it's important to search for meaning. 人生短暂,所以才要寻找它的意义. What can we ...

  3. html css：背景图片链接css写法

    图片作为背景,并且是链接的写法.例如网站的logo图片.例如:土豆的logo图片 <a title="土豆网 tudou.com 每个人都是生活的导演" href=" ...

  4. IOS JPush 集成步骤(极光远程推送解决方案,支持android和iOS两个平台)

    ●  什么是JPush ●  一套远程推送解决方案,支持android和iOS两个平台 ●  它能够快捷地为iOS App增加推送功能,减少集成APNs需要的工作量.开发复杂 度 ●  更多的信息,可 ...

  5. SP348 EXPEDI - Expedition

    嘟嘟嘟 水贪心. 当经过一个加油站的时候,记下这个加油站能加的油,然后没油的时候从经过的加油站中选择加油最多的加. #include<cstdio> #include<iostrea ...

  6. 2018.11.25 struts2与OGNL表达式的结合（高级）

    两者的结合原理 底层源码分析 栈原理 先进后出 我们的valuestack其实是一个接口 在实现类中有这个参数 CompoundRoot的类继承的是ArrayList,具体实现弹栈和压栈的方法具体实现 ...

  7. NW.js开发环境的搭建

    写在前面: 之前一直在找关于在mac怎么搭建nw.js的开发环境,苦于自己也没有很深入的理解,其实看看官方文档就差不多知道mac下要怎么整了. 官方文档的图: 正题开始: 先去下载一个nw.js的安装 ...

  8. <jsp:include>和<%@include file=""%>的区别（简单了解）

    简单了解 include指令是编译阶段的指令,即include所包含的文件的内容是编译的时候插入到JSP文件中,JSP引擎在判断JSP页面未被修改,否则视为已被修改.由于被包含的文件是在编译时才插入的 ...

  9. 旧文备份:FFTW介绍

    1. FFTW介绍 FFTW由麻省理工学院计算机科学实验室超级计算技术组开发的一套离散傅立叶变换(DFT)的计算库,开源.高效和标准C语言编写的代码使其得到了非常广泛的应用,Intel的数学库和Sci ...

  10. 读取静态的json文件

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...