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学习之二——PyQt控件初识

    一.控件概念 控件是一个程序界面上的各个独立的元素, 它具备用户点击.接收用户输入.展示不同内容.存放其他控件等功能. 二.控件分类 常用的控件按功能可以分为以下几种类 按钮 QPushButton— ...

  2. idea启动springboot+jsp项目出现404

    场景:用IntelliJ IDEA 启动 springBoot项目访问出现404,很皮,因为我用eclipse开发时都是正常的,找了很久,什么加注释掉<scope>provided< ...

  3. Django模板标签

    一.模板标签 1.模板标签是在模板中运用python语言的实现,如for循环,if语句 2.模板标签的运用 2.1在teacher模板下创建students_list模板, 在teacher视图中国创 ...

  4. 2019.03.28 bzoj3594: [Scoi2014]方伯伯的玉米田(二维bit优化dp)

    传送门 题意咕咕咕 思路:直接上二维bitbitbit优化dpdpdp即可. 代码: #include<bits/stdc++.h> #define N 10005 #define K 5 ...

  5. opencv2.4.13+python2.7学习笔记--OpenCV中的图像处理--图像轮廓

    阅读对象:无要求. 1.代码 ''' OpenCV中的轮廓 轮廓可以简单认为成将连续的点(连着边界)连在一起的曲线,具有相同的颜色或者灰度.为了更加准确,要使用二值化图像.在寻找轮廓之前,要进行阈值化 ...

  6. IE兼容问题 动态生成的节点IE浏览器无法触发

    ie下click()不能操作文档中没有的节点,所以你可以在click()前添加下面的语句 document.body.appendChild( input ); input.style.display ...

  7. Spring PropertyEditor Spring conversion框架分析

    PropertyEditor https://blog.csdn.net/pentiumchen/article/details/44026575 conversion https://blog.cs ...

  8. android-mediaplayer播放

    优先参考 待补充.android 8.0

  9. mvc项目 ajax post 返回404错误

    后台代码没有问题,但是一直出现404错误 原因:iis设置,请求中文件大小超过限制会被过滤掉,直接返回404. 解决:设置iis,应用程序->请求筛选->规则->编辑功能设置-> ...

  10. 网络编程 —— UPD

    UDP协议(数据报协议:SOCK_DGRAM) udp是无链接的,先启动哪一端都不会报错 udp协议的特点: 传输数据不可靠,发送完后没有确认就删除 传送内容可为空 对于查寻速度快 支持的是一对多的模 ...