vue watch监听对象的使用_实现首次不触发、深度监听

更新日期: 2018-04-02阅读量: 20131标签: vue

vue中的watch是一个对象,所以一定要当成对象来用,它有键-值组成,其中就是你要监控的那个数据,比如说$route,这个就是要监控路由的变化。或者是data中的某个变量。 值可以是函数:就是当你监控的数据变化时需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值。 值也可以是函数名:不过这个函数名要用单引号来包裹。  值也可以是包括选项的对象:选项包括有三个:

  1. 第一个handler:其值是一个回调函数。即监听到变化时应该执行的函数。
  2. 第二个是deep:其值是true或false;确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到。)
  3. 第三个是immediate:其值是true或false;确认是否以当前的初始值执行handler的函数。

 下面就介绍下watch的使用中,遇到的问题,如:vue如何实现首次不触发watch,vue如何实现数据的深度监听?



1、vue实现首次不触发watch:

vue中watch特点是:根据当前组件中的初始值来进行判断的,我们在初始化的时候,如果监听的值修改了,此时watch就会被触发,实现方法如下:

1、在初始化值后面添加:this.$watch('a', this.fn),这样首次赋值是不会触发fn的,只有后面的会触发,例如:

created: function() {
    //初始化修改值
    this.$watch('data',this.fn)
}
methods: {
    fn() {
       //触发
    },
}

2、使用immediate: true;这个属性,默认为false。其值代表是否以当前的初始值执行handler的函数,例如:

watch:{
    "data":{
         immediate:true,
         handler:function(){
        //执行代码
         }
    }
}


2、vue如何实现数据的深度监听

一般情况下,使用watch的监听,只是浅监听,如下就监听不到对象下age的变化:

let obj = {name: 'fly', child: {age: 1}};

这里要实现深度监听,就需要上面介绍的属性deep:true。如下:

watch: {
       "data":{
          handler:function() {  
              //这里如果不使用箭头函数,需要注意this的指向
          },
         deep: true //深度监听
   }
}





站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/578

Vue 中的受控与非受控组件

熟悉 React 的开发者应该对“受控组件”的概念并不陌生,实际上对于任何组件化开发框架而言,都可以实现所谓的受控与非受控,Vue 当然也不例外。并且理解受控与非受控对应的需求场景,可以让我们在设计一些基础组件时思路更加清晰,暴露出来的组件 API 也更加合理、统一。

vue2.0之监听属性的使用心得及搭配计算属性的使用

在工作中常常需要监听某一个属性值的变化,这个时候我们就需要用到了监听属性watch,在这里我总结watch属性的三种场景使用希望对你有所帮助

Vue.js最佳实践:五招让你成为Vue.js大师

本文面向对象是有一定Vue.js编程经验的开发者。如果有人需要Vue.js入门系列的文章可以在评论区告诉我,有空就给你们写。对大部分人来说,掌握Vue.js基本的几个API后就已经能够正常地开发前端网站

vue知识点总汇

keep-alive它是vue的内置组件在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步:

Vue.js中 watch 的高级用法

上面的代码的效果是,当我们输入firstName后,wacth监听每次修改变化的新值,然后计算输出fullName。app.$watch调用后会返回一个值,就是unWatch方法,你要注销 watch 只要调用unWatch方法就可以了

基于Vue实现后台系统权限控制

用Vue/React这类双向绑定框架做后台系统再适合不过,那么如何在一个Vue应用中实现权限控制呢?下面是我的一点经验。

Vue基础之计算属性

设想一个场景,你需要得到一个复杂运算/逻辑的返回值,利用模板内的表达又过长且难以阅读和维护,这时计算属性就可以很好的解决你的问题。看下面的例子:

对vue双向绑定的理解?

单向绑定非常简单,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新,双向绑定就很容易联想到了,在单向绑定的基础,用户更新了View,Model的数据也自动被更新了,这种情况就是双向绑定

vue history模式刷新出现404

vue单页因微信分享和自动登录需要,对于URL中存在’#’的地址,处理起来比较坑。但是换成history模式,就会有个新的问题,就是页面刷新后,页面就无法显示了(404)。

在 VueJS应用中管理用户权限

在需要身份验证的前端应用里,我们经常想通过用户角色来决定哪些内容可见。比如,游客身份可以阅读文章,但注册用户或管理员才能看到编辑按钮。在前端中管理权限可能会有点麻烦。你之前可能写过这样的代码

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!