关闭

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

时间: 2018-04-02阅读: 18672标签: 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组件中prop属性使用说明

props 把数据传给子组件!prop是组件数据的一个字段,期望从父作用域传下来。子组件需要显式地用 props 选项。props的大小写、静态的和动态的 Prop、传入一个数字、传入一个布尔值、Vue的组件中的props属性单向数据流

vue中修改Modal的重置功能怎么写?

工作中遇到弹出模态框形式的修改功能,模态框里面是Form表单,Form表单中的内容是从后台获取的,这时候用户修改完没有提交,而是想重置然后重新修改,怎么办呢?

12种使用Vue的最佳做法

随着 VueJS 的使用越来越广泛,出现了几种最佳实践并逐渐成为标准。在本文中,主要分享在平时开发中一些有用资源和技巧,废话少说,我们开始吧。

Vue高版本中一些新特性的使用

Vue高版本中一些新特性的使用:深度作用选择器、组件配置项inheritAttrs、组件实例属性$attrs和$listeners、组件选项 provide/inject、作用域插槽 slot-scope、Vue的错误捕获

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

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

Vue组件的三种调用方式

主要讲Vue三种方式调用组件:v-model或者.sync显式控制组件显示隐藏,通过js代码调用,通过Vue指令调用,在写组件的时候很多写法、灵感来自于element-ui

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

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

对Vue.js的认知

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

Vue 3.0 对 Web 开发意味着什么?

Vue的创建者Evan You向我们展示了Vue 3.0 —— 这是不断上升的Javascript框架的最新版本。这些优化使Vue更高效,更模块化且更易于使用。我将讨论这些变化以及我认为的他们将在Vue 3.0发布后对现有开发产生的影响。

Vue2实例详解与生命周期

Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理、数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。

点击更多...

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