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 是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变 ...
随机推荐
- 【动态规划】【单调队列】tyvj1305 最大子序和
http://blog.csdn.net/oiljt12138/article/details/51174560 单调队列优化dp #include<cstdio> #include< ...
- 重拾vue2
Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点 每个组件模板只能拥有一个根标签 子组件的数据具有作用域,以达到组件的复用 二. ...
- python函数式编程之匿名函数、装饰器、偏函数
匿名函数 当我们在传入函数时,有些时候,不需要显式的定义函数,直接传入匿名函数就行.如下面 lambda x: x*x 在python中,关键字lambda表示匿名函数,冒号前面的x表示函数参数 匿名 ...
- mysql函数的使用create function myfunction(...
use test //必须在某个数据库下面创建 delimiter $ //创建 CREATE FUNCTION myFunction(ln int, ls int) //参数这里不能加def ...
- [转]spring tx:advice 和 aop:config 配置事务
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www. ...
- CentOS 6.9配置网卡IP/网关/DNS命令详细介绍及一些常用网络配置命令（转）
一.IP 即时生效(重启后失效): ifconfig eth0 192.168.1.102 netmask 255.255.255.0 //添加IP地址 route add default gw 19 ...
- Web安全测试指南--文件系统
上传: 编号 Web_FileSys_01 用例名称 上传功能测试 用例描述 测试上传功能是否对上传的文件类型做限制. 严重级别 高 前置条件 1. 目标web应用可访问,业务正常运行. 2. 目 ...
- SecureCRT connecting VM Linux show error message: The remote system refused the connection.
SecureCRT connecting VM Linux show error message: The remote system refused the connection.
- 【web.xml】报错java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener
今天搭建新的项目,虽然在web.xml中配置了ContextLoaderListener以及IntrospectorCleanupListener 如下: web.xml中部分代码: <!-- ...
- RocketMQ 拉取消息-文件获取
看完了上一篇的<RocketMQ 拉取消息-通信模块>,请求进入PullMessageProcessor中,接着 PullMessageProcessor.processRequest(f ...