vue中的computed、watch(immediate、deep)区别

本文主要是介绍vue中的computed、watch(immediate、deep)区别，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

vue中的computed

注意：vue实例中data中的属性名不能和methods、computed中的属性名重名。

computed是vue实例中的计算属性，存在缓存机制，只有它所依赖的属性值发生变化才会重新计算，否则默认走缓存。这样节省性能。

当一个属性依赖多个属性或多个属性的变化会影响另一个属性时，这个属性可以放在computed中进行处理。

当一个属性依赖多个属性时一般可以采用computed方式，当该属性依赖的其他属性发生变化时，会立即调用该属性的get方法重新计算当前的属性值并重新渲染页面。

一般放在computed中属性可以为其添加get和set方法。如果只需要对该属性设置get方法可以简写。

computed与methods的区别：computed是计算属性，默认走缓存，当依赖的属性发生变化，就会执行对应的getter方法，如果多次访问同一个属性不需要多次执行该函数，它会走缓存。但是methods中定义的函数一般是在调用时执行，不存在缓存机制。

<div id="app"><!-- 当input点击时,执行的事件函数获取的还是checkbox框没有被点击前的值，所以此处要用change事件，不能使用click事件 --><input type="checkbox" v-model="selectAll">全选{{selectAll}}<br/><!--上面代码中虽然获取了两次selectAll的值，但是实际代码执行时只执行了一次selectAll的get方法，因为computed计算属性默认走缓存--><ul><li v-for="a in arr"><input type="checkbox" v-model="a.isSelected">{{a.name}}</li></ul>
</div>

<script src="node_modules/vue/dist/vue.js"></script>
<script>let vm = new Vue({el: "#app",//元素选择器data: {//data中的属性不能和methods、computed中重名arr:[{isSelected:true,name:"手机"},{isSelected:false,name:"电脑"}]},computed:{selectAll:{get(){// 函数中this指向当前实例，当这个get函数变为箭头函数时this指向window，此时可以给这个箭头函数传递一个形参，该形参就是vue实例return this.arr.

这篇关于vue中的computed、watch(immediate、deep)区别的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---