Vue.js中 computed 和 methods 的区别
官方文档中已经有对其的解释了,在这里把我的理解记录一下Vue中的methods、watch、computed
computed
的使用场景
HTML模板中的复杂逻辑表达式,为了防止逻辑过重导致不易维护,都应当把相关逻辑放入计算属性。
比如这种
<p>Reversed message: "{{ message.split('').reverse().join('') }}"</p>
</div>
在这个地方,模板不再是简单的声明式逻辑。这里是想要显示变量 message
的翻转字符串,而这种包含复杂逻辑处理的表达式,都应当使用计算属性。
computed
和 methods
的区别
1. computed是属性调用,而methods是函数调用
这意味着在HTML的插值
里
- computed定义的方法是以属性访问的形式来调用,如
{{reversedMessageComputed}}
- methods定义的方法,则要加上
()
来调用,如{{reversedNameMethod()}}
,否则视图中会渲染出如下内容 function () { [native code] }
2. computed带有缓存功能,而methods不是
这里我引用一下官方文档的说明
计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。
```<!-- html -->
<div id="root">
<p>Reversed message: "{{ reversedNameMethod() }}"</p>
<p>Reversed message: "{{ reversedMessageComputed }}"</p>
</div>
```
// javascript
var vm = new Vue({
el: '#root',
data: {
name: 'Alex',
message: 'Hello'
},
methods: {
reversedNameMethod: function () {
return this.name.split('').reverse().join('')
}
},
computed: {
// 计算属性的 getter
reversedMessageComputed: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
上面的例子中,缓存意味着只要 message
还没有发生改变,多次访问 reversedMessageComputed
计算属性会立即返回之前的计算结果,而不必再次执行函数。而 reversedNameMethod()
方法,每次调用都会重新执行函数。
但同时需要注意,这也同样意味着下面的计算属性将不再更新,因为 Date.now()
不是响应式依赖:
// javascript
computed: {
now: function () {
return Date.now()
}
}
now
的值将在Vue实例化时生成,并且不再改变。
相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。
computed其他说明
computed
和methods
不可以重名- Vue会把
methods
和data
里的东西,全部代理到Vue生成的对象中,这会将computed中重名属性覆盖
- Vue会把
来源:https://segmentfault.com/a/1190000017920016
Vue.js中 computed 和 methods 的区别的更多相关文章
- 实例分析Vue.js中 computed和methods不同机制
在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 comput ...
- vue计算属性computed和methods的区别
computed和methods的区别 在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue. com ...
- Vue中 computed 和 methods的区别
涉及到计算部分的时候,计算属性是基于它们的依赖进行缓存的,如果说值不变,那么它就不会去重新执行,只有当值发生了改变,它才会去重新执行一次,其它时候它都是缓存的.而方法则会反复计算处理.二者之间的差距就 ...
- vue.js中compted与model的区别
在p便签内写的{{reversemessage}}方法,若js里对应的函数为computed则不需要加上括号 若js里对应的函数为model则应该将{{reversemessage}}改为{{reve ...
- Vue.js 计算属性computed和methods的区别
在vue.js中,有methods和computed两种方式来动态当作方法来用的 如下: 两种方式在这种情况下的结果是一样的 写法上的区别是computed计算属性的方式在用属性时不用加(),而met ...
- vue中computed与methods的异同
在vue.js中,有methods和computed两种方式来动态当作方法来用的 如下: 两种方式在这种情况下的结果是一样的 写法上的区别是computed计算属性的方式在用属性时不用加(),而met ...
- vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)
_ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...
- vue.js 中 data, prop, computed, method,watch 介绍
vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...
- Vue.js中使用select选择下拉框
在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...
随机推荐
- JS多级树结构写法
效果: 一.布局: <div class="three_tree"> <div class="tree_title_cut"> < ...
- Number()转换规则
转换规则: Number(): 1)如果是Boolean值,true和false将分别转换为1和0. 2)如果是数字值,只是简单的传入和返回. 3)如果是null值,返回0. 4)如果是undefin ...
- JavaScript数组求和
<script> function demo(){ var d=document.getElementsByTagName("input")[0].value.spli ...
- 001Angular2环境准备
01.安装Node.js 和 npm 安装完成后,在命令行依次使用node -v 和 npm -v可以看到版本号. 02.安装cnpm npm需要连接谷歌服务器,国内不能正常使用,需安装cnpm.命令 ...
- CSS如何设置换行文字自动对齐
CSS如何设置换行文字自动对齐 如图所示: 代码实现如下: <ul class='warn-page-content'> <li> ...
- Android存储扩展学习-----应用的清除数据和清除缓存
前几天和朋友聊到了APP清除数据这块,聊到了清除数据都会清掉哪些数据,我们每个人的手机在”设置–>应用管理”里面,选择任意一个App,都会看到两个按钮,一个是清除缓存,另一个是清除数据,那么当我 ...
- swftools 将pdf转换swf常见问题说明
swftools将PDF转成swfSWFTools提供了一系列将各种文件转成swf的工具: font2swf.exe gif2swf.exe jpeg2swf.exe pdf2swf.exe png2 ...
- Java反射创建带构造参数的类 并执行方法
部分代码 public void go(ServletRequest request,ServletResponse response){ String methodName = "inde ...
- 【java开发系列】—— java输入输出流
前言 任何语言输入输出流都是很重要的部分,比如从一个文件读入内容,进行分析,或者输出到另一个文件等等,都需要文件流的操作.这里简单介绍下reader,wirter,inputstream,output ...
- 解决SQLite打开已有路径下的db问题
最近遇到的需要加载已有路径下(sd card下)db的问题,找了一下资料,以下是解决的方法,仅供参考(转载自eoe): SQLiteOpenHelper 是Android框架为我们提供的一个非常好的数 ...