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

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

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

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

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

对Vue.js的认知

MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个同步View 和 Model的对象。

vue混入

混入是一种分发Vue组件中可复用功能非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。当组件和混入对象含有同名选项时,这些选项将以恰当的方式混合。

VueJS 实际开发中会遇到的问题

VueJS 实际开发中会遇到的问题,主要写一些 官方手册 上没有写,但是实际开发中会遇到的问题,需要一定知识基础。

vue的完整版和运行时版的区别

打开Vue的官网,你会发现有Vue有两种不同的构建版本,Vue官方对两种不同构建版本的解释是这样子的:完整版:同时包含编译器和运行时的版本

vue中的js引入图片,必须require进来

需求:如何components里面的index.vue怎样能把assets里面的图片拿出来。 1.在img标签里面直接写上路径,2.利用数组保存再循环输出

你应该知道的Vue高级特性

Vue为我们提供了很多高级特性,学习和掌握它们有助于提高你的代码水平。从我们刚开始学习Vue的时候,对于侦听属性,都是简单地如下面一般使用:

从 Vue parseHTML 来学习正则表达式

写作本文的起源在于,在分析 Vue 源码中 parseHTML 方法时,发现网上对其中正则的解析文章较少,找到的几篇文章也有些语焉不详。于是静下心逐个表达式分析了其中的正则,以备查看。

如何理解Vue.js中的ref及$ref,$

首先我们来看一下vue官方是怎么解释的m好了,我知道很多刚接触的vue的小白其实都不太看的懂官方文档在讲什么,下面我用自己的话翻译一下。

Vue2中render:h => h(App)的理解

render函数是渲染一个视图,然后提供给el挂载,如果没有render那页面什么都不会出来,Vue 在调用 render 方法时,会传入一个 createElement 函数作为参数,也就是这里的 h 的实参是 createElement 函数

点击更多...

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