1、计算属性适用的情形
我们可能会有这样的需求,一个数据属性在它所依赖的属性发生变化时,也要发生变化,这种情况下,我们最好使用计算属性。
例如在下面这个例子中,如果我们使用监听函数,代码就会变得有点冗余。

<div id="demo">{{ fullName }}</div>

var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})

fullName属性依赖于firstName和lastName,这里有个缺点就是,无论firstName或lastName其中的任何一个发生改变时,都要调用不同的监听函数来更新fullName属性。但是当我们使用计算属性时,代码就会变得更加简洁。

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
}),
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
} 2、监听器watch适当的情形 watch函数适用于,当数据发生变化时,执行异步操作或较大开销操作的情况。来看下面的例子: <div id="watch-example">
<p>
Ask a yes/no question:
<input v-model="question">
</p>
<p>{{ answer }}</p>
</div> <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
el: '#watch-example',
data: {
question: '',
answer: 'I cannot give you an answer until you ask a question!'
},
watch: {
// 如果 `question` 发生改变,这个函数就会运行
question: function (newQuestion, oldQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.getAnswer()
}
},
methods: {
// `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
// 在这个例子中,我们希望限制访问 yesno.wtf/api 的频率
// AJAX 请求直到用户输入完毕才会发出。
function () {
if (this.question.indexOf('?') === -1) {
this.answer = 'Questions usually contain a question mark. ;-)'
return
}
this.answer = 'Thinking...'
var vm = this
axios.get('https://yesno.wtf/api')
.then(function (response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = 'Error! Could not reach the API. ' + error
})
},
// 这是我们为判定用户停止输入等待的毫秒数
500
)
}
})
</script>

这时,我们只要监听fullName属性就行,至于firstName或lastName属性的任何改变,我们都可以通过fullName的getter()方法得到最终的fullName值。
另外需要注意的是,计算属性可以同时设置getter()、setter()方法。例如:

在这个例子中,当question数据属性发生改变时,就会调用getAnswer()方法。该方法被调用后,会执行一个异步请求。最终将得到的结果赋给answer属性。这是计算属性所代替不了的。
 ————————————————
版权声明:本文为CSDN博主「追梦111」的原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/yangkaige111/article/details/80574858

Vue中计算属性(computed)和监听属性函数watch的比较的更多相关文章

  1. vue中给window添加滚动监听无效的解决方案

    原文链接: 点我 页面中有这么一个需求,当页面滚动到一定高度之后,页面中的某些元素进行吸顶,固定到顶部位置,或者是滚动到一定程度进行更新数据的操作.我相信不少网友查阅过类似的资料,网友给出的解决方案, ...

  2. vue computed计算属性和watch监听属性解疑答惑

    computed计算属性     计算属性类似于方法,用于输出data中定义的属性数据的结果,data数据变化时,计算属性的结果会同步变化,需要注意的是计算属性不可与data定义的属性同名. 相比于方 ...

  3. vue中进行窗口变化的监听

    今天vue项目中用到的元素的宽度依赖与窗口的宽度,所以在进行宽度设置的时候涉及到窗口的变化,因为元素的宽度要随着窗口变化 分成几个步骤来实现这一过程 1.首先元素的宽度依赖与窗口的宽度,就需要有接受窗 ...

  4. 关于Vue中,使用watch同时监听两个值的实现方法

    1. 先在computed中,用需要监听的两个值(start.end)定义一个对象(dateRange) computed: { dateRange () { const { start, end } ...

  5. Vue计算属性和监听属性

    一.计算属性 计算属性关键词: computed.计算属性在处理一些复杂逻辑时是很有用的. 可以看下以下反转字符串的例子: <div id="app"> {{ mess ...

  6. vue中的computed(计算属性)和watch(监听属性)的特点,以及深度监听

    //计算属性是根据data中已有的属性,计算得到一个新的属性, <div>全名:{{fullName}}</div> 创建计算属性通过computed关键字,它是一个对象 计算 ...

  7. Blazor和Vue对比学习(基础1.8):Blazor中实现计算属性和数据监听

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

  8. Vue ---- 表单指令 条件指令 循环指令 分隔符 过滤器 计算属性 监听属性

    目录 案例讲解: 一. 表单指令 1.重点: 补充 2.单选框 3.单一复选框 4.多复选框 二 . 条件指令 v-if/v-show ... v-clock 三 . 循环指令 string arra ...

  9. vue条件语句、循环语句、计算属性、侦听器监听属性

    因为 v-if 和v-for是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v-if.最终 ...

随机推荐

  1. CentOS7.x上轻量级TCP转发工具rinetd的安装配置

    一.实验背景 Linux下端口转发一般都使用iptables来实现,使用iptables可以很容易将TCP和UDP端口从防火墙转发到内部主机上. 如果需要将流量从专用地址转发到不在您当前网络上的机器上 ...

  2. C++ FAQ

    空类 class A { }; // sizeof(A) = 1 空类的大小之所以为1,因为标准规定完整对象的大小>0,否则两个不同对象可能拥有相同的地址,故编译器会生成1B占位符. 那么两个对 ...

  3. python sort和sorted的区别

    sort 与 sorted 区别: sort 是应用在 list 上的方法,使用方法为 list.sort(),是对原有列表进行操作,改变原有列表的排序: sorted 可以对所有可迭代的对象进行排序 ...

  4. C语言程序设计实验报告三

    C程序设计实验报告 姓 名:张美盛 实验地点:家 实验时间:2020年3月29日 实验项目:4.3.1 If语句的应用 4.3.2 switch-case的应用 4.3.3 switch-case嵌套 ...

  5. mybatis添加信息自动生成主键

    一.使用Oracle数据库 举例:添加员工的时候自动生成主键 1.在dao接口中声明方法 2.在mapper中实现该方法 需要先在数据表中创建序列 3.测试 注意:在调用过save方法之后,emp对象 ...

  6. 【Hadoop离线基础总结】oozie调度hive

    目录 1.拷贝hive的案例模板 2.编辑hive模板 3.上传工作文件到hdfs 4.执行oozie的调度 5.查看调度结果 1.拷贝hive的案例模板 cd /export/servers/ooz ...

  7. 【poj 2406】Power Strings 后缀数组DC3模板 【连续重复子串】

    Power Strings 题意 给出一个字符串s,求s最多由几个相同的字符串重复而成(最小循环节的重复次数) 思路 之前学习KMP的时候做过. 我的思路是:枚举字符串的长度,对于当前长度k,判断\( ...

  8. Web(4)servlet

    一.servlet.GenericServlet.HttpServlet 1.servlet具有四个生命周期方法 特性:单例模式,线程不安全,效率高 2.servletConfig接口对应根元素对应的 ...

  9. python 基础知识1

    一.编译型与解释性区别: 编译型:一次性将全部的代码编译成二进制文件.(如:C.C++) 优点:运行效率高 缺点:开发速度慢,不能跨平台. 解释型:当程序运行时,从上至下一行一行的解释成二进制.(如p ...

  10. neo4j 图数据库安装及介绍

    neo4j 图数据库安装及介绍 一.neo4j图数据库介绍 图数据库,顾名思义就是利用了"图的数据结构来作为数据存储逻辑体现的一种数据库",所以要想学好图数据库当然需要了解一些关于 ...