vue 当中的属性方法watch、computed和methods

主要类说一下：watch、computed和methods三个属性之间的对比

首先我们来创建一下案例结构：

  

      +
      =
      
  
  

1.watch监听数据变化

watch和methods平级，使用这个 属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数
该方法可以不用绑定事件，而methods当中 一般写的是触发函数，不再页面触发的函数写在与methods并列即可；

当然vue有和小程序onload一样页面初次进来就加载的函数，是create所以要是页面初次进来有需要赋值的data用来页面的填充可以使用这个函数，或者在这个函数当中去调用methods当中的韩式也是可以的；

watch函数的监听变化可以如下：

  

      +
      =
      
  

  

  




//当然watch也可以监听路由的变化，写法如下:






  
  
  
  
  
  



  

    登录
    注册
    

  

  

 1.computed计算属性的使用

computed和methods平级

在 computed 中，可以定义一些 属性，这些属性，叫做 【计算属性】， 计算属性的本质，就是 一个方法，只不过我们在使用 这些计算属性的时候，是把它们的名称直接当作属性来使用的；并不会把 计算属性当作方法去调用；

computed与data的区别

计算属性(computed，也是用来存储数据用的，但是和data属性相比还是有区别

区别就是，计算属性必须是一个由返回值的方法

但调用的方法是一样的：比如下面：

 

computed与methods的区别

    1 计算属性是基于它所依赖的数据进行更新，在有在相关依赖的数据发生变化了才会进行更新，而普通的方法每次都会执行

    2 计算属性是有缓存的，只要它所依赖的数据没有发生改变，后面的每一次访问计算属性中的值，都是之前缓存的结果，不会重复执行,而普通的方法每次都会执行。

 

需要注意的两单就是：

计算属性，在引用的时候，一定不要加 () 去调用，直接把它当作普通 属性去使用就好了；

只要 计算属性，这个 function 内部，所用到的 任何 data 中的数据发送了变化，就会立即重新计算 这个 计算属性的值

比如说，我们之前创建的实例：

  

      +
      =
      
  


  


//1.fullname没有在data中定义
//2.在compute定义fullname后直接return出去就好
///计算属性的求值结果，会被缓存起来，方便下次直接使用； 如果 计算属性方法中，所有的任何数据，
//都没有发生过变化，则不会重新对计算属性求值；

//也就是说上面firstname 或者lastname只有有一个属性发生了变化都会去重新计算fullname的值
//要是都没有发生变化 则不会重新计算

下面简单总结下：

• computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
• methods方法表示一个具体的操作，主要书写业务逻辑；
• watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体；

简单的说就是：

vue 中computed 和methods 在使用效果来看可以说是一样的，但是深入看还是不一样的。

区别就在于： computed 依赖缓存， methods 却不是。

怎么理解呢？

当Dom每次需要渲染computed的值，这个值已经处于缓存之中，不需要再重复的经历一遍计算过程，只有当computed依赖的数据变量发生变化，这个计算属性会自动更新，不需要渲染触发。

methods 的值被获取的时候就会每次都会重新经历一遍计算过程。

所以由此可以看出，computed和methods 的应用场景 和 计算过程的复杂程度有关， 如果计算过程复杂庞杂，而且计算属性会被经常调用（getter），那么最好使用缓存；如果，需要的值，计算简单，调用不频繁，实时性比较高（存在异步请求）,会比较适合methods
computed有缓存，若相关数据未发生变化，则不调用； 
methods无缓存，需要事件才能调用它（如点击等），绑定在页面或者其他； 
watch多用于数据交互频繁的内容。（例如定时axios从服务器获取数据）