Vue2.x之疑点

2019-09-10 admin

这是我自己在深入了解 Vue 过程自己思考过的一些问题,特意拿出来记录一下,以免今后遗忘:

1.Vue 把数据转换成响应式数据后,是怎么来触发getter从而收集依赖的

解答:Vue 在初始化的过程中,把数据都转换成响应式数据。在触发生命周期函数beforeMount之后通过new Watcher() 来观测渲染函数。yabo88狗亚app

2.数组和对象的依赖分别保存在哪

解答:Vue 中数组和对象收集依赖都是在getter 中收集。但是触发setter 的地方不一样。

因为Vue 监听数组的变化是通过Array的原型方法来监听的,所以必须要保证能在原型方法和getter中都能够获取到 dep ,所以把 dep 保存在 Observer 实例上。(具体的解释请看响应式原理)

3.Watcher 监听函数怎么监测函数中所有用到的数据的

解答:当用 Watcher 监听一个函数时,函数里面每一个数据的getter都会触发,并且此时的 Dep.target 是当前的 Watcher 实例,所以每一个数据都会把当前的Watcher 实例收集起来。

4.Watcher监听一个路径字符串:‘a.b.c’,会分别监听a、a.b、a.b.c吗

解答:会。因为a、a.b、a.b.c的getter都会触发。

5.当数据变化后,多余的依赖是怎么处理的

解答:当数据变动后肯定会重新触发getter。yabo88狗亚app

// Watcher.js  
get () {
    pushTarget(this)
    let value
    const vm = this.vm
    try {
        // 这里触发getter
        value = this.getter.call(vm, vm)
    } catch (e) {

        if (this.user) {
            handleError(e, vm, `getter for watcher "${this.expression}"`)
        } else {
            throw e
        }
    } finally {
        // "touch" every property so they are all tracked as
        // dependencies for deep watching
        if (this.deep) {
            traverse(value)
        }
        popTarget()
        // 这里清理多余的依赖
        this.cleanupDeps()
    }
    return value
}

cleanupDeps () {
    let i = this.deps.length
    while (i--) {
        const dep = this.deps[i]
        if (!this.newDepIds.has(dep.id)) {
            dep.removeSub(this)
        }
    }
    let tmp = this.depIds
    this.depIds = this.newDepIds
    this.newDepIds = tmp
    this.newDepIds.clear()
    tmp = this.deps
    this.deps = this.newDeps
    this.newDeps = tmp
    this.newDeps.length = 0
}

[转载]原文链接:https://segmentfault.com/a/1190000020339722

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-74731.html

文章标题:Vue2.x之疑点

相关文章
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
Angular2-primeNG文件上传模块FileUpload使用详解
近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。 本系列将结合实战总结angular2-primeNG各个模块的使用经验。 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 ...
2017-03-09
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template...
2017-03-13
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
从2014年的发展来展望JS的未来将会如何
<font face="寰?杞?板呴粦, Arial, sans-serif ">2014骞达紝杞?浠惰?屼笟鍙戝睍杩呴€燂紝鍚勭?嶈??瑷€灞傚嚭涓岖┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙桦寲镄勯渶姹伞€傝繖浜涜??...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
canvas图片绘制跨域问题解决方案Tainted canvases may not be exported
图片跨域问题的一般解决方法 当使用canvas绘制网络图片的时候,经常会出现“Tainted canvases may not be exported”报错,上网搜一下解决方案,应该给的都是给img添加crossOrigin属性,尝试了一下...
2018-04-19
AJAX的浏览器支持
AJAX 的要点是 XMLHttpRequest 对象。 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。 IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 Jav...
2015-11-12
layui表格checkbox选择全选样式及功能的实
在之前的版本,默认复选框是要有值得,默认为“勾选”两个字,在表格里用来做选择不适合,很难改,还好layui升级后,可以支持不写name值,来适应表格中的选择操作。 1、layui版本号为 v1.0.9 rls版本(当前最新版本) <s...
2018-03-08
回到顶部