在刚开始实习的时候,突然发现我对computed, methods, watch之间的区别还不是非常透彻,只知道它们大概的含义和用途。下面是我整理的这三个属性的区别和联系。
computed:
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:
<div id="example">{{ message.split('').reverse().join('') }}</div>
在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量message的翻转字符串。当你想要在模板中的多处包含此翻转字符串时,就会更加难以处理。
所以,对于一些复杂逻辑,你应当使用计算属性。优化后:
<div id="example"><p>Original message: "{{ message }}"</p><p>Computed reversed message: "{{ reversedMessage }}"</p></div>var vm = new Vue({el: '#example',data: {message: 'Hello'},computed: {// 计算属性的 getterreversedMessage: function () {// `this` 指向 vm 实例return this.message.split('').reverse().join('')}}})
结果:
Original message: "Hello"
Computed reversed message: "olleH"
methods:
methods是Vue提供的逻辑运算的单元,和其它语言中的方法功能一致。对于上述的功能,也可以用methods来实现:
<p>Reversed message: "{{ reversedMessage() }}"</p>// 在组件中methods: {reversedMessage: function () {return this.message.split('').reverse().join('')}}
computed和methods的区别:
1.监听相关值的变化: methods方法执行一次就结束了,如果后面message的值再次变化了,reversedMessage不会重新被渲染;而computed就不同了,当关联属性message发生变化后,computed会重新执行一遍,把根据变化后的属性值计算出来的新值重新渲染到页面上。
2.计算缓存:computed翻译过来是计算属性,所以它可以被当成一个属性来使用(而上面computed被当成方法来使用,说明computed就像光一样,具有“波粒二象性”。computed是不是很厉害!),属性可以使用的地方它都可以使用(当然方法可以使用的地方它也可以):也就是说,计算属性不仅可以在模板中使用,在js代码中也可以使用。缓存体现在:计算属性只有当所关联的属性变化时,它才会重新计算一遍,而不变的时候,它一直取上次计算的值,这是与methods最大的区别之处。
当然,methods也有自己的优势,比如methods在被调用时可以传入参数,且methods可以进行更加复杂的逻辑运算。有些场景,用computed并不适合,如:
computed: {now: function () {return Date.now()}}
这种情况下,Date无法做到响应式计算更新
watch:
监听器,监控相应的属性,当属性发生变化,调用对应的回调函数
var vm = new Vue({data: {a: 1,b: 2,c: 3,d: 4,e: {f: {g: 5}}},watch: {a: function (val, oldVal) {console.log('new: %s, old: %s', val, oldVal)},// 方法名b: 'someMethod',// 该回调会在任何被侦听的对象的 property 改变时被调用,不论其被嵌套多深c: {handler: function (val, oldVal) { /* ... */ },deep: true},// 该回调将会在侦听开始之后被立即调用d: {handler: 'someMethod',immediate: true},// 你可以传入回调数组,它们会被逐一调用e: ['handle1',function handle2 (val, oldVal) { /* ... */ },{handler: function handle3 (val, oldVal) { /* ... */ },/* ... */}],// watch vm.e.f's value: {g: 5}'e.f': function (val, oldVal) { /* ... */ }}})vm.a = 2 // => new: 2, old: 1
注意:不应该使用箭头函数来定义 watcher 函数 理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例。
computed和watch的区别:
首页明白一点:watch是监控影响因素(影响要使用属性的因素),而computed是计算属性,对应的函数里包含影响因素。
当然,当computed和watch都能实现时,优先选用computed,因为简单。但有些情况,没法使用computed来实现,比如当遇到复杂计算逻辑或者异步调用时,如:
<div id="watch-example"><p>Ask a yes/no question:<input v-model="question"></p><p>{{ answer }}</p></div><script>var watchExampleVM = new Vue({el: '#watch-example',data: {question: '',answer: 'I cannot give you an answer until you ask a question!'},watch: {question : function (newValue, oldValue){if (this.question.indexOf('?') === -1) {this.answer = 'Questions usually contain a question mark. ;-)'return}this.answer = 'Thinking...'var vm = thissetTimeout(function () {vm.answer = "Vue2"},1000)}}})
上面用watch可以实现,但是如果用computed就不能实现了,如下:
<div id="watch-example"><p>Ask a yes/no question:<input v-model="question"></p><p>{{ answer }}</p></div><script>var watchExampleVM = new Vue({el: '#watch-example',data: {question: '',},computed: {answer: function () {if (this.question.indexOf('?') === -1) {return 'Questions usually contain a question mark. ;-)'}else{setTimeout(function () {return "Vue2"},1000)}},}})
发现:answer并没有变为Vue2, 也就是说它不会等到异步调用结束才返回值,这是因为计算属性本质还是属性,如果不能立马返回,那么在这空档期该显示什么呢?所以计算属性如果不能立马返回,那么就返回空值。
ps:创作不易,如有帮助,多多点赞,谢谢支持
如果觉得《详解Vue: computed methods watch的区别和联系》对你有帮助,请点赞、收藏,并留下你的观点哦!