脚本宝典收集整理的这篇文章主要介绍了[_v(_s(name))])}"")，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

Vue2.0 核心之响应式流程

看了部分Vue源码分析或运行机制的文章，接收到这些信息：

• 使用Object.defineProperty实现响应监听，
• 使用Dep，Wacther实现依赖收集追踪
• 使用Virtual Dom、高效diff算法实现最小化更新

对整个流程还是没有理解，或者写了流程，也是作者自己实现的一套，不是Vue的源码。为了熟悉Vue真正的流程花了点时间看了Vue的源码，通过debugger（浏览器版本）自己梳理了一遍。

以下代码来源自Vue，只做了删减，保留核心。

new Vue(options)的执行流程，debugger的主体流程如下：

1. beforeCreate Hook

2. initSate()

   • initData() -- oberve
3. created Hook

4. vm.$mount(vm.$options.el)

   1. 根据template解析出render function

   2. 声明 update function

        updateComponent = function () {
            vm._update(vm._render(), hydrating);
        };

   3. new Watcher(vm, updateComponent, noop,{before...}
   4. mounted Hook

不考虑updateComponent和Hooks剩下：

1. initData() -- oberve
2. new Watcher(vm, updateComponent, noop,{before...}

这两个步骤实现了依赖的收集与通知、以及初始化，我在github上的项目learnVue截取了Vue核心代码进行流程学习，以下是我简化后的代码：

    import {Observer} from './observer';
    import  Watcher  from "./watcher";
    let noop =function(){};
    let vm={
        _watchers:[],
        data :{
            name:'jack',
            age:12
        }
        // render:new Function("with(this){return _c('div',{attrs:{"id"":""app""}}
脚本宝典总结
       
以上是脚本宝典为你收集整理的[_v(_s(name))])}"")全部内容，希望文章能够帮你解决[_v(_s(name))])}"")所遇到的问题。
		
如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。
		
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。