vue监控对象变化(Vue之监听方法案例详解)
类别:编程学习 浏览量:879
时间:2021-10-01 01:06:37 vue监控对象变化
Vue之监听方法案例详解vue中的监听方法watch
注意
名字 你想监听哪个属性,就要和他起一样的名字
1.作用
用来监听vue实例中的数据变化
可以随时修改状态的变化
2.触发条件
当你监听的属性发生变化时,会自动调用对应的监听方法
3.使用场景
用于异步处理,开销比较大的运算
4.示例
watch:{ name(newvalue,oldvalue){ //计算属性可以接受两个参数,第一个参数是新的属性值,第二参数是老的属性值 // this.age // console.log('name属性发生变化了') console.log(newvalue,oldvalue) }
5.监听对象时
<script> export default { data() { return { obj: { name: "张三", age: 20, children: [ { name: "李四", age: 27 }, { name: "王五", age: 23 } ] } }; }, watch: { obj: { handler: function(newVal, oldVal) { console.log("newVal:", newVal); console.log("oldVal:", oldVal); }, deep: true, immediate: true }, "obj.name": function(newVal, oldVal) { console.log("newVal obj.name:", newVal); console.log("oldVal obj.name:", oldVal); } }, }; </script>
监听对象的时候,需要加deep:true,这样才能深入底层去实时监听,如果没有加的话,对象是监听不到变化的。
immediate属性:布尔值
immediate:true:首次加载就监听数据变化
immediate:false:只有发生改变才监听
deep:true;
是开启深层次的监听,即所有属性都加上监听器,如果其中一个发生改变了就执行handler函数。
到此这篇关于Vue之监听方法案例详解的文章就介绍到这了,更多相关Vue之监听方法内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue基础语法对象(浅析从面向对象思维理解Vue组件)
- vue获取图片并展示(vue卡片式点击切换图片组件使用详解)
- vue设置div大小(Vue实现div滚轮放大缩小)
- vue elementui 公共列表组件(Vue Element-ui表单校验规则实现)
- vue中的watch属性(vue Watch和Computed的使用总结)
- vue 动态绑定指令(vue动态绑定图标的完整步骤)
- vue怎么定义router的动态路由(vue.js Router中嵌套路由的实用示例)
- vue自定义组件定义事件(基于Vue实现自定义组件的方式引入图标)
- vue3.0全家桶教程elementui学习(vite+vue3.0+ts+element-plus快速搭建项目的实现)
- icon图标怎么引入vue(vue引入iconfont图标库的优雅实战记录)
- vue定时器中间变颜色(Vue如何优雅的清除定时器)
- vue虚拟dom如何转换成真实dom的(vue中对虚拟dom的理解知识点总结)
- vue滑动切换页面(vue实现点击翻转效果)
- django框架教程第100讲(详解Django+Vue+Docker搭建接口测试平台实战)
- springbootvue项目代码(Vue+SpringBoot实现支付宝沙箱支付的示例代码)
- 使用vue-cli构建electron项目(MAC+PyCharm+Flask+Vue.js搭建系统)
- 弄清楚了销 售 买 卖这四个字,母婴生意做起来就没那么难了(弄清楚了销售买)
- 数读 买首饰金是 投资黄金 吗 买金容易卖金难(数读买首饰金是)
- 销 售 买 卖 你真的了解这四个字了吗(销售买)
- 谢娜是得罪快乐大本营造型师了吗 全场被黑化(谢娜是得罪快乐大本营造型师了吗)
- 前《iLOOK》时装总监 《快乐大本营》御用造型师上线(快乐大本营御用造型师上线)
- 释小龙晒杀青照片 多重身份惹观众期待(释小龙晒杀青照片)
热门推荐
- python协程结果(深入浅析python 协程与go协程的区别)
- sql常见的聚合函数有哪些(SQL中的开窗函数详解可代替聚合函数使用)
- web服务器iis安全访问机制(IIS与APACHE实现HTTP重定向到HTTPS)
- 使用VS调试存储过程
- 存储过程中使用事务Transaction
- HttpWebResponse.StatusCode请求状态代码
- 前端面试题之promise的手动封装(Promise面试题详解之控制并发)
- dedecms模板如何修改日期(DEDECMS网站文章列表页更新点击次数的问题完美解决)
- php服务器有哪些(php服务器的系统详解)
- linux下安装nginx常见问题(Linux安装Nginx步骤详解)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9