1.watch:用来监听每一个属性的变化
2.watch这个对象里面都是函数,函数的名称是data中的属性名称,watch中的函数不需要调用
3.当属性发生改变那么就会触发watch函数,每个函数都会接受两个值,一个是新值,一个是旧值
4.我们可以在watch当中就行新旧值的判断来减少虚拟dom的渲染
eg:
watch:{
    a(newVal,oldVal){
    if(newVal != oldVal){
        this.sum = newVal+this.b;
    }
    console.log("a发生了改变",newVal,oldVal)
}
5.只要是当前的属性值发生改变就会触发它所对应的函数
6.如果我们需要对对象进行监听的时候需要将属性值设置为key值,val值为一个对象,对象中有两个参数是必填,一个是handler函数,一个是deep为true,这样才能实现深度监听
eg:
obj:{
    handler(newVal){
    console.log("obj发生了改变",newVal)
    },
    deep:true
}

vue属性监听的更多相关文章

  1. 12.vue属性.监听.组件

    1.计算属性 https://cn.vuejs.org/v2/guide/computed.html new Vue({ computed:{//定义 show(){ } } }) ++计算属性1.h ...

  2. vue的属性监听

    一.vue的监听 1.监听的例子 如: html:<input type="number" v-model="a" /> js: watch: { ...

  3. Vue 变量,成员,属性监听

    Vue变量 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF ...

  4. Vue之计算属性Computed和属性监听Watch,Computed和Watch的区别

    一. 计算属性(computed) 1.计算属性是为了模板中的表达式简洁,易维护,符合用于简单运算的设计初衷. 例如: <div id="app"> {{ myname ...

  5. 9.Vue.js 监听属性

    本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化. 以下实例通过使用 watch 实现计数器: <div id = "app&q ...

  6. Vue.js之计算属性(computed)、属性监听(watch)与方法选项(methods)

    vue.js官网:https://cn.vuejs.org/v2/guide/components-registration.html 一.计算属性-computed 1. 作用:能够避免数据冗余,通 ...

  7. vue对象属性监听

    对象属性监听的两种方法: 1.普通的watch data() { return { frontPoints: 0 } }, watch: { frontPoints(newValue, oldValu ...

  8. 微信小程序实现watch属性监听数据变化

    Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动:监听属性 watch. 虽然watch的滥用会导致性能不佳,但在一些情况下我们还是需要watch,使得代码更加简洁.逻辑更加清晰(其 ...

  9. 设计模式(5): vue 不监听绑定的变量

    概述 最近最近做项目的时候总会思考一些大的应用设计模式相关的问题,我把自己的思考记录下来,供以后开发时参考,相信对其他人也有用. 绑定变量 一般情况下,如果我们需要在组件中使用某个变量,会这么使用: ...

随机推荐

  1. oracle 查询clob 列时 很慢 , 未解决

    今天查询一张表 ,这张表有一个clob 列 select *  from  tableName :  很卡.. 难道是查询的太多? select * from tableName where rowN ...

  2. mongoDb造数据

    package mongoUtil; import com.mongodb.MongoClient; import com.mongodb.client.MongoCollection; import ...

  3. 微信浏览器里在底部的输入框,ios11的不会被遮盖、10.1会被盖住

    /** * 由于ios10 和 ios11 版本之间的差异,所以先判断ios系统版本之后再做处理 */ let str = navigator.userAgent.toLowerCase(); let ...

  4. Java:ConcurrentHashMap支持完全并发的读

    ConcurrentHashMap完全允许多个读操作并发进行,读操作并不需要加锁.(事实上,ConcurrentHashMap支持完全并发的读以及一定程度并发的写.)如果使用传统的技术,如HashMa ...

  5. 使用electron开发指静脉客户端遇到的问题总结

    使用electron 使用nodejs 的ffi模块调用dll文件 总结1.electron 与nodejs版本不需要一致,甚至nodejs版本应该高于electron的node版本2.要安装 Vis ...

  6. Linux常用的工具软件安装

    一. linux简单介绍 linux的优势 可靠的安全性,良好的稳定性,完善的网络功能 跨平台的硬件支持,丰富的软件支持,多用户多任务 Linux的发行版本 Redhat 红帽子,最大稳定 CentO ...

  7. PE文件常用结构体

    Dos头结构: typedef struct _IMAGE_DOS_HEADER { // DOS .EXE header WORD e_magic; // Magic number WORD e_c ...

  8. HDU 4609 3-idiots (组合数学 + FFT)

    题意:给定 n 条边,问随机选出 3 条边,能组成三角形的概率是多少. 析:答案很明显就是  能组成三角形的种数 / (C(n, 3)).现在的问题是怎么求能组成三角形的种数. 这个博客说的非常清楚了 ...

  9. OpenAL音频库例程

    Windows下C++可用的OpenAL demo. 基于alut工具库的OpenAL例程,涵盖了基本的OpenAL指令,对部分作出了注释,并且可以播放(当然得把对应的音频文件放到正确的路径下). # ...

  10. Scrum的3种角色划分--2048小游戏

    WBS分析: 敏捷开发 Scrum的3种角色划分:产品负责人PO(Product Owner).SM(ScrumMaster).开发团队(Team) 职责: PO:负责在限定期限内拟定可能的最有价值的 ...