根据调试工具看Vue源码之watch

monw3c 发布于2019-08-23 16:20 / 1208人阅读

摘要：实例将会在实例化时调用，遍历对象的每一个属性。我们期待的是断点停下后，调用栈中出现相关的函数，提供我们分析原理的依据。抱着上面的意图以及期待，我们新建一个项目，同时写入以下代码刷新页面后右边的调用栈显示如下

官方定义

类型：{ [key: string]: string | Function | Object | Array }

详细：

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

初次探索

我们的意图是 —— 监测app这个变量，并在函数中打下一个断点。
我们期待的是 —— 断点停下后，调用栈中出现相关的函数，提供我们分析watch原理的依据。

抱着上面的意图以及期待，我们新建一个Vue项目，同时写入以下代码：

created () {
    this.app = 233
},
watch: {
    app (val) {
      debugger
      console.log("val:", val)
    }
}

刷新页面后右边的调用栈显示如下

云服务器 GPU云服务器看动画学算法之:hashtable vue源码 vue webrtc 源码源码中文说明之

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

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

根据调试工具看Vue源码之生命周期（一）

摘要：由于工作中经常使用调试工具来定位问题，觉着这东西真的挺好用。突然有一天受到启发，想着我学习源码是否也可以通过调试工具呢因此，诞生了这篇文章来记录我的一些学习成果，后续应该会写成一个系列。由于工作中经常使用chrome调试工具来定位问题，觉着这东西真的挺好用。突然有一天受到启发，想着：我学习源码是否也可以通过调试工具呢？因此，诞生了这篇文章来记录我的一些学习成果，后续应该会写成一个...

My_Oh_My 2019-08-23 15:07 评论0 收藏0
根据调试工具看Vue源码之组件通信（一）

摘要：根据调试工具看源码之组件通信一根据调试工具看源码之组件通信一在平时的业务开发中，相信在座的各位没少用过组件通信。看完本文可以帮助你了解组件的通信方式及原理，从而进一步加深对的理解，远离工程师的行列。根据调试工具看Vue源码之组件通信（一）## 根据调试工具看Vue源码之组件通信（一）在平时的业务开发中，相信在座的各位没少用过组件通信。然而，对于一些新手/业务熟手来说，不懂技术原理往...

付伦 2019-08-23 15:30 评论0 收藏0
看一下从 new Vue()开始到页面看到真实dom都经历了什么？

摘要：从开始看运行流程本篇文章不会具体分析很多每个方法内部具体逻辑，只为了研究一下浏览器加载文件后以及我后，都调用了哪些方法，这些方法都是做什么的等等。从 new Vue()开始看vue运行流程本篇文章不会具体分析很多每个方法内部具体逻辑，只为了研究一下浏览器加载vuejs文件后以及我new Vue后，都调用了哪些方法，这些方法都是做什么的等等。以便对vue的执行流程有个大致了解，方便遇...

hiyayiji 2019-08-22 18:14 评论0 收藏0
4月份前端资源分享

摘要：更多资源请文章转自月份前端资源分享关于的思考一款有趣的动画效果跨站资源共享之二最流行的编程语言能做什么到底什么是闭包的第三个参数跨域资源共享详解阮一峰前端要给力之语句在中的值周爱民中国第二届视频花絮编码规范前端工程师手册奇舞周刊被忽视的更多资源请Star：https://github.com/maidishike... 文章转自：https://github.com/jsfron...

jsdt 2019-08-20 15:54 评论0 收藏0
根据调试工具看Vue源码之computed（一）

摘要：官方定义类型详细计算属性将被混入到实例中。所有和的上下文自动地绑定为实例计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果某个依赖比如非响应式属性在该实例范畴之外，则计算属性是不会被更新的。官方定义类型：{ [key: string]: Function | { get: Function, set: Function } } 详细：计算属性将被混入到 V...

aisuhua 2019-08-26 13:34 评论0 收藏0