详解Vue的watch中的immediate与watch是什么意思


Posted in Javascript onDecember 30, 2019

immediate

immediate设为true后,则监听的这个对象会立即输出,也就是说一刷新页面就会在控制台输出,当然此时页面上的数据我们还没来得及手动让其发生变化,所以在控制台输出的newValue为我们在代码中默认设置的值,oldValue输出为“undefined”。如

当我们手动改变newValue.id的值后,输出如下:

如果不设置immediate,或者将immediate设为false的话,则刷新页面后不会立即监听此对象,也就是控制台不会有输出,必须要监听的对象有值改变时控制台才会有输出。

data() {
   return {
    value:''
   };
  },
  watch:{
   value:{
    handler:'init',
    immediate:true
   }
  },
  methods: {
   init(){
    alert(1)
   }
  }

deep设为true后,就可以深入监听了。简单点说,就是可以监听到对象里面的值的变化了

<div>
  <input type="text" v-model="student.studentName">{{student.studentName}}
 </div>
 

student:{
     studentName:'xi'
    }

watch:{
  student:{
    handler:function (newValue,oldValue) {
     console.log(newValue,'new')
     console.log(oldValue,'old')
    },
     deep:true,
     immediate:true
   }

}

不加deep监听不到改变

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

Javascript 相关文章推荐
JavaScript 事件记录使用说明
Oct 20 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
Oct 11 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
Nov 14 Javascript
jQuery实现购物车多物品数量的加减+总价计算
Jun 06 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
Oct 16 Javascript
JavaScript中用于生成随机数的Math.random()方法
Jun 15 Javascript
Java中Timer的用法详解
Oct 21 Javascript
vue中配置mint-ui报css错误问题的解决方法
Oct 11 Javascript
小程序云开发之用户注册登录
May 18 Javascript
Vue的路由及路由钩子函数的实现
Jul 02 Javascript
javascript实现视频弹幕效果(两个版本)
Nov 28 Javascript
详解Vue.js 响应接口
Jul 04 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 #jQuery
Vue实现星级评价效果实例详解
Dec 30 #Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 #Javascript
微信小程序中网络请求缓存的解决方法
Dec 29 #Javascript
vue点击按钮动态创建与删除组件功能
Dec 29 #Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 #Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
Dec 29 #Javascript
You might like
杏林同学录(四)
2006/10/09 PHP
PHP 类相关函数的使用详解
2013/05/10 PHP
PHP写的资源下载防盗链类分享
2014/05/12 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
php微信开发之图片回复功能
2018/06/14 PHP
IE中createElement需要注意的一个问题
2010/07/13 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
2014/05/29 Javascript
javascript实现鼠标拖动改变层大小的方法
2015/04/30 Javascript
jQuery获取父元素及父节点的方法小结
2016/04/14 Javascript
jQuery+CSS3实现点赞功能
2017/03/13 Javascript
详解如何使用Vue2做服务端渲染
2017/03/29 Javascript
JS实现数组按升序及降序排列的方法
2017/04/26 Javascript
Bootstrap模态框插件使用详解
2017/05/11 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
2018/07/11 Javascript
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
2019/07/11 jQuery
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
如何用python整理附件
2018/05/13 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
Python字典添加,删除,查询等相关操作方法详解
2020/02/07 Python
python实现简单俄罗斯方块
2020/03/13 Python
python中的django是做什么的
2020/07/31 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
mac安装python3后使用pip和pip3的区别说明
2020/09/01 Python
使用HTML5技术开发一个属于自己的超酷颜色选择器
2013/09/22 HTML / CSS
西班牙第一的网上药房:PromoFarma.com
2017/04/17 全球购物
幼儿园中秋节活动方案2013
2014/01/29 职场文书
《夕阳真美》教学反思
2014/04/27 职场文书
医学求职自荐信
2014/06/21 职场文书
小学综合实践活动总结
2014/07/07 职场文书
2015新学期开学寄语
2015/02/26 职场文书