computed属性与methods、watched
一、计算属性
new Vue({data: {message: 'hello vue.js !'},computed: {reverseMessage: function () {return this.reverseMessage.split('').reverse().join('');}} });
标签使用:
<span>Reversed Message: {{ reverseMessage }}</span>
结果: Reversed Message: ! sj.euv olleh
计算属性的使用是为了避免插值中使用复杂的计算而导致难以维护。
使用计算属性可以将最终的结果值放入到插值中去显示
还可以通过 vm.reverseMessage
来直接调用获取其值,由于 compted:{}
中 reverseMessage
的结果是与 vm.message
绑定的,因此只要message
发生变化其值也会立即发生变化。
二、Methods
组件中有个属性专门用来定义组件内所使用到的方法,即:methods
,对象类型。
比如上面的例子:
new Vue({data: {message: 'hello vue.js !'},computed: {reverseMessage: function () {return this.reverseMessage.split('').reverse().join('');}},methods: {reverseMessage: function () {return this.reverseMessage.split('').reverse().join('');}}, });
三、计算属性和 methods
区别
计算属性和 methods
最大的区别就在于缓存机制。
method每调用一次就计算一次;computed只在msg更新时计算,计算结果存在缓存中。
计算属性是作为属性来使用的,只要其依赖的数据没发生变化它也不应该会有所变化(虽然其实现还是以函数形式),而对于 methods
其实是以函数形式定义并以函数形式调用,既然每次都是函数调用形式去获取值,那肯定会每次调用都会重新计算得出最新值返回。
两者使用场景:
- 计算属性:可以应对大型数据计算并且一般不会发生变动的数据,这样就避免了每次想要获取需要经过大量计算而又不会经常发生变化的值导致的每次都需要重新计算,消耗性能;
methods
:适用于数据变化性比较大,经常变动的内容,也可替代计算属性来使用。
四、Computed
属性 vs Watched
属性
计算属性和观察属性区别在于,观察属性一次只能观察一个属性然后针对该属性的变化做出响应,而计算属性却不一样,它可以同时检测几个属性,通过这几个属性的值返回计算的结果。
比如:(分别通过观察属性和计算属性来实现:更新人物姓名)
1、Watched
属性
var data = { firstName: 'li',lastName: 'zc',fullName: 'lizc', }; // 观察属性,观察的属性发生变化,会做出响应(比如:改变其他属性的值) watch: {firstName: function (newValue) {console.log('firstName ---------- new: ' + newValue);this.fullName = newValue + ' ' + this.lastName; },lastName: function (newValue) {console.log('lastName ---------- new: ' + newValue);this.fullName = this.firstName + ' ' + newValue;}, },
这里对 firstName
和 lastName
分别进行了观察,一旦有改变发生,就会去更新全名:fullName
值;
2、计算属性
通过计算属性的特性:只要被绑定的属性值不发生变化计算结果就不会变,被绑定的属性发生变化计算结果会根据变化后的最新值去计算最新的结果。
可以更方便的去实现上面通过 watch
属性来刷新全名的功能。
// 数据 var data = { firstName: 'li',lastName: 'zc',// fullName: 'lizc', 这里就不需要设置这个属性了,直接从计算属性结果中获取 }; // 计算属性,只要绑定的属性不变,会先使用缓存的值 computed: {fullName: function () {return this.firstName + ' ' + this.lastName;}, },
3、两者通用的标签书写方式:
<h1>Compted 属性 vs Watched 属性</h1> <label>Fist Name: </label><input type="text" v-model="firstName"><br/> <label>Last Name: </label><input type="text" v-model="lastName"><br/> <label>计算属性:</label><span>{{ fullName }}</span><br/> <label>观察属性:</label><span>{{ fullName }}</span><br/>
上面的计算和观察属性中的 fullName
有所不同
前者标签内的 fullName
插值使用的是 compted
属性中的 fullName
;
后者标签内的 fullName
插值使用的是 data
数据中的 fullName
属性;
最终结果其实都是一样的,见效果图:
五、计算属性的 setter
默认情况下计算属性是只有 getter
的,但是我们可以自己添加 setter
比如:
需要注意的是,这里 fullName
不能再是函数声明形式了,而需要采用对象方式
// 为计算属性添加 setter fullName: { // fullName: function (){} => fullName: {}get: function () {return this.firstName + ' ' + this.lastName;},set: function (newValue) {var name = newValue.split(' ');this.firstName = name[0];this.lastName = name[name.length - 1];}// return this.firstName + ' ' + this.lastName; },
这样我们也可以通过 vm.fullName = 'li zc
方式去修改绑定的属性了。
setter
里面可以做一些自定义的需求等等。
计算属性有个好处就是,可以同时检测多个属性并且可以根据这多个属性通过一定方式计算得出结果。
转载于:https://www.cnblogs.com/phoebeyue/p/9217511.html
computed属性与methods、watched相关推荐
- computed用发_Vue中的computed属性和nextTick方法
computed computed属性的实现原理 Vue实例初始化时,给data的每个属性(dataKey)都添加getter和setter方法 计算属性computed初始化时,提供的函数将作为对应 ...
- vue的 计算属性(computed)、methods、watched三者区别
计算属性 :和普通属性一样是在模板中绑定计算属性的,当data中对应数据发生改变时,计算属性的值也会发生改变. Methods:methods是方法,只要调用它,函数就会执行. 相同:两者达到的效果是 ...
- Vue中的computed属性
1.前言 本篇是Vue中最常用到的API之一computed属性,转载信息如下: 作者:gunelark 链接:https://www.cnblogs.com/gunelark/p/8492468.h ...
- Vue的watch和computed属性
Vue的watch属性 Vue的watch属性可以用来监听data属性中数据的变化 <!DOCTYPE html> <html><head><meta cha ...
- 侦听器watch及其和计算属性、methods方法的总结
目录 一.watch侦听器 二.侦听器的处理函数 解决深度监听新老值同源问题 三.侦听器的格式 1. 方法格式的侦听器 2.对象格式的侦听器 四.侦听器watch.计算属性.methods方法的总结 ...
- computed属性
应用背景 一个变量的值(运用到计算属性中去),依赖另一些数据计算而来的结果 语法 computed:{ "计算属性名"(){ return "值" } } co ...
- Vue中的(computed)计算属性和(watched)侦听属性以及(methods)方法
1. computed 计算属性可用于快速计算视图中显示的属性. 这些计算将被缓存,并且只在需要时更新. 他的方法不需要在data里面定义 它们完全是同步的. <div class=" ...
- computed 与methods , watched 的区别
computed 与watched 的区别: 异步请求 数据变化 使用watched ,计算属性不支持异步 计算一个值的结果 用 computed computed 与methods的区别: comp ...
- Vue中computed(计算属性)、methods、watch的区别
初学vue,阅读api后,发现Vue提供了多种逻辑处理的方法,单纯的方法methods,computed(计算属性)以及watch等,充分理解这三者的区别,才能写出更加健壮的Vue代码. 1.meth ...
最新文章
- 百度大脑发挥AI“头雁效应” 王海峰:在AI时代共同推动社会智能化升级
- Linux命令(2):free
- 贝叶斯算法对文本进行分类实例
- hive 去重 字符串_hive函数
- 指针在c语言中的运用,怎么理解C语言中的指针,如何运用?
- 所有手机品牌型号大全_【干货】史上最全SMT贴片机品牌、型号大全,赶紧看看你会几种???...
- 自动驾驶 10-4: 为什么是传感器融合 Why Sensor Fusion
- Eclipse创建并运行Java程序输出Hello World
- java recv failed,java.sql.SQLException: I/O Error: Software caused connection abort: recv failed
- CRC码计算及校验原理计算
- 发票查验系统帮你轻松解决发票管理各种问题
- VUE中nextTick( )函数思维导图
- 2020软考软件设计师--基础知识培训视频-任铄(小任老师)-专题视频课程
- 原生js实现多语言切换
- 知识图谱之社交网络分析(SNA)之python处理
- 【Word】批量修改Word 图片大小
- 如何使用Google的Draco项目
- 《缠中说禅108课》32:走势的当下与投资者的思维方式
- JavaEE中的网络基础知识和网络通信基础
- 5个好用的Excel技巧,一秒钟完成一个功能