8vue中得监听属性：watch--- /////watchcomputedmethods得区别

Posted 2020-12-10 taozhibin

1、vue中得监听属性：watch
watch就是用来监听数据变化得，当数据模型（data中得数据）发生改变时，watch就会被触发

2、watch提供得是响应数据得变化，并且是自动进行响应得
数据变化得时候执行异步或开销较大得一些操作，会常使用得是watch来实现得

<template>
  <div id=‘app‘>
       <input type="text" v-model="year">
       <input type="text" v-model="month">
       <p>出生年月：{{year}}年：{{month}}月</p>
       <div>输入的次数{{count}}</div>
       <div>{{brith}}</div>
  </div>
</template>

<script>
export default {
  name: ‘App‘,
  data () {
    return {
          year:1996,
          month:3,
          count:0
    }
  },
  computed: {
    brith () {

       return this.year   + this.month
    } 
  },
  watch : {
     year () {
          return this.count++

         },
      month () {
           return this.count++

     }
  

 

 

 

重点！！！！

   

Computed：

一个数据受多个数据影响，在执行得时候如果computed和watch同时存在，先执行得是computed，在执行watch

Computed是具有缓存得，这也就意味着只要计算书得依赖没有进行响应得数据更新，那么computed会直接从缓存中获取值，并且多次访问都会返回之前得计算结果

Caomputed是通过计算改变得，watch是用过观察改变得

计算是通过变量计算来得到得数据

观察是观察一个特定得值，根据被观察者得改变从而进行响应得改变

 

 

Watch：

 

和computed很相似，也是数据改变会执行，用来监听数据变化得

 

Watch本身是一个对象，里边得key是需要观察得数据，value是当数据发生变化得时候执行得回调函数

 

擅长得是一个数据影响多个数据

 

 

Methods：

其实就是单纯得放函数得对象