Vue数据监听方法watch的使用


Posted in Javascript onMarch 28, 2018

watch本身很容易理解, watch负责将视图中的数据与某个函数关联起来

当Vue视图中的数据变化时, 关联的函数会被执行

Vue数据监听方法watch的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>监听方法watch的使用</title>
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    var vm = new Vue({
      el: "#root",
      data: { obj: {name: "zhaoolee", age: 12} , tel:6666666},
      template: `<div><div>姓名: {{obj.name}}</div>
        <div>电话: {{tel}}</div>
        <input type="text" v-model="obj.name">
        <input type="text" v-model="tel"></div>`,
      watch: {
        obj: {
         handler(){
           console.log("obj被改变");
         },
          // 页面加载之初先执行一次handle
         immediate: true,
          // 深度检查属性,即使对象内部的属性值改变, 也能检测到(比较消耗性能)
         deep: true
        },
        "obj.name": {
          handler(){
            console.log("=>obj.name被改变");
          }
        },
        tel:{
          handler(){
            console.log("tel被改变");
          }
        }
      }
    })
  </script>
</body>
</html>

对应一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。在实例化时为每个键调用 $watch() ;

//使用官方vue-cli脚手架书写
<template>
//观察数据为字符串或数组

 <input v-model="example0"/>

 <input v-model="example1"/>

/当单观察数据examples2为对象时,如果键值发生变化,为了监听到数据变化,需要添加deep:true参数

 <input v-model="example2.inner0"/>
</template>
<script>

 export default {



data(){




return {





example0:"",





example1:"",





example2:{






inner0:1,






innner1:2





}




}



},



watch:{




example0(curVal,oldVal){





console.log(curVal,oldVal);




},




example1:'a',//值可以为methods的方法名




example2:{




 //注意:当观察的数据为对象或数组时,curVal和oldVal是相等的,因为这两个形参指向的是同一个数据对象





handler(curVal,oldVal){






conosle.log(curVal,oldVal)





},





deep:true




}



},



methods:{




a(curVal,oldVal){





conosle.log(curVal,oldVal)




}



}
  }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JavaScript对JSON进行模式匹配(Part 1-设计)
Jul 17 Javascript
jQuery学习笔记之DOM对象和jQuery对象
Dec 22 Javascript
js bind 函数 使用闭包保存执行上下文
Dec 26 Javascript
JS 获取HTML标签内的子节点的方法
Sep 21 Javascript
原生js简单实现放大镜特效
May 16 Javascript
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 Javascript
React Native AsyncStorage本地存储工具类
Oct 24 Javascript
利用JavaScript的%做隔行换色的实例
Nov 25 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
May 16 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
Nov 19 Javascript
vue项目在webpack2实现移动端字体自适配功能
Jun 02 Javascript
JS轻量级函数式编程实现XDM三
Jun 16 Javascript
Vue 自定义动态组件实例详解
Mar 28 #Javascript
详解VUE 对element-ui中的ElTableColumn扩展
Mar 28 #Javascript
微信小程序之分享页面如何返回首页的示例
Mar 28 #Javascript
js中el表达式的使用和非空判断方法
Mar 28 #Javascript
JS实现左边列表移到到右边列表功能
Mar 28 #Javascript
JS中用EL表达式获取上下文参数值的方法
Mar 28 #Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 #jQuery
You might like
介绍php设计模式中的工厂模式
2008/06/12 PHP
javascript实现划词标记+划词搜索功能
2007/03/06 Javascript
Convert Seconds To Hours
2007/06/16 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
Jquery 点击按钮显示和隐藏层的代码
2011/07/25 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
2014/06/03 Javascript
JQuery仿小米手机抢购页面倒计时效果
2014/12/16 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
JS得到当前时间的方法示例
2017/03/24 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
2017/03/31 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
layui前段框架日期控件使用方法详解
2017/05/19 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
JavaScript阻止表单提交方法(附代码)
2017/08/15 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
2017/08/30 Javascript
Vue.js实现的表格增加删除demo示例
2018/05/22 Javascript
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
2020/04/09 Javascript
JS中准确判断变量类型的方法
2020/06/01 Javascript
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
python采用requests库模拟登录和抓取数据的简单示例
2014/07/05 Python
基于Python __dict__与dir()的区别详解
2017/10/30 Python
python使用TensorFlow进行图像处理的方法
2018/02/28 Python
Python selenium抓取微博内容的示例代码
2018/05/17 Python
PyTorch 解决Dataset和Dataloader遇到的问题
2020/01/08 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
django列表筛选功能的实现代码
2020/03/27 Python
Python运行提示缺少模块问题解决方案
2020/04/02 Python
详解python模块pychartdir安装及导入问题
2020/10/22 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
Ralph Lauren法国官网:美国高品味时装品牌
2017/12/08 全球购物
十佳护士获奖感言
2014/02/18 职场文书
三年级学生期末评语
2014/12/26 职场文书
nginx容器方式反向代理实战
2022/04/18 Servers