码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-06-14 01:16:29      阅读:80      评论:0      收藏:0      [点我收藏+]

标签:ted   对象   this   temp   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

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

 

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

标签:ted   对象   this   temp   methods   缓存   回调函数   一个   次数   

原文地址:https://www.cnblogs.com/taozhibin/p/13122296.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!