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 是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变 ...
随机推荐
- kong结合consul
早期版本 ./etcdctl ls / --recursive /name /name1 /name1/wyc /name1/wu /name1/chao /name1/chao/age ------ ...
- mysql函数的使用create function myfunction(...
use test //必须在某个数据库下面创建 delimiter $ //创建 CREATE FUNCTION myFunction(ln int, ls int) //参数这里不能加def ...
- hihocoder 1288 : Font Size （微软2016校园招聘4月在线笔试）
hihocoder 1288 笔试第一道..wa了好几次,也是无语..hihocoder错了不会告诉你失败的时候的测试集,这样有时候就很烦.. 遍历所有的字体,从min(w,h)开始逐渐变小开始遍历. ...
- NHibernate官方文档中文版--拦截器和事件（Interceptors and events）
对于应用程序来说,能够对NHibernate内部发生的事件做出响应式很有用的.这能够有助于实现一些类的功能或者扩展NHibernate的功能. 拦截器 IInterceptor接口提供了应用程序ses ...
- 控制台+Owin搭建WebAPI接口服务
当没有iis环境.想快速启动几个api接口测试又觉得新建一个api项目麻烦?来使用控制台做宿主,快速改几个api测试吧! 1.新建控制台项目 2.安装以下相关依赖 Microsoft.AspNet.W ...
- redis节点管理-新增主节点
原文:http://blog.sina.com.cn/s/blog_53b45c4d0102wg11.html 集群节点添加 节点新增包括新增主节点.从节点两种情况.以下分别做一下测试: 1.新增主节 ...
- 通配置文件的方式控制java.util.logging.Logger日志输出
转自:http://zochen.iteye.com/blog/616151 简单的实现了下利用JDK中类java.util.logging.Logger来记录日志.主要在于仿照log4j方式用配置文 ...
- sql server阻塞（block）处理
sp_who2 ACTIVE --从下图可知spid = 65进程被76阻塞 --或 * FROM sys.sysprocesses WHERE blocked <> 0 ) --查看阻塞 ...
- 两张表的笛卡尔积用sql语句
第一个表的行数乘以第二个表的行数等于笛卡尔积结果集的大小SELECT * FROM table1 CROSS JOIN table2
- 破解MyEclipse2015 stable3.0
整个破解过程最好断网: 1.安装好MyEclipse2015 stable3后,打开设置好工作目录后,退出.2.将plugins文件夹中的文件拷贝到myeclipse安装目录的plugins文件夹下, ...