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. cmd下的一些小技巧

    切换盘符:[盘符]+: tips1: 在盘符A执行一条命令后的同时切换到盘符B:A:\>dir && B:(此处只能用&&或者&) tips2: 在盘符A ...

  2. SpringBoot图片上传

    毕设终于写到头像上传了,本来想用Vue写来着,但是一直不顺利,还是对Vue用的不太熟.所以就用jquery写了. 首先添加以下标签 <img id="avatarPreview&quo ...

  3. cpptest测试总结

    项目继续,持续新增中-- 桩函数设置 桩 (函参指针赋值) √:fun(*p) { for(int i = 0; i<6; i++) p[i] = 10; } ×:fun(*p) { for(i ...

  4. AX_CreateAndPostInventJournal

    static void CreateAndPostInventJournal(Args _args) { InventJournalTable inventJournalTableLocal; Inv ...

  5. Naïve Media Player

    我的GitHub链接:https://github.com/Joyce45/hwt 一.播放器?怎么做? 提到播放器,首先想到的就是XAML控件库里的MediaElement,于是我又大致阅读了一下该 ...

  6. sklearn svm基本使用

    SVM基本使用 SVM在解决分类问题具有良好的效果,出名的软件包有libsvm(支持多种核函数),liblinear.此外python机器学习库scikit-learn也有svm相关算法,sklear ...

  7. excel日期拾取插件(支持Excel 2007 - 2016)

    插件安装完毕后示意图如下: 插件安装说明请查看附件里面的安装说明. 插件下载

  8. 转 Java并发之锁的升级

    说明:本文大部分内容来自<并发编程的艺术>,再加上自己网络整理和理解 以下内容来自<java并发编程的艺术>作者:方鹏飞 魏鹏 程晓明 在多线程并发编程中synchronize ...

  9. Flink 报错 "Could not find a suitable table factory for 'org.apache.flink.table.factories.StreamTableSourceFactory' in the classpath"

    先上代码: table = tablexx.select('*).tablexx.groupBy('x).select('x, xx.count ) tableEnvironment // decla ...

  10. Stanford CS20学习笔记

    Lecture Note 2 Tensorboard P3 Data Structures P4 Math Operations P6 Data Types P7 tf native &&am ...