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 是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变 ...
随机推荐
- CSS3新增
1 CSS3 的选择器 1.1 基本选择器 tagName .className #idName * slector,selector,selector 1.2 层级选择器 selector1 sel ...
- ES6 函数参数的默认值
基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采取变通的方法. function log(x,y){ y = y||'world'; console.log(x,y); } log('k ...
- 一段javascript设计模式应用场景
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- c++中const使用详解
const在c++中是一个关键字,它限定一个变量不允许被改变.使用const在一定程度上可以提高程序的安全性和可靠性,另外,在观看别人代码的时候,清晰理解const所起的作用,对理解对方的程序也有一些 ...
- 微软工具ILMerge
释义 ILMerge是一个可用于将多个.NET程序集合并为单个程序集的实用程序. ILMerge接收一组输入程序集并将它们合并到一个目标程序集中.输入程序集列表中的第一个程序集是主程序集. 当主组件是 ...
- ubuntu系统使用dnw下载程序
转:http://blog.chinaunix.net/uid-22030783-id-3350840.html 获得dnw4linux.tar.bz2 源码包,可在xcembed论坛下载:http: ...
- 基本C库函数
当编写驱动程序时,一般情况下不能使用C标准库的函数.Linux内核也提供了与标准库函数功能相同的一些函数,但二者还是稍有差别. 类别 函数名 功能 函数形成 参数 描述 字符串转换 simple_st ...
- js禁止复制粘贴
1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键,其实是禁止快捷菜单,因为不光右键可以弹出这个菜单,键盘上空格 ...
- fmri 分析数据 fsl & spm 两大平台比对
基于下面这份ppt:Comparing SPM and FSL, by lChris Rorden fsl & spm都是免费的,都很受欢迎.spm更受欢迎. 两者的区别在于何时利用norma ...
- java >>> 和 >>>=的区别
java >> 和 >>> 以及 >>>= 的区别 可能大家都知道java中>> 和 >>> 的区别,那这里我也啰嗦一下, ...