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

时间: 2018-04-02阅读: 17186标签: 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

vue引用js文件的多种方式

vue引用js文件的多种方式,这里以为引入jquery为例。js引入文件方式包括: vue-cli webpack全局引入jquery、vue组件引用外部js的方法、单vue页面引用内部js方法

vue知识点总汇

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

如何理解vue中的v-bind?

若不是动态属性,首先为其增加驼峰化后的监听,然后再为其增加一个连字符的监听,例如v-bind:foo-bar.sync,首先v-on:update:fooBar,然后v-on:update:foo-bar。v-on监听是通过addHandler加上的。

vue去掉#,history模式

现在网站大多有三方登录,支付等功能,存在#,项目开发就存在很大的障碍。vue把#当做自己的根目录,静态资源,去掉#后,要采用相对路径去引用,如果图片引用是在js内,则要采用require()方法进行引用。

Vue的理解:Vue.js新手入门指南

从一个从未接触过除HTML+CSS+JavaScript+JQuery以外的前端技术的人到现在可以独立使用Vue.js以及各种附属的UI库来开发项目,我总结了一些知识和经验想与大家分享。

vue扩展——使用vue插件添加全局方法属性

在使用vue构建一些大型项目的时候,会发现许多组件会共用到一些函数或常量,我们需要把它提取出来,每次需要的时候调用一次就可以了,避免每个组件都重新写再一篇的麻烦。

vue.extend拓展

Vue.extend返回的是一个“拓展实例构造器”,也就是预设了部分选项的Vue实例构造器。经常服务于Vue.component用来生成组件,可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时

Vue中mixin怎么理解?

mixin是为了让可复用的功能灵活的混入到当前组件中,混合的对象可以包含任意组件选项(生命周期,指令之类等等), mixin翻译过来叫混合,高级的词汇可以叫插件入侵

vue项目中vux的使用

VUX 是基于 WeUI 和 Vue.js 的 移动端 UI 组件库,提供丰富的组件满足移动端(微信)页面常用业务需求。在vue-cli中使用步骤如下:vux2必须配合vux-loader使用,并配置build/webpack.base.conf.js

在 VueJS应用中管理用户权限

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

点击更多...

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

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广