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. 快速实现抖音的分享&登录(android)

    快速实现抖音分享与第三方登录 准备工作 1.注册抖音的key到抖音开放平台,点击这里查看步骤: 2.集成ShareSDK到Mob官网文档页面查看即可,点击这里查看集成: 业务代码 分享要求: 视频: ...

  2. 《数学之美》--第一章:文字和语言 vs 数字和信息

    PDF下载 第一章 文字和语言 vs 数字和信息 数字.文字和自然语言一样,都是信息的载体,它们之间原本有着天然的联系.语言和数学的产生都是为了同一个目的-记录和传播信息.但是,直到半个多世纪前香农博 ...

  3. 小程序跳转tabbar页面

    如果在app.json 配置tabbar 的时候配置了 跳转的页面的链接: 在其余的子页面,设置用navigator 进行跳转会发现 在tabbar 设置过的页面无法进行跳转,这时需要在navigat ...

  4. mongoDb造数据

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

  5. makefile与动态链接库案例分析——动态库链接动态库

    http://blog.csdn.net/huqinwei987/article/details/50517780 背景:效率考虑,要重用把服务器主备机方案,以库Libmdpha(高可用)的形式加进主 ...

  6. RPA基础

    RPA是什么 软件机器人 RPA是基于计算机操作系统的工作界面,自动识别UI,完成预先设定的工作流程的软件机器人 ​ 全自动 自动的操作整个工作流程,用软件的方式代替人力,完成大量的重复性的手工操作, ...

  7. C++程序调用python3

    今天想做一个简单的管理密码的小程序,由于最近了解了下Python,就想用Python来写.但是看了看Python的界面库用法有感觉有点麻烦,所以还不如直接使用MFC写写界面,关于csv的文件处理部分使 ...

  8. VS2017离线安装入门与出家

    重做系统,并且VS2017也发布有一段时间了,可以试试了. 于是网上搜了下,离线安装要下载他的安装工具. https://www.visualstudio.com/zh-hans/downloads/ ...

  9. Notes on Distributed System -- Distributed Hash Table Based On Chord

    task: 基于Chord实现一个Hash Table 我负责写Node,队友写SuperNode和Client.总体参考paper[Stoica et al., 2001]上的伪代码 FindSuc ...

  10. 第51章:Java操作MongoDB-[Mongo-Java-2.x]

    ①范例:连接数据库 package cn.mldn.demo; import com.mongodb.DB; import com.mongodb.MongoClient; public class ...