针对vue wtach一次详细的剖析

crossoverJie 发布于2019-08-23 18:05 / 1922人阅读

摘要：提问深度与非深度的区别对象与数组与的区别的一个特点是，最初绑定的时候是不会执行的，要等到改变时才执行监听计算。为一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象适用场景一个数据影响多个数据。

提问

1.深度watch与非深度watch的区别；
2.watch对象与数组；
3.watch与computed的区别；

immediate


   FullName: {{fullName}}
   FirstName: 

 
new Vue({
  el: "#root",
  data: {
    firstName: "Dawei",
    lastName: "Lou",
    fullName: ""
  },
  watch: {
    firstName(newName, oldName) {
      this.fullName = newName + " " + this.lastName;
    }
  } 
})

watch 的一个特点是，最初绑定的时候是不会执行的，要等到 firstName 改变时才执行监听计算。那我们想要一开始就让他最初绑定的时候就执行改怎么办呢？我们需要修改一下我们的 watch 写法，修改过后的 watch 代码如下：

watch: {
  firstName: {
    handler(newName, oldName) {
      this.fullName = newName + " " + this.lastName;
    },
    // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
    immediate: true
  }
}

注意到handler了吗，我们给 firstName 绑定了一个handler方法，之前我们写的 watch 方法其实默认写的就是这个handler，Vue.js会去处理这个逻辑，最终编译出来其实就是这个handler。而immediate:true代表如果在 wacth 里声明了 firstName 之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行。

deep

默认情况下 handler 只监听obj这个属性它的引用的变化，我们只有给obj赋值的时候它才会监听到，比如我们在 mounted事件钩子函数中对obj进行重新赋值，当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，此时就需要deep属性对对象进行深度监听。

watch: {
  obj: {
    handler(newName, oldName) {
      console.log("obj.a changed");
    },
    immediate: true,
    deep: true
  }

deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler。

优化，我们可以是使用字符串形式监听：

watch: {
  "obj.a": {
    handler(newName, oldName) {
      console.log("obj.a changed");
    },
    immediate: true,
    // deep: true
  }
}

注销watch

为什么要注销 watch？因为我们的组件是经常要被销毁的，比如我们跳一个路由，从一个页面跳到另外一个页面，那么原来的页面的 watch 其实就没用了，这时候我们应该注销掉原来页面的 watch 的，不然的话可能会导致内置溢出。好在我们平时 watch 都是写在组件的选项中的，他会随着组件的销毁而销毁。
但是，如果我们使用下面这样的方式写 watch，那么就要手动注销了，这种注销其实也很简单：

const unWatch = app.$watch("text", (newVal, oldVal) => {
  console.log(`${newVal} : ${oldVal}`);
})
unWatch(); // 手动注销watch

app.$watch调用后会返回一个值，就是unWatch方法，你要注销 watch 只要调用unWatch方法就可以了。

watch与computed的区别

computed：当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性，需要注意的是，就算在data中没有直接声明出要计算的变量，也可以直接在computed中写入。

computed: {  
            fullName: function () {  
                return this.firstName + " " + this.lastName  
            }  
        }

计算属性默认只有getter，可以在需要的时候自己设定setter：

    computed: {
        fullName: {
            // getter
            get: function () {
                return this.firstName + " " + this.lastName
            },
            // setter
            set: function (newValue) {
                var names = newValue.split(" ")
                this.firstName = names[0]
                this.lastName = names[names.length - 1]
            }
        }
    }

这个时候在控制台直接运行vm.fullName = ‘bibi wang’，相应的firstName和lastName也会改变。
适用场景：一个数据受多个数据影响。
watch：watch用于观察和监听页面上的vue实例，当然在大部分情况下我们都会使用computed，但如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择。watch为一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象

watch: {
            firstName: function (val) {
                this.fullName = val + " " + this.lastName
            },
            lastName: function (val) {
                this.fullName = this.firstName + " " + val
            }
        }

适用场景：一个数据影响多个数据。

需要注意的是，computed是具有缓存的，这就意味着只要计算属性的依赖没有进行相应的数据更新，那么computed会直接从缓存中获取值，多次访问都会返回之前的计算结果。

版本号：V2.8.3
更新日期：2018-07-09

专线服务云服务器 wtach 针对防火墙的攻击针对网站的加速器针对学生的服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104647.html

有价值的前端技术点

摘要：借着产品层面的功能和视觉升级，我们用对它进行了一次技术重构。前端优化是一个让人技术提升的，希望你也能从这里学到一些东西。年最流行的前端链接我们每周会给多名前端开发者发送新闻邮件。面试 -- 网络 HTTP 现在面试门槛越来越高，很多开发者对于网络知识这块了解的不是很多，遇到这些面试题会手足无措。本篇文章知识主要集中在 HTTP 这块。文中知识来自《图解 HTTP》与维基百科，若有错...

microelec 2019-08-26 11:32 评论0 收藏0
[Vue.js进阶]从源码角度剖析计算属性的原理

摘要：前言最近在学习计算属性的源码，发现和普通的响应式变量内部的实现还有一些不同，特地写了这篇博客，记录下自己学习的成果文中的源码截图只保留核心逻辑完整源码地址可能需要了解一些响应式的原理版本计算属性的概念一般的计算属性值是一个函数，这个函数showImg(https://user-gold-cdn.xitu.io/2019/5/6/16a8b98f1361f6f6); 前言最近在学习Vue计...

melody_lql 2019-05-23 17:30 评论0 收藏0
剖析Vue实现原理 - 如何实现双向绑定mvvm（转载）

摘要：接下来要看看这个订阅者的具体实现了实现订阅者作为和之间通信的桥梁，主要做的事情是在自身实例化时往属性订阅器里面添加自己自身必须有一个方法待属性变动通知时，能调用自身的方法，并触发中绑定的回调，则功成身退。本文能帮你做什么？1、了解vue的双向数据绑定原理以及核心代码模块2、缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现，本文相关代码主要摘自vue源码, 并进行了简化改造，...

nemo 2019-08-21 11:38 评论0 收藏0
JavaScript - 收藏集 - 掘金

摘要：插件开发前端掘金作者原文地址译者插件是为应用添加全局功能的一种强大而且简单的方式。提供了与使用掌控异步前端掘金教你使用在行代码内优雅的实现文件分片断点续传。 Vue.js 插件开发 - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins译者：jeneser Vue.js插件是为应用添加全局功能的一种强大而且简单的方式。插....

izhuhaodev 2019-08-21 11:44 评论0 收藏0