一、计算属性:

main.js:

var app = new Vue({
el: '#app',
data: {
math: 80,
physics: 90,
english: 30
},
computed: {
sum: function(){
return this.math + this.physics + this.english;
},
average: function(){
return Math.round((this.math + this.physics + this.english)/3);
}
}
});

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<table border="1">
<thead>
<td>学科</td>
<td>分数</td>
</thead>
<tr>
<td>数学</td>
<td><input type="text" v-model.number="math"/></td>
</tr>
<tr>
<td>物理</td>
<td><input type="text" v-model.number="physics"/></td>
</tr>
<tr>
<td>英语</td>
<td><input type="text" v-model.number="english"/></td>
</tr>
<tr>
<td>总分</td>
<td>{{sum}}</td>
</tr>
<tr>
<td>平均分</td>
<td>{{average}}</td>
</tr>
</table>
</div>
<script src="../lib/vue.js"></script>
<script src="./js/main.js"></script>
</body>
</html>

计算属性有两个特点:

1、只要计算属性中利用到的属性值发生改变它就会执行;

2、计算结果的值会缓存;

3、computed高级应用之:get、set

<p>{{fullName}}</p>
<p><button v-on:click="changeName">change</button></p>

<script>
var app = new Vue({
el: '#app',
data: {
firstName: "Samve",
lastName: "Duan"
},
computed: {
fullName: {
get: function(){
return this.firstName + " " + this.lastName;
},
set: function(newValue){//给fullName赋值为newValue时执行
this.firstName = newValue.split(" ")[0];
this.lastName = newValue.split(" ")[1];
}
}
},
methods: {
changeName: function(){
this.fullName = "xiao mi";//给计算属性fullName赋值
}
}
});
</script>

computed应用场景:

对于模板标签中任何复杂逻辑,你都应当使用计算属性;

你可以像绑定普通属性一样在模板中绑定计算属性。

二、侦听器:

虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
</head> <body>
<div id="app">
<input type="text" v-model="user.name"/>
<p>{{user.name}}</p>
</div> <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: 0,
user: {
id: 0,
name: 'Samve'
}
},
watch: {
msg: function(newMsg, oldMsg){
console.log('msg已被修改,newMsg:', newMsg, 'oldMsg:' + oldMsg);
},
user: {
handler: function(newValue, oldValue){
//handler默认执行函数,也可以去掉
console.log('user已经被修改,', newValue, oldValue);
},
deep: true//表示监视对象的属性变化,false则监视函数不执行,此时看不到newValue与oldValue的区别
//为了发现对象内部值的变化,可以在选项参数中指定deep:deep。注意:监听数组的变动不需要这么做
//主要用于监听属性是对象的属性变化
}
}
})
</script>
</body>
</html>

这其中有个问题,例如:

var vm=new Vue({
data:{
a:1,
b:{
c:1
}
},
watch:{
a(val, oldVal){//普通的watch监听
console.log("a: "+val, oldVal);
},
b:{//深度监听,可监听到对象、数组的变化
handler(val, oldVal){
console.log("b.c: "+val.c, oldVal.c);//但是这两个值打印出来却都是一样的
},
deep:true
}
}
})
vm.a=2
vm.b.c=2

a是一个普通的值,当a的值变化时会被监听到,b是一个对象,不能直接像a那么写,需要深度监听才能捕捉到,但是当我想去捕捉b对象中某一个值的变化时却发现,打印出来的两个值是一样的,如图:

这样就只能知道对象发生变化却不知道具体哪个值发生了变化,如果想监听对象某一个值得变化可以利用计算属性computed

var vm=new Vue({
data:{
b:{
c:1
}
},
watch:{
newValue(val, oldVal){
console.log("b.c: "+val, oldVal);
}
},
computed: {
  newValue() {
    return this.b.c
  }
}
})
vm.b.c=2

用watch去监听computed计算过的值就可以直接知道是哪个对应的值发生了变化,结果如图:

三、计算属性的实际应用:

<script>
var vm = new Vue({
el: '#computed_props',
data: {
kilometers : 0,
meters:0
},
methods: {
},
computed :{
},
watch : {
kilometers:function(val) {
this.kilometers = val;
this.meters = val * 1000;
},
meters : function (val) {
this.kilometers = val/ 1000;
this.meters = val;
}
}
}); // $watch 是一个实例方法
vm.$watch('kilometers', function(newValue, oldValue){
// 这个回调将在 vm.kilometers 改变后调用
document.getElementById("info").innerHTML = "修改前值为: " + oldValue + ",修改后值为: " + newValue;
})
</script>

四、计算属性与侦听器的比较:

计算属性顾名思义就是通过其他变量计算得来的另一个属性,fullName在它所依赖firstName,lastName这两个变量变化时重新计算自己的值。

另外,计算属性具有缓存。计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 lastName和firstName都没有发生改变,多次访问 fullName计算属性会立即返回之前的计算结果,而不必再次执行函数。

而侦听器watch是侦听一个特定的值,当该值变化时执行特定的函数。例如分页组件中,我们可以监听当前页码,当页码变化时执行对应的获取数据的函数。

①从属性名上,computed是计算属性,也就是依赖其它的属性计算所得出最后的值。watch是去监听一个值的变化,然后执行相对应的函数。

②从实现上,computed的值在getter执行后是会缓存的,只有在它依赖的属性值改变之后,下一次获取computed的值时才会重新调用对应的getter来计算。watch在每次监听的值变化时,都会执行回调。其实从这一点来看,都是在依赖的值变化之后,去执行回调。很多功能本来就很多属性都可以用,只不过有更适合的。如果一个值依赖多个属性(多对一),用computed肯定是更加方便的。如果一个值变化后会引起一系列操作,或者一个值变化会引起一系列值的变化(一对多),用watch更加方便一些。
③watch的回调里面会传入监听属性的新旧值,通过这两个值可以做一些特定的操作。computed通常就是简单的计算。

④watch和computed并没有哪个更底层,watch内部调用的是vm.$watch,它们的共同之处就是每个定义的属性都单独建立了一个Watcher对象。

总结:

1.如果一个数据依赖于其他数据,那么把这个数据设计为computed的

2.如果你需要在某个数据变化时做一些事情,使用watch来观察这个数据变化:watch属性强调自身值得改变前后的动作,所以才有回调xxx(newVal,oldVal)

computed是用data已经申明的变量可以计算出来的另一个变量用来渲染页面比较合适方便,而watch适合监听某个data中的变量来操作一些逻辑行为比较合适,比如监听某个变量改变然后发起异步请求。

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

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

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

  2. vue——计算属性和侦听器

    一.计算属性(data中的相关数据) 侦听多个属性时——计算属性 comuted. 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: & ...

  3. 15 Vue计算属性和侦听器

    计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的. 在模板中放入太多的逻辑会让模板过重且难以维护.例如: split = 字符中间空格分割, reverse= 反转 join('' ...

  4. vue 计算属性与侦听器

    侦听器:顾名思义,就是用来监听数据变化用的.侦听器在vue实例中,定义变量watch来使用.监听新值newVal和旧值oldVal,具体使用方法如下: <!DOCTYPE html> &l ...

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

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

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

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

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

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

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

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

  9. VueJs(7)---计算属性和侦听器

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

随机推荐

  1. jQuery UI =>jquery-ui.js中sortable方法拖拽对象位置偏移问题

    今天要处理sortable方法处理的对象,拖拽的时候,位置偏移的问题. 按理应该是鼠标在哪,对象就跟着在哪的 百度了一下问题,http://blog.csdn.net/samed/article/de ...

  2. CXF整合Sping与Web容器

    1.创建HelloWorld 接口类 package com.googlecode.garbagecan.cxfstudy.helloworld; import javax.jws.WebMethod ...

  3. hibernate07--关联映射

    单向的一对多关联 创建对应的实体类以及映射文件 package cn.bdqn.bean; /** * * @author 小豆腐 *街道对应的实体类 * *单向的多对一关联 */ public cl ...

  4. 10 windows server 2012R2 发布MVC框架网站注意事项

    1:网站编译完成之后,需要发布,网站中应包括的文件有:文件夹(bin,Views,Content等其他网站中涉及到的文件夹)文件(favicon.ico.Web.config.Global.asax) ...

  5. SpringBoot定时任务说明

    1. 定时任务实现方式 定时任务实现方式: Java自带的java.util.Timer类,这个类允许你调度一个java.util.TimerTask任务.使用这种方式可以让你的程序按照某一个频度执行 ...

  6. RunExecuteFile

    using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; using S ...

  7. 切分 拆分集合list的方式

    一般有两种,第一是sublist(),代码冗余效率低: 第二种: 引包自 com.google.common.collect.Lists 话不多说直接上实例: List<ContractMode ...

  8. css学习_css常见属性用法

    1.元素的显示模式 a.被动转换:浮动.绝对定位.固定定位(转换为行内块元素特性的模式---不设置宽度时,模式换行为行内块模式后宽度是内容宽度.) b.主动转换:display:block  / in ...

  9. vue设置初始对象时为空报错

    解决办法:在初始化时提供完整的数据结构

  10. js中触摸相关变量touches,targetTouches和changedTouches的区别

    touches: 当前屏幕上所有触摸点的列表; targetTouches: 当前对象上所有触摸点的列表; changedTouches: 涉及当前事件的触摸点的列表 通过一个例子来区分一下触摸事件中 ...