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 是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变 ...
随机推荐
- 【枚举】【并查集】Gym - 101243F - Vitamins
题意:有n片药,有三种颜色,白色比红色重,红色比蓝色重,给你一些它们之间的重量关系,比如1>3,2=4之类,问你它们的颜色,如果没法判断的输出?. 先并查集把等于号全缩起来,然后按照大于号建图, ...
- 【推导】AtCoder Regular Contest 082 D - Derangement
题意:给你一个排列a,每次可以交换相邻的两个数.让你用最少的交换次数使得a[i] != i. 对于两个相邻的a[i]==i的数,那么一次交换必然可以使得它们的a[i]都不等于i. 对于两个相邻的,其中 ...
- 【找规律】【DFS】Gym - 101174H - Pascal's Hyper-Pyramids
二维下,如果把杨辉三角按照题目里要求的那样摆放,容易发现,第i行第j列的数(从0开始标号)是C(i+j,i)*C(j,j). 高维下也有类似规律,比如三维下,最后一层的数其实是C(i+j+k,i)*C ...
- Java异步编程——深入源码分析FutureTask
Java的异步编程是一项非常常用的多线程技术. 之前通过源码详细分析了ThreadPoolExecutor<你真的懂ThreadPoolExecutor线程池技术吗?看了源码你会有全新的认识&g ...
- Ubuntu 16.04下使用VMware安装CentOS 6.9然后在里面再安装KVM之后配置网桥无法上网的问题
别试了,这个问题无法解决,已经使用VMware安装了一层虚拟机,然后在里面再安装KVM,网络层次已经变了,即使配置了网桥同样无法上网. 可是这样试一下,不一定成功:把VMware的虚拟机绑定另一张物理 ...
- Describe in brief Databases and SQL Server Databases Architecture.
Databases- A database is a structured collection of data.- Database can be thought as simple data fi ...
- 修改activityMQ的登录账与密码
登录下管理员页面,ip根据实际的来 URL : http://127.0.0.1:8161/admin/ 默认账户密码都是admin 账户密码修改在conf文件夹下的jetty-realm.prope ...
- TDiocpCoderTcpServer 使用
TDiocpCoderTcpServer 使用 uses diocp_coder_tcpServer,utils_zipTools,diocp_tcp_server,diocp_task // 创建T ...
- socket心跳包机制实践与理解
实现Socket心跳包主要分为两大类,第一采用tcp自带的KeepAlive,第二是自定义心跳包,恰巧我在产品VICA中都使用过,下面就这两种心跳包机制谈谈个人的理解与感受. 首先第一种KeepAli ...
- nodejs + express访问静态资源
想访问一个资源的时候,发现访问不了 方法1.加上了这个就可以访问了,static参数为静态文件存放目录:__dirname代表目录 app.use(express.static(__dirname)) ...