Vue中computed(计算属性)、methods、watch的区别
实现效果:字符串的动态拼接
methods方法
html:
<div id="app">
<!-- 监听到文本框数据的改变 -->
<input type="text" v-model="firstname" @keyup="getFullName">+
<input type="text" v-model="lastname" @keyup="getFullName">=
<input type="text" v-model="fullname">
</div>
js:
let vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
fullname: ''
},
methods: {
getFullName() {
this.fullname = this.firstname + '+' + this.lastname;
}
}
});
watch方法
- 值是函数:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值
- 值是函数名:不过这个函数名要用单引号来包裹
- 值是包括选项的对象:选项有三个
- 第一个handler:其值是一个回调函数。即监听到变化时应该执行的函数。
- 第二个是deep:其值是true或false;确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到。)
- 第三个是immediate:其值是true或false;确认是否以当前的初始值执行handler的函数。
var vm = new Vue({
data: {
a: ,
b:
},
watch: {
a: function (newVal, oldVal) {
console.log('new: %s, old: %s', newVal, oldVal)
},
// 方法名
b: 'someMethod',
// 选项的对象
c: {
handler: function (newVal, oldVal) { /* ... */ },
deep: true,
immediate: true
}
}
})
实例:
html:
<div id="app">
<!-- 监听到文本框数据的改变 -->
<input type="text" v-model="firstname">+
<input type="text" v-model="lastname">=
<input type="text" v-model="fullname">
</div>
js:
let vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
fullname: ''
},
watch: {
// 使用这个属性,可以监听 data 中指定数据的变化,
// 然后触发 watch 中对应的 function 处理函数
// 其中传参:第一个(newVal)是指改变后的值,第二个(oldVal)是原值
firstname: function (newVal, oldVal) {
// this.fullname = this.firstname + this.lastname;
this.fullname = newVal + '+' + this.lastname;
},
lastname: function (newVal, oldVal) {
// this.fullname = this.firstname + this.lastname;
this.fullname = this.firstname + '+' + newVal;
}
}
});
注意:虽然看起来 keyup 在这个例子中显得更简单,但是 watch 在一些无键盘点击操作时要监听改变会显得很有用。例如:监听路由地址改变 、购物车添加商品(因为数字变动不方便用事件监听)。还有 watch 不要用箭头函数的方式获取 newVal、oldVal,这样会导致 this 绑定错误
computed方法
html:
<div id="app">
<!-- 监听到文本框数据的改变 -->
<input type="text" v-model="firstname">+
<input type="text" v-model="lastname">=
<input type="text" v-model="fullname">
</div>
js:
let vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: ''
},
computed:{
// 在 computed 中,可以定义一些属性,这些属性叫做【计算属性】,
// 本质就是一个方法,只是使用这些计算属性的时候,是把他们的名称,
// 之间当做属性来使用,并不会把计算属性当做方法调用; // 注意 1:计算属性在引用的时候,不要加小括号调用,直接当做普通属性去使用
// 注意 2:只要计算属性,这个 function 中,所用的任何 data 中的数据发生了变化,就会
// 立即重新计算这个计算属性的值,否则不会对计算属性从新求值
// 注意 3:计算属性的求值结构,会被缓存起来,方便下次直接使用
fullname:function () {
return this.firstname+'+'+this.lastname
}
}
});
三者区别
- 计算属性(computed):一定要返回一个值,属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算,主要当做属性来使用,适合简单的计算;
- 方法(methods):表示一个具体的操作,主要书写业务逻辑,通过调用执行;
- 监听(watch):一个对象,键是需要观察的表达式,值是对应回调函数。主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作;可以看做 computed 和 methods 的结合体
Vue中computed(计算属性)、methods、watch的区别的更多相关文章
- Vue中computed计算属性
话不多说,使用方法直接上代码//在模板中调用computedTest这个函数,切记不要在函数后添加()<template> <div class="home"&g ...
- vue中computed计算属性与methods对象中的this指针
this 指针问题 methods与computed中的this指针 应该指向的是它们自己,可是为什么this指针却可以访问data对象中的成员呢? 因为new Vue对象实例化后data中的成员和c ...
- Vue学习之vue中的计算属性和侦听器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 怎样理解 Vue 中的计算属性 computed 和 methods ?
需求: 在 Vue 中, 我们可以像下面这样通过在 引号 或 双花括号 内写 js 表达式去做一些简单运算, 这是可以的, 不过这样写是不直观的, 而且在 html 中 夹杂 一些运算逻辑这种做法其实 ...
- Vue的computed计算属性是如何实现的
一个开始 有如下代码,full是一个计算属性,开始,他的值是'hello world',1s后,msg变成了‘I like’, full的值同步变成了'I like world';其原理解析来看一下. ...
- Vue之computed计算属性
demo.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...
- Vue中的计算属性与$watch
计算属性:在模板中绑定表达式是非常便利的,但是他们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么vue.js将绑定表达式限制为一个表达式. ...
- vue中computed、metfods、watch的区别
一.computed和methods 我们可以将同一函数定义为一个 method 或者一个计算属性.对于最终的结果,两种方式确实是相同的. 不同的是computed计算属性是基于它们的依赖进行缓存的. ...
- Vue中的计算属性和监听器(computed 与 watch)
react中数据是单向绑定的,而vue中数据是双向绑定的.为什么? 在react中,主要是通过setState 去改变state的值:而在vue中,会自动的触发set 与get 改变属性的值. 在vu ...
随机推荐
- spring boot 发布自动生成svn版本号
通过Jenkins构建发布spring boot项目时,常常有需求,需要把Svn的版本号更新到项目的版本上,通过有两种解决方案: 1. 通过shell命令对配置文件中的指定字符进行替换, 如: 配置文 ...
- ELK视频下载
Elasticsearch , Logstash, Kibana 相关视频下载地址:Beats.Elastic Stack.ElasticSearch.Kibana.Logstash下载地址:链接:h ...
- IDEA导入Eclipse 非Maven的Web项目
- Mysql学习(一)之简单介绍
数据库简介 数据库分类 关系型数据库:MySQL.Oracle.SQLServer.Access.db2.fox pro 文件型数据库:sqlite.mongodb 空间型数据库: 数据库分为两端 数 ...
- 关于ES5中的prototype与ES6中class继承的比较
ES5:继承: 1.ES5:继承 通过原型链实现继承.子类的prototype为父类对象的一个实例,因此子类的原型对象包含指向父类的原型对象的指针,父类的实例属性成为子类原型属性 2.ES6 的继承 ...
- dubbo学习笔记一(服务注册)
相关的资料 官方文档 官方博客 项目结构 项目说明 [lesson1-config-api] 是一个接口工程,编译后是jar包,被其他工程依赖 [lesson1-config-2-properties ...
- php连接阿里云mysql
1.开启Mysql远程访问端口 现在服务器控制台,安全组那边开启3306端口 2.修改Mysql配置文件 vim /etc/mysql/mysql.conf.d/mysqld.cnf,找到bind-a ...
- ERA-interim
数据介绍整理中... https://software.ecmwf.int/wiki/display/UER/Time-integrated+surface+solar+radiation+downw ...
- QT 给工程添加图片
先打开如图的打开方式 然后我们看到以下的画面,选择下面的 然后我们选择如下:,这里我们要注意我们的图片资源有一定要和QRC资源在同一个文件夹中 之后我们通过在stylesheet里面设置来使用我们添加 ...
- zabbix监控,微信报警
微信告警 访问这个地址创建企业微信 https://work.weixin.qq.com/