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. GUI学习之八——复选框QCheckBox的学习总结

    一.描述 a.QCheckBox一般用于给用户提供若干选项中多个选择时的使用 b.控件左侧有一个方框来显示控件被选中. c.复选框是有三种状态的 二.使用 1.创建 复选框的创建和常规的按钮创建方式是 ...

  2. 【微信小程序开发之坑】javascript创建date对象

    最近开发中用到date,开始以如下方式来创建: var date = new Date('2018-01-30 11:00:00'); 在开发工具上,调试,ios 和 android都好好的. 在真机 ...

  3. JavaScript变量声明var,let.const

    var声明变量的作用域限制在其声明位置的上下文中 var x = 0; // x是全局变量,并且赋值为0. console.log(typeof z); // undefined,因为z还不存在. f ...

  4. 利用java的url实现小型的网页爬虫

    暂时还没学处理数据的方法,扒下来的数据还包含html的标签. 后面再学. package com.imooc; import java.io.BufferedReader; import java.i ...

  5. 致C#,致我这工作一年(上)

     回忆   最近比较闲,虽然我总是每天会在博客园逛上1~2个钟(最近是真的有点闲),看了很多人对于工作的感悟,谈程序员的职业规划,不知不觉出来工作我也快一年多了,我也想聊聊现在用C#找工作和我这一年多 ...

  6. excle记录

    比较两列不一样的数据 https://jingyan.baidu.com/article/fd8044fa23eef05030137a66.html

  7. centos7安装配置nfs

    操作系统版本:3.10.0-123.el7.x86_64 192.168.137.11  nfs服务端 192.168.137.10  nfs客户端 一.安装nfs服务端(在192.168.137.1 ...

  8. 对excel文件的读取

    poi上传文件,准备 <dependencies><dependency> <groupId>org.apache.poi</groupId> < ...

  9. idea编辑器激活码

    激活方式:License Server1.将地址 http://active.chinapyg.com/ 或者 http://idea.toocruel.net 任意一个复制到License Serv ...

  10. shell搭建CentOS_7基础环境

    #!/bin/bash#Auth:Darius#CentOS_7配置实验环境eno=`ifconfig|awk '{print $1}'|head -1|awk -F ":" '{ ...