详解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中callee与caller的用法和应用场景
Dec 08 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
Jun 20 Javascript
JS获取select-option-text_value的方法
Dec 26 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
Jan 10 Javascript
AngularJS基础 ng-model 指令详解及示例代码
Aug 02 Javascript
javascript实现的左右无缝滚动效果
Sep 19 Javascript
vue监听scroll的坑的解决方法
Sep 07 Javascript
json2.js 入门教程之使用方法与实例分析
Sep 14 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
Mar 01 Javascript
node express使用HTML模板的方法示例
Aug 22 Javascript
浅谈vue.watch的触发条件是什么
Nov 07 Javascript
vue keep-alive的简单总结
Jan 25 Vue.js
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
pw的一个放后门的方法分析
2007/10/08 PHP
php中根据变量的类型 选择echo或dump
2012/07/05 PHP
php对数组排序的简单实例
2013/12/25 PHP
PHPMailer的主要功能特点和简单使用说明
2014/02/17 PHP
php实现的百度搜索某地天气的小偷代码
2014/04/23 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
PHP7导出Excel报ERR_EMPTY_RESPONSE解决方法
2019/04/16 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
如何用javascript去掉字符串里的所有空格
2007/02/08 Javascript
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
require.js的用法详解
2015/10/20 Javascript
Sea.JS知识总结
2016/05/05 Javascript
Javascript将JSON日期格式化
2016/08/23 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
vue使用iframe嵌入网页的示例代码
2020/06/09 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
js 对象使用的小技巧实例分析
2019/11/08 Javascript
JavaScript或jQuery 获取option value值方法解析
2020/05/12 jQuery
python在windows下实现备份程序实例
2014/07/04 Python
python学习教程之Numpy和Pandas的使用
2017/09/11 Python
Python中生成器和迭代器的区别详解
2018/02/10 Python
django celery redis使用具体实践
2019/04/08 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
CSS3中的元素过渡属性transition示例详解
2016/11/30 HTML / CSS
Bally美国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/18 全球购物
Nº21官方在线商店:numeroventuno.com
2019/09/26 全球购物
资深生产主管自我评价
2013/09/22 职场文书
服务理念口号
2014/06/11 职场文书
英文道歉信
2015/01/20 职场文书
国博复兴之路观后感
2015/06/02 职场文书
中秋联欢会主持词
2015/07/04 职场文书
Python词云的正确实现方法实例
2021/05/08 Python