Vue如何关掉响应式

大家都知道Vue有双向数据绑定 ,但是很少人知道怎样把它这个功能关掉

比如想要让某个值的改变不改变原有值

使用 Object.freeze(),这会阻止修改现有的 property,也意味着响应系统无法再追踪变化。

例子

var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data: obj
})
<div id="app">
  <p>{{ foo }}</p>
  <!-- 这里的 `foo` 不会更新! -->
  <button v-on:click="foo = 'baz'">Change it</button>
</div>

额外 Vue 也为大家提供了一个 只能修改数据一次的方法

v-once

通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定:

<span v-once>这个将不会改变: {{ msg }}</span>

Vue响应式的处理过程

响应式是从vue实例的init方法开始的。

在Init方法中先调用initState()初始化vue实例的状态,在这个方法中调用了initData(),initData()是把我们的data属性注入到vue实例上,并且调用observe()把data对象转换成响应式对象。于是observe()就是我们响应式的入口。

observe()做了什么事情:observe接收一个参数value,这个参数value就是我们响应式要处理的对象。

那么在创建observe对象时做了什么事:来看他的构造函数

数组的响应式处理:其实就是设置数组的那几个特殊方法,比如push,pop,sort等等,这些方法会改变原数组,所以当这些方法被调用的时候,我们要去发送通知。发送通知的时候是找到数组对象对应的ob,也就是observe对象,在找到这个observe中的dep,调用dep的notify方法。更改完数组的特殊方法之后,遍历数组的每一个成员,对每一个成员再去调用observe,如果这个成员是对象的话,也会把这个对象转换成响应式对象。

对象的响应式处理:如果当前的value是对象的话,此时会调用walk()方法。Walk方法里面会遍历这个对象的所有属性,对每一个属性调用defineReactive()。

在defineReactive中,会为每一个属性创建dep对象,让dep去收集依赖。如果当前属性的值是对象,则会调用observe,把这个对象也转换成响应式对象。

在defineReactive里最核心的事情就是定义getter和setter。

在getter中去收集依赖,收集依赖时要为每一个属性收集依赖,如果这个属性的值是对象,他也要为这个子对象收集依赖,在getter中最终返回这个属性的值。

在setter中首先要把新的值保存下来,如果新的值是对象,就调用observe,把我们新设置的值也转换成响应式对象。在setter中,数据发生了变化,所以要发送通知,其实就是调用dep.notify()。

收集依赖的过程:

在收集依赖时,首先要调用watcher对象的get方法,在get方法中调用pushTarget,在pushTarget中会把当前的watcher对象记录到Dep.target属性中。

在访问data中成员的时候去收集依赖,当我们访问这个属性的值的时候,就会去触发defineReactive中的getter,在getter中去收集依赖。他会把我们属性对应的watcher对象添加到dep的subs数组中,也就是为属性收集依赖。如果这个属性的值也是对象,此时要创建一个childOb对象,要为我们这个子对象收集依赖。目的是将来子对象发生变化时可以发送通知。(其实数组中内容发生变化时,就用到了这个childOb)。

Wacher:当数据发生变化时,会调用dep.notify()发送通知,他会调用wacher的update方法,在wacher的update方法中,会去调用queueWatcher函数去判断wacher是否被处理了,如果这个wacher对象没有被处理,则会被添加到queue队列中,并且调用flushSchedulerQueue去刷新任务队列。

在flushSchedulerQueue函数中会触发beforeUpdate钩子函数,然后调用wacher.run()方法,在wacher.run方法中去调用wacher的get方法去调用getter方法,而getter中存储的其实就是updateComponent(此处针对渲染wacher来说的)。在wacher.run运行完成后就已经将数据更新到了视图上,我们就可以再页面上看见变化了,剩下一些清理工作。

他会去清空我们上一次的依赖,重置wacher中的状态,接下来去触发actived钩子函数,最后触发updated钩子函数。

这就是整个响应式的处理过程。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持Devmax。

Vue 如何关掉响应式问题的更多相关文章

  1. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  2. vue自定义加载指令v-loading占位图指令v-showimg

    这篇文章主要为大家介绍了vue自定义加载指令和v-loading占位图指令v-showimg的示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

  3. vue使用动画实现滚动表格效果

    这篇文章主要为大家详细介绍了vue使用动画实现滚动表格效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  4. 关于Vue 监控数组的问题

    这篇文章主要介绍了Vue 监控数组的示例,主要包括Vue 是如何追踪数据发生变化,Vue 如何更新数组以及为什么有些数组的数据变更不能被 Vue 监测到,对vue监控数组知识是面试比较常见的问题,感兴趣的朋友一起看看吧

  5. Vue子组件props从父组件接收数据并存入data

    这篇文章主要介绍了Vue子组件props从父组件接收数据并存入data的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  6. Vue h函数的使用详解

    本文主要介绍了Vue h函数的使用详解,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  7. VUE响应式原理的实现详解

    这篇文章主要为大家详细介绍了VUE响应式原理的实现,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

  8. vue+Element ui实现照片墙效果

    这篇文章主要为大家详细介绍了vue+Element ui实现照片墙效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  9. vue+elemet实现表格手动合并行列

    这篇文章主要为大家详细介绍了vue+elemet实现表格手动合并行列,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. iview+vue实现导入EXCEL预览功能

    这篇文章主要为大家详细介绍了iview+vue实现导入EXCEL预览功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部