8、vue中得监听属性:watch--- /////watch、computed、methods得区别

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

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

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

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

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

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

 

 

Watch

 

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

 

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

 

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

 

 

Methods

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

 

posted @ 2020-06-13 23:30  陶智斌  阅读(244)  评论(0编辑  收藏  举报