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. idea在debugger模式下无法启动,但是在run模式下可以启动的问题

    debugger模式下,启动idea,总是报内存溢出异常, Error creating bean with name 'sysRoleUserMapper' defined in URL [jar: ...

  2. [C#.net]获取文本文件的编码,自动区分GB2312和UTF8

    昨天生产突然反馈上传的结果查询出现了乱码,我赶紧打开后台数据库,发现果真有数据变成了乱码.这个上传程序都运行3个多月了,从未发生乱码现象,查看程序的运行日志,发现日志里的中文都变成了乱码,然后对比之前 ...

  3. truncate和delete命令的优缺点和原理解析,适用场合

    1.相同点:truncate和delete只删除数据不删除表的结构2.不同点:truncate.drop是数据库定义语言,操作立即生效,元数据不会放到rollback segement中,不能回滚,操 ...

  4. springboot整合redis-sentinel支持Cache注解

    一.前提 已经存在一个redis-sentinel集群,两个哨兵分别如下: /home/redis-sentinel-cluster/sentinel-1.conf port 26379 dir &q ...

  5. 解决YUM下Loaded plugins: fastestmirror Determining fastest mirrors 的问题

    Centons下 其大概意思是fastestmirror不能使用,fastestmirror是yum的一个加速插件,具体我也没有仔细了解过,可能是系统不支持或者缺少组建导致的.处理办法就是禁用这个插件 ...

  6. react-eslintrc

    { "extends": ["eslint:recommended"], "plugins": [ "react" ], ...

  7. hadoop配置笔记

    接上回,hadoop的配置文件都在下载的压缩包目录中的etc/hadoop/中 hadoop-env.sh有个地方配置java_home 其他常用的设置文件有: core-site.xml yarn- ...

  8. DelphiXE10.2.3——跨平台生成验证码图片

    $("#img-code").bind( 'click', function () { $(this).attr('src','VerifyCode?t='+Math.random ...

  9. C语言向上、向下取整

    C语言有以下几种取整方法: 1.直接赋值给整数变量.如: int i = 2.5; 或 i = (int) 2.5; 这种方法采用的是舍去小数部分 2.C/C++中的整数除法运算符“/”本身就有取整功 ...

  10. 【分布式缓存系列】Redis实现分布式锁的正确姿势

    一.前言 在我们日常工作中,除了Spring和Mybatis外,用到最多无外乎分布式缓存框架——Redis.但是很多工作很多年的朋友对Redis还处于一个最基础的使用和认识.所以我就像把自己对分布式缓 ...