vue computer watch区别？vue中computer与watch区别

大家好，今天小编来为大家解答vue computer watch区别这个问题，vue中computer与watch区别很多人还不知道，现在让我们一起来看看吧！

本文目录

1. vue中computer和watch的区别
2. vue中,计算属性 computed 和 watch 的区别
3. vue中method,computed,watch有什么区别

vue中computer和watch的区别

computed用于处理复杂的逻辑运算，主要和methods储存方法来进行区分；methods储存方法，computed储存需要处理的数据值；methods每次都会调用，computed有缓存机制，只有改变时才执行，性能更佳。

watch顾名思义，用于监听数据变化，其中可以监听的数据来源有三部分：props、data、computed内的数据；watch提供两个参数（newValue，oldValue），第一个参数是新值，第二个参数保存旧值；

1.支持缓存，只有依赖数据发生改变，才会重新进行计算

2.不支持异步，当computed内有异步操作时无效，无法监听数据的变化

3.computed属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过的数据通过计算得到的

4.如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed

5.如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

1.不支持缓存，数据变，直接会触发相应的操作；

2.watch支持异步；

3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；

4.当一个属性发生变化时，需要执行对应的操作；一对多；

vue中,计算属性 computed 和 watch 的区别

methods，watch和computed都是以函数为基础的，但各自却都不同；

不存在缓存，执行一次运行一次，执行n次，运行n次

使用场景：当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性

计算属性computed是基于data中数据进行处理的，data数据变化，他也跟着变化

当data中数据没有发生改变时，我们调用computed中函数n次，只会进行缓存（执行一次）

每个计算属性都包含两个set、get属性

使用场景：数据变化时执行异步或开销较大的操作，可以随时修改状态的变化

watch:类似于监听机制+事件机制。

在大部分情况下我们都会使用computed，但如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择。watch为一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。

注，上面的watch方法是当改变值时候，才会触发监听事件，但是我们想刚进入页面时候，就触发监听事件，就要用handler（）方法

1，handler（）：当页面刚进入时，自动绑定watch事件，不需要进行触发

注：

2，第二种

vue中method,computed,watch有什么区别

通俗来讲，

computed是在HTMLDOM加载后马上执行的，如赋值；

而methods则必须要有一定的触发条件才能执行，如点击事件；

watch呢？它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。

所以他们的执行顺序为：默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再watch。

下面的例子可以做为说明。

computed属性vswatched属性：Vue确实提供了一种更通用的方式来观察和响应Vue实例上的数据变动：watch属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用watch——特别是如果你之前使用过AngularJS。然而，通常更好的想法是使用computed属性而不是命令式的watch回调。

关于vue computer watch区别，vue中computer与watch区别的介绍到此结束，希望对大家有所帮助。