vue.js使用之计算属性与方法返回的差别
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue@2.4.2"></script>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="app-6">
<p v-once v-if="see">{{ message }}</p>
<p v-if="see">{{ reversedMessage }}</p>
<p v-if="see">{{ reversedMessages() }}</p> <input v-model="message">
<ol> <todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item> </ol>
</div>
</body>
</html> <script>
var app6;
window.onload = function () { Vue.component('todo-item', {
template: '<li>{{todo.text}}</li>',
props:['todo']
})
app6 = new Vue({
el: '#app-6',
data: {
see: true,
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其他什么人吃的东西' }
], message: 'Hello Vue!'
},
//计算属性
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('') }
},
//方法返回
methods: {
reversedMessages: function () {
return this.message.split('').reverse().join('') }
} })
} </script>
注意 由于计算属性与method 与data中的属性都是保存在app6这个对象的一级属性里面 所以如果重名 后定义的将会覆盖前定义的对象
官方文档解释两者的差别
我们可以将同一函数定义为一个 method 而不是一个计算属性。对于最终的结果，两种方式确实是相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：
|
computed: {
now: function () {
return Date.now()
}
}
|
相比而言，只要发生重新渲染，method 调用总会执行该函数。
文档地址 https://cn.vuejs.org/v2/guide/computed.html
vue.js使用之计算属性与方法返回的差别的更多相关文章
- vue.js初探：计算属性和methods
在vue.js中,计算属性和methods方法的函数相同时,两者的最终执行结果都是相同的.然而不同的是,计算属性是基于它的依赖缓存.计算属性只有在它的相关依赖发生改变时才会重新取值.这就意味着只要 m ...
- Vue.js系列之四计算属性和观察者
一.计算属性 1.模版内的表达式非常便利,但是设计它们的初衷是用于简单计算的.在模版中放入太多的逻辑运算会让模版过重且难以维护,例如如下代码: <div id="example&quo ...
- Vue.js学习 Item5 -- 计算属性computed与$watch
在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需 ...
- Vue生命周期，计算属性、方法、侦听器
vue实例和组件都有生命周期函数,beforeCreate()实例或组件没有被创建的时候执行的钩子函数:created()是实例或组件被创建完成的时候执行的钩子函 数:beforeMount()函数是 ...
- Vue基础练习之计算属性、方法、监听器
<body> <div id="root"> {{fullName()}} {{age}} </div> <script> var ...
- vue的计算属性与方法的不同
计算属性 vue的模板里可以使用表达式,但是它的设计初衷是用于简单计算,在模板中放入太多逻辑会让模板过重且难以维护.例如: <div id="example"> {{ ...
- Vue 计算属性与方法
computed 基本使用 如果数据需要有复杂的计算,则可以在Vue实例中定义计算属性,再交由mustache进行渲染. computed内部其实是通过getttr实现的,所以不用加括号即可完成其下方 ...
- vue计算属性和方法的区别
计算属性: <div id="example"> <p>{{ now }}"</p> </div> <script& ...
- Vue的指令系统、计算属性和表单输入绑定
指令系统 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变 ...
随机推荐
- 【NTT】hdu1402 A * B Problem Plus
r·2^k+1 r k g 3 1 1 2 5 1 2 2 17 1 4 3 97 3 5 5 193 3 6 5 257 1 8 3 7681 15 9 17 12289 3 12 11 40961 ...
- Java学习笔记（9）
final关键字; (修饰符) final关键字的用法: final关键字修饰一个基本类型的变量时,该变量不能重新赋值,第一次的值为最终的. final关键字修饰一个引用类型变量时,该变量不能重新指 ...
- 时间同步Servname not supported for ai_socktype
rdate -s 129.7.1.66rdate: 129.7.1.66: Servname not supported for ai_socktype ntpdate 0.centos.pool.n ...
- 用GDB 调试Java程序
陈皓 http://blog.csdn.net/haoel 背景 想要使用GDB调试程序,就需要用GNU的编译器编译程序.如:用GCC编译的C/C++的程序,才能用GDB调试.对于Java程序也是 ...
- tomcat+mysql在Kubernetes环境
基于PV作为交换目录将应用最终拷贝入/tomcat/webapps目录 进入Docker后,修改/bin/catalina.sh,加入jdbc的类 \webapps\mytestsql\WEB-INF ...
- 二十四种设计模式：备忘录模式(Memento Pattern)
备忘录模式(Memento Pattern) 介绍在不破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态.这样以后就可将该对象恢复到保存的状态. 示例有一个Message实体类,某 ...
- [转]sql server transaction
本文转自: http://www.2cto.com/database/201208/146734.html sql事务(Transaction)用法介绍及回滚实例 事务(Transaction)是 ...
- vmware虚拟机 C硬盘空间 无损扩容 新测
摘自: http://hi.baidu.com/y276827893/item/78a351f427726549932af214 其实上面一步的话, 虚拟机设置 里选择磁盘,实用工具里也有这个功能的. ...
- Mybatis中动态SQL多条件查询
Mybatis中动态SQL多条件查询 mybatis中用于实现动态SQL的元素有: if:用if实现条件的选择,用于定义where的字句的条件. choose(when otherwise)相当于Ja ...
- 【日志处理】logstash性能优化配置
2W条数据用时4秒完成,每秒5000条左右,昨天是同时写入到文件和标准输出,看起来是output的问题,这块性能应当可以满足性能要求了 后继我会继续把结果输出到tcp,kafka来测试经过grok后的 ...