qq_35094120的博客

我们在组件里面写的会被渲染成一个对象，该对象里面的参数就是header后面的值，template里面的表达式就是函数返回值，header会被当做函数的key。当渲染到时，会先根据name找到key为header函数，然后将props的值{user:'王哥'}当做参数传给该函数并执行返回一个vnode。

transition组件大家肯定都用过，这个组件是Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果，现在我们从源码看看vue是怎么实现的。

使用v-model会将当前的input设置oninput监听事件将最新的值赋给当前绑定的变量，而且会使用domProps给当前dom设置初始值。最后触发insertd的钩子设置composition事件。

会给当前dom判断添加监听事件，并根据后面的enter去判断触发的事件是否和用户需要的是否相等，一致就会触发函数。

keep-alive组件就是取出内部第一个组件并返回，然后在挂载前放入缓存列表。当有缓存的时候直接拿当前的实例覆盖新的vnode的实例。

bind的执行时机是在被插入到父元素之前执行。insertd的执行时机是当前组件的template下的elm全部完成插入后会放入insertedVnodeQueue队列等待整个组件elm被插入body，然后和组件级的insertd一起触发invokeInsertHook。update的执行是在patchVnode阶段，此时是在更新节点信息前执行，执行完以后再开始元素的一些操作componentUpdated的执行是在执行完元素的操作后执行，并不是指字面的组件更新完毕。

前面我们分析了v-model的原理，接下来我们看看v-bind的实现又是怎样的呢？

前几篇文章我们分析了computed、watch以及双向绑定的原理，有了前面的基础我们继续分析v-model的原理。

watch实现原理

..}...};// true?}}}};}该方法执行过程在收集依赖部分分析。返回该函数后执行Object.defineProperty(target, key, sharedPropertyDefinition)，给当前的vm设置getA响应式。至此设置响应完毕。

的pitch方法，如果pitch方法都没有返回值，那么将从右往左加载各个loader，同时每个loader的返回值将传递给下一个loader，直到执行完inline-loader上的所有loader。以第一行为例，webpack会返回.App.vue的内容并且再次通过vue-loader，这里和inline-loader不一样，inline-loader会以自己的loader为准，不会被module.rules里面设置的loader正则匹配，而是直接用inline-loader去处理。

2.使用$forceUpdate添加当前的vm的watcher并在queue中，最后异步执行flushSchedulerQueue，该函数遍历quene执行watcher的run方法，该方法会执行vm实例的_update方法完成更新。首先触发watcher.before()，该方法是beforeUpdate的hook。1.获取监听文件最新的render和staticRenderFns并赋值给当前的VueComponent和当前vm实例。在callbacks里面放入一个执行回调的函数。

定义依赖是什么时候开始的呢？get: noop,set: noop在vm实例中添加了_data对象并将data的数据给了_data。...!return ob;if ((!key: key});shallow?},if (!return;return;else if (!