Vue 2 与 Vue 3

class Vue {
constructor(options) {
this.$options = options;
this.$data = options.data;

//对data选项做响应式处理
observe(this.$data);

//代理data到vm上
proxy(this);

//执行编译
new Compile(options.el, this);
}
}

function observe(obj) {
if (typeof obj !== "object" || obj == null) {
return;
}
new Observer(obj);
}

class Observer {
constructor(value) {
this.value = value;
this.walk(value);
}
walk(obj) {
Object.keys(obj).forEach((key) => {
defineReactive(obj, key, obj[key]);
});
}
}

class Compile {
constructor(el, vm) {
this.$vm = vm;
this.$el = document.querySelector(el); //获取dom
if (this.$el) {
this.compile(this.$el);
}
}
compile(el) {
const childNodes = el.childNodes;
Array.from(childNodes).forEach((node) => { //遍历子元素
if(this.isElement(node)) {//判断是否为节点
console.log("编译元素" + node.nodeName);
} else if (this.isInterpolation(node)) {
console.log("编译插值文本"+ node.textContent); // 判断是否为插值文本
{{}}
}
if(node.childNodes && node.childNodes.length > 0) { // 判断是否有子
元素
this.compile(node);// 对子元素进行递归遍历
}
});
}
isElement(node) {
return node.nodeType == 1;
}
isInterpolation(node) {
return node.nodeType == 3 && /\{\{(.*)\}\}/.test(node.textContent);
}
}

// 负责更新视图
class Watcher {
constructor(vm, key, updater) {
this.vm = vm
this.key = key
this.updaterFn = updater

//创建实例时，把当前实例指定到Dep.target静态属性上
Dep.target = this
// 读—下key，触发get
vm[key]
//置空
Dep.target = null

//未来执行dom更新函数，由dep调用的
update( ) {
this.updaterFn.call(this.vm, this.vm[this.key])
}
}

class Dep {
constructor() {
this.deps = []; // 依赖管理
}
addDep(dep) {
this.deps.push(dep);
}
notify() {
this.deps.forEach((dep) => dep.update());
}
}

class Watcher {
constructor(vm, key, updateFn) {
Dep.target = this;
this.vm[this.key];
Dep.target = null;
}
}

function defineReactive(obj, key, val) {
this.observe(val);
const dep = new Dep();
Object.defineProperty(obj, key, {
get() {
Dep.target && dep.addDep(Dep.target);// Dep.target也就是Watcher实例
return val;

set(newVal) {
if (newVal === val) return;
dep·notify(); // 通知dep执行更新方法
},
});
}

props:{
//字符串形式
name:String //接收的类型参数
//对象形式
age:{
type:Number，//接收的类型为数值
defaule:18，//默认值为18
require:true // age属性必须传递
}
}

this.$emit('add', good)

<Children @add="cartAdd($event)" />

<Children ref="foo" />

this.$refs.foo//获取子组件实例，通过子组件实例我们就能拿到对应的数据

this.$bus.$emit('foo')

// 创建一个中央时间总线类
class Bus {
constructor() {
this.callbacks = {};// 存放事件的名字
}
$on(name, fn) {
this.callbacks[name] = this.callbacks[name] || [];
this.callbacks[namel.push(fn);
}
$emit(name, args) {
if (this.callbacks[name]) {
this.callbacks[name].forEach((cb) => cb(args));
}
}
}

// main.js
Vue.prototype.$bus = new Bus() // 将$bus挂载到vue实例的原型上
//另一种方式
Vue.prototype.$bus = new Vue() // Vue已经实现了Bus的功能

this.$bus.$on('foo', this.handle)

this.$parent.on('add',this.add)

this.$parent.emit('add')

// child:并未在props中声明foo
<p>{{$attrs.foo}}</p>

// parent
<HelloWorld foo="foo"/>
// 给Grandson隔代传值，communication/index.vue
<Child2 msg="lalala" @some-event="onSomeEvent"></Child2>

// Child2做展开
<Grandson v-bind="$attrs"v-on="$listeners"></Grandson>

// Grandson使用
<div @click="$emit('some-event', 'msg from grandson')">
{{msg}}
</div>

provide( ){
return {
foo:'foo'
}

inject:['foo'] //获取到祖先组件传递过来的值

const app = new Vue({
el:"#app",
//对象格式
data:{
foo:"foo"
},
//函数格式
data( ){
return {
foo:"foo"
}
}
})

Vue.component('component1',{
template:`<div>组件</div>`,
data:{
foo:"foo"
}
})

function Component(){

}
Component.prototype.data = {
count : 0
}

const componentA = new Component()
const componentB = new Component()

console.log(componentB.data.count) // 0
componentA.data.count = 1
console.log(componentB.data.count) // 1

function Component(){
this.data = this.data()
}
Component.prototype.data = function (){
return {
count : 0
了
}

console.log(componentB.data.count) // 0
componentA.data.count = 1
console.log(componentB.data.count) // 0

function initData (vm: Component) {
let data = vm.\$options.data
data = vm.\_data = typeof data === ‘function'
? getData(data, vm)
: data || {}
}

Vue.prototype.\_init = function (options?: Object) {
// merge options
if (options && options.\_isComponent) {
// optimize internal component instantiation
// since dynamic options merging is pretty slow, and none of the
// internal component options needs special treatment.
initInternalComponent(vm, options)
} else {
vm.\$options =mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
)
}
}

strats.data = function (
parentVal: any,
childVal: any,
vm?: Component
): ?Function {
if (!vm) {
if (childVal && typeof childVal !== "function") {
process.env.NODE_ENV !== "production" &&
warn(
'The "data" option should be a function '+
"that returns a per-instance value in component " +
"definitions.",
vm
);

return parentVal;
}
return mergeDataOrFn(parentVal, childVal);
}
return mergeDataOrFn(parentVal, childVal, vm);
};

<p v-for="(value,key) in item" :key="key">
{{ value }}
</p>
<button @click="addProperty">动态添加新属性</button>

const app =new Vue({
el:"#app",
data:()=>{
item:{
oldProperty:"I旧属性"
}
},
methods:{
addProperty(){
this.items.newProperty = "新属性" // 为items添加新属性
console.log(this.items) // 输出带有newProperty的items
}
}
})

const obj = {}
Object.defineProperty(obj, 'foo', {
get( ) {
console.log(`get foo:${val}`);
return val
},
set(newVal) {
if (newVal !== val) {
console.log(`set foo:${newVal}`);
val = newVal
}
}
})
}

obj.foo
obj.foo ='new'

function set (target: Array<any> | Object, key: any, val: any): any {
defineReactive(ob.value, key, val)
ob.dep.notify()
return val
}

function defineReactive(obj, key, val) {
Object.defineProperty(obj, key, {
get( ) {
console.log(`get ${key}:${val}`);
return val
}，
set(newVal) {
if (newVal !== val) {
console.log(`set ${key}:${newVal}`);
val = newVal
了
}
})

this.someObject = Object.assign({},this.someObject,{newProperty1:1,newPrope
rty2:2 ...})

<Modalv-if="isShow" />

<li v-for="item in items" :key="item.id">
{{ item.label }}
</li>

<div id="app">
<p v-if="isShow" v-for="item in items">
{{ item.title }}
</p>
</div>

const app = new Vue({
el: "#app",
data() {
return {
items:[
{ title: "foo" },
{ title: "baz" }]
}
},
computed: {
isShow() {
return this.items && this.items.length > 0
}
}
})

f anonymous() {
with (this) { return
_c('div', { attrs: { "id": "app" } },
_l((items), function (item)
{ return (isShow) ? _c('p', [_v("\n" + _s(item.title) + "\n")]) : _e()
}),0)}
}

f anonymous() {
with(this){return
_c('div',{attrs:{"id":"app"}},
[(isShow)?[_v("\n"),
_l((items),function(item){return _c('p',[_v(_s(item.title))])})]:_e()],
)}

源码位置： \vue-dev\src\compiler\codegen\index.js

export function genElement (el: ASTElement, state: CodegenState): string {
、 if (el.parent) {
el.pre = el.pre || el.parent.pre
}
if (el.staticRoot && !el.staticProcessed) {
return genStatic(el, state)
、 } else if (el.once && !el.onceProcessed) {
return genOnce(el, state)
} else if (el.for && !el.forProcessed) {
return genFor(el, state)
} else if (el.if && !el.ifProcessed) {
return genIf(el, state)
} else if (el.tag === 'template'&& !el.slotTarget && !state.pre) {
return genChildren(el, state) Il 'void 0'
} else if (el.tag === 'slot') {
return genSlot(el, state)
} else {
// component or element

}

<template v-if="isShow">
<p v-for="item in items">
</template>

computed: {
items: function() {
return this.list.filter(function (item) {
return item.isShow
})
}
}

<Model v-show="isShow" />
<Model v-if="isShow" />

// https://github.com/vuejs/vue-next/blob/3cd30c5245da0733f9eb6f29d220f39c
/packages/runtime-dom/src/directives/vShow.ts
export const vShow: ObjectDirective<VShowElement> = {
beforeMount(el, { value }, { transition }) {
el._vod = el.style.display === 'none'?'': el.style.display
if (transition && value) {
transition.beforeEnter(el)
} else {
setDisplay(el, value)
}
},
mounted(el, { value }, { transition }) {
if (transition && value) {
transition.enter(el)
}
},
updated(el, { value, oldValue }, { transition }) {
//..
},
beforeUnmount(el, { value }) {
setDisplay(el, value)
}

// https://github.com/vuejs/vue-next/blob/cdc9f336fd/packages/compiler-cor
e/src/transforms/vIf.ts
export const transformIf = createStructuralDirectiveTransform(
/^(if|else|else-if)$/,
(node, dir, context) => {
return processIf(node, dir, context, (ifNode, branch, isRoot) => {
//..
return () => {
if (isRoot) {
ifNode.codegenNode = createCodegenNodeForBranch(
branch,
key,
context
) as IfConditionalExpression
} else {
// attach this branch's codegen node to the v-if root.
const parentCondition = getParentCondition(ifNode.codegenNode!)
parentCondition.alternate = createCodegenNodeForBranch(
branch,
key + ifNode.branches.length - 1,
context
)
}
}
})
}
）

<ul>
<li v-for="item in items" :key="item.id">...</li>
</ul>

<Comp :key="+new Date()" />

<body>
<div id="demo">
<p v-for="item in items" :key="item">{{item}}</p>
</div>
<script src="../../dist/vue.js"></script>
<script>
//创建实例
const app = new Vue({
el: '#demo',
data: { items: ['a', 'b', 'c', 'd', 'e'] },
mounted () {
setTimeout(() => {
this.items.splice(2, 0, 'f') //
}, 2000);
},
});
</script>
</body>

function sameVnode (a, b) {
return (
a.key === b.key && (
(
a.tag === b.tag &&
a.isComment === b.isComment &&
isDef(a.data) ===isDef(b.data) &&
sameInputType(a, b)
）|（
isTrue(a.isAsyncPlaceholder) &&
a.asyncFactory === b.asyncFactory&&
isUndef(b.asyncFactory.error)

}

function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
if (isUndef(oldStartVnode)) {
} else if (isUndef(oldEndVnode)) {
} else if (sameVnode(oldStartVnode, newStartVnode)) {
} else if (sameVnode(oldEndVnode, newEndVnode)) {
} else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode move

} else {
if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldC
h, oldStartIdx, oldEndIdx)
idxInOld = isDef(newStartVnode.key)

if (isUndef(idxInOld)) { // New element
createElm(newStartVnode, insertedVnodeQueue, parentElm, ol
dStartVnode.elm, false, newCh, newStartIdx)
} else {
vnodeToMove = oldCh[idxInOld]
if (sameVnode(vnodeToMove, newStartVnode)){
patchVnode(vnodeToMove, newStartVnode, insertedVnodeQu
eue, newCh, newStartIdx)
oldCh[idxInOld] = undefined

} else {
// same key but different element. treat as new elemen

}
}
newStartVnode = newCh[++newStartIdx]
}

Vue.mixin({
created: function () {
console.log("全局混入")
}
})

var myMixin = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}

Vue.component('componentA',{
mixins: [myMixin]
})

const Modal = {
template: '#modal',
data() {
return {
isShowing: false
}
},
methods: {
toggleShow() {
this.isShowing = !this.isShowing;
}
}
}

const Tooltip = {
template: '#tooltip',
data() {
return {
isShowing: false
}
},
methods: {
toggleShow() {
this.isShowing = !this.isShowing;
}
}
}

const toggle = {
data() {
return {
isShowing: false
}
},
methods: {
toggleShow() {
this.isShowing = !this.isShowing;
}
}
}

const Modal = {
template:'#modal',
mixins: [toggle]
};

const Tooltip = {
template:'#tooltip',
mixins: [toggle]
}

export function initMixin (Vue: GlobalAPI) {
Vue.mixin = function (mixin: Object) {
this.options = mergeOptions(this.options, mixin)
return this
}
}

export function mergeOptions (
parent: Object,
child: Object,
vm?: Component
): Object {

if（child.mixins）{ // 判断有没有mixin 也就是mixin里面挂mixin的情况 有的话递归进
行合并
for (let i = 0, l = child.mixins.length; i < l; i++) {
parent = mergeOptions(parent, child.mixins[i], vm)
}
}

const options = {}
let key
for (key in parent) {
mergeField(key) // 先遍历parent的key 调对应的strats[XXX]方法进行合并
}
for (key in child) {
if(!hasOwn(parent，key)）{ // 如果parent已经处理过某个key就不处理了
mergeField(key) // 处理child中的key 也就parent中没有处理过的key
}
}
function mergeField (key) {
const strat = strats[key] || defaultStrat
options[key] = strat(parent[key]，child[key]，vm，key)// 根据不同类型的
options调用strats中不同的方法进行合并
}
return options
}

strats.props =
strats.methods =
strats.inject =
strats.computed = function (
parentVal: ?Object,
childVal: ?Object,
vm?: Component,
key: string
): ?Object {
if (!parentVal) return childVal // 如果parentVal没有值，直接返回childVal
const ret = Object.create(null) // 创建—个第三方对象 ret
extend(ret，parentVal) // extend方法实际是把parentVal的属性复制到ret中
if（childVal）extend(ret，childVal）// 把childVal的属性复制到ret中
return ret
}
strats.provide = mergeDataOrFn

strats.data = function(parentVal, childVal, vm) {
return mergeDataOrFn(
parentVal, childVal, vm
)
};

function mergeDataOrFn(parentVal, childVal, vm) {
return function mergedInstanceDataFn() {
var childData = childVal.call(vm, vm) // 执行data挂的函数得到对象
var parentData = parentVal.call(vm, vm)
if (childData) {
return mergeData(childData,parentData) //将2个对象进行合并
} else {
return parentData //如果没有childData 直接返回parentData
}
}
}

function mergeData(to, from) {
if (!from) return to
var key, toVal, fromVal;
var keys = Object.keys(from);
for (var i = 0; i < keys.length; i++) {
key = keys[i];
toVal = to[key];
fromVal = from[key];
//如果不存在这个属性，就重新设置
if (!to.hasOwnProperty(key)) {
set(to, key, fromVal);
一
存在相同属性，合并对象
else if (typeof toVal =="object" && typeof fromVal =="object") {
mergeData(toVal, fromVal);

return to
}

function mergeHook (
parentVal: ?Array<Function>,
childVal: ?Function | ?Array<Function>
): ?Array<Function> {
return childVal
? parentVal
?parentVal.concat(childVal)
: Array.isArray(childVal)
? childVal
: [childVal]
: parentVal
}

LIFECYCLE_H00KS.forEach(hook => {
strats[hook] = mergeHook
})

// watch
strats.watch = function (
parentVal,
childVal,
vm,
key
) {
// work around Firefox's Object.prototype.watch...
if (parentVal === nativeWatch) { parentVal = undefined; }
if (childVal === nativeWatch) { childVal = undefined; }
/* istanbul ignore if */
if (!childVal) { return Object.create(parentVal || null) }
{
assertObjectType(key, childVal, vm);
}
if (!parentVal) { return childVal }
var ret= {};
extend(ret, parentVal);
for (var key$1 in childVal) {
var parent = ret[key$1];
var child = childVal[key$1];
if (parent && !Array.isArray(parent)) {
parent = [parent];
}
ret[key$1] = parent
? parent.concat(child)
: Array.isArray(child) ? child : [child];
}

return ret
};

strats.components=
strats.directives=

strats.filters = function mergeAssets(
parentVal, childVal, vm, key
) {
var res = Object.create(parentVal || null);
if (childVal) {
for (var key in childVal) {
res[key] = childVal[key];
}
}
return res
}

<input type="text" v-model.lazy="value">
<p>{{value}}</p>

<input type="text" v-model.trim="value">

<input v-model.number="age" type="number">

<div @click="shout(2)">
<button @click.stop="shout(1)">ok</button>
</div>
//只输出1

<form v-on:submit.prevent="onSubmit"></form>

<button @click.once="shout(1)">ok</button>

<div @click.capture="shout(1)">
obj1
<div @click.capture="shout(2)">
obj2
<div @click="shout(3)">
obj3
<div @click="shout(4)">
obj4
</div>
</div>
</div>
</div>
// 输出结构：1 2 4 3

<!--滚动事件的默认行为（即滚动行为）将会立即触发-->
<!-- 而不会等待\`onScroll完成-->
<!--这其中包含\`event.preventDefault()的情况 —->
<div v-on:scroll.passive="onScroll">...</div>

<my-component v-on:click.native="doSomething"></my-component>

// 只有按键为keyCode的时候才触发
<input type="text" @keyup.keyCode="shout()">

<button @click.left="shout(1)">ok</button>
<button @click.right="shout(1)">ok</button>
<button @click.middle="shout(1)">ok</button>

Vue.config.keyCodes.f2 = 113

//父组件
<comp :myMessage.sync="bar"></comp>
//子组件
this.$emit('update:myMessage',params);

//父亲组件
<comp :myMessage="bar" @update:myMessage="func"></comp>
func(e){
this.bar = e;

//子组件js
func2(){
this.$emit('update:myMessage',params);
}

<input id="uid" title="title1" value="1" :index.prop="index">

<svg :viewBox="viewBox"></svg>

const vm = new Vue({
el: '#app',
data: {
message：'原始值'
}
})

this.message =修改后的值1'
this.message ='修改后的值2'
this.message ='修改后的值3'

console.log(vm.$el.textContent) // 原始值

for(let i=0; i<100000; i++){
num = i
}

//修改数据
vm.message = '修改后的值'
// DOM 还没有更新
console.log(vm.$el.textContent) // 原始的值
Vue.nextTick(function () {
// DOM 更新了
console.log(vm.$el.textContent) // 修改后的值
})

this.message = '修改后的值'
console.log(this.$el.textContent) // =>'原始的值'
this.$nextTick(function () {
console.log(this.$el.textContent) // =>修改后的值'
})

this.message = 修改后的值'
console.log(this.$el.textContent) // => '原始的值'
await this.$nextTick()
console.log(this.$el.textContent) // =>修改后的值

export function nextTick(cb?: Function, ctx?: Object) {
let _resolve;

// cb 回调函数会经统一处理压入 callbacks 数组
callbacks.push(() => {
if (cb) {
// 给 cb 回调函数执行加上了 try-catch 错误处理
try {
cb.call(ctx);
} catch (e) {
handleError(e, ctx, 'nextTick');
}
} else if (_resolve) {
_resolve(ctx);
}
});

// 执行异步延迟函数 timerFunc
if (!pending) {
pending = true;
timerFunc();
}

// 当 nextTick 没有传入函数参数的时候，返回一个 Promise 化的调用
if (!cb && typeof Promise !== 'undefined') {
return new Promise(resolve => {
_resolve = resolve;
});
}
}

export let isUsingMicroTask = false
if (typeof Promise !== 'undefined'&& isNative(Promise)) {
//判断1:是否原生支持Promise
const p = Promise.resolve()
timerFunc = ( ) => {
p.then(flushCallbacks)
if (isIOS) setTimeout(noop)
}
isUsingMicroTask = true
}else if (!isIE && typeof MutationObserver !== 'undefined'&& (
isNative(MutationObserver) ||
MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
//判断2:是否原生支持MutationObserver
let counter = 1
const observer = new MutationObserver(flushCallbacks)
const textNode = document.createTextNode(String(counter))
observer.observe(textNode, {
characterData: true
})
timerFunc = ( ) => {
counter = (counter + 1) % 2
textNode.data = String(counter)
}
isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined'&& isNative(setImmediate))
{
//判断3：是否原生支持setImmediate
timerFunc = ( ) => {
setImmediate(flushCallbacks)
}
} else {
//判断4:上面都不行，直接用setTimeout
timerFunc = ( ) => {
setTimeout(flushCallbacks, 0)

}

function flushCallbacks () {
pending = false
const copies = callbacks.slice(0)
callbacks.length = 0
for (let i = 0; i < copies.length; i++) {
copies[i]()
}

function Vue (options) {
if (process.env.NODE_ENV !== 'production'&&
!(this instanceof Vue)
){
warn('Vue is a constructor and should be called with the `new keyword'
)
}
this._init(options)
}

initMixin(Vue); // 定义 \_init
stateMixin(Vue); // 定义 \$set \$get \$delete \$watch 等
eventsMixin(Vue); // 定义事件 \$on \$once \$off \$emit
lifecycleMixin(Vue);// 定义 \_update \$forceUpdate \$destroy
renderMixin(Vue); // 定义render 返回虚拟dom

Vue.prototype.\_init = function (options?: Object) {
const vm: Component = this
// a uid
vm.\_uid = uid++
let startTag, endTag
/\* istanbul ignore if \*/
if (process.env.NODE\_ENV !== 'production'&& config.performance && mar

startTag =\`vue-perf-start:\${vm.\_uid}
endTag =\`vue-perf-end:\${vm.\_uid}
mark(startTag)
}
// a flag to avoid this being observed

// merge options
// 合并属性，判断初始化的是否是组件，这里合并主要是mixins 或 extends 的方法
if (options&& options.\_isComponent) {
// optimize internal component instantiation
// since dynamic options merging is pretty slow, and none of the
// internal component options needs special treatment.
initInternalComponent(vm, options)
} else { // 合并vue属性

)
}

if (process.env.NODE\_ENV !== 'production') {
// 初始化proxy拦截器
initProxy(vm)
} else {

// 初始化组件生命周期标志位
initLifecycle(vm)
//初始化组件事件侦听
initEvents(vm)
//初始化渲染方法
initRender(vm)
callHook(vm, 'beforeCreate')

//初始化依赖注入内容，在初始化data、props之前
initInjections(vm) // resolve injections before data/props

// 初始化props/data/method/watch/methods

initState(vm)

initProvide(vm) // resolve provide after data/props

callHook(vm, 'created')

/* istanbul ignore if */

if (process.env.NoDE_ENV !== 'production'&& config.performance && mar
k) {

vm._name = formatComponentName(vm, false)

mark(endTag)

measure(`vue ${vm._name} init`, startTag, endTag)

}

//挂载元素

if (vm.$options.el) {

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

}

}

export function initState (vm: Component) {
// 初始化组件的watcher列表
vm.\_watchers = []
const opts = vm.\$options
// 初始化props
if (opts.props) initProps(vm, opts.props)
//初始化methods方法
if (opts.methods) initMethods(vm, opts.methods)
if (opts.data) {
// 初始化data
initData(vm)
} else {
observe(vm.\_data = {}, true /\* asRootData \*/)
}
if (opts.computed) initComputed(vm, opts.computed)
if (opts.watch && opts.watch !== nativeWatch) {
initWatch(vm, opts.watch)
}

function initData (vm: Component) {
let data = ym.\$options.data
//获取到组件上的data
data = vm.\_data = typeof data === 'function'
? getData(data, vm)
: data || {}
if (!isPlainObject(data)) {
data = {}
process.env.NODE\_ENV !== 'production' && warn(
'data functions should return an object:\n' +
'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function'
vm
)
}
// proxy data on instance
const keys = Object.keys(data)
const props = vm.\$options.props
const methods = vm.\$options.methods
let i = keys.length
while (i--) {
const key = keys[i]
if (process.env.NODE\_ENV !== 'production') {
//属性名不能与方法名重复
if (methods && hasOwn(methods, key)) {
warn(
\`Method "\${key}" has already been defined as a data property.\`,
vm
)
}
}
// 属性名不能与state名称重复
if (props && hasOwn(props, key)) {
process.env.NODE\_ENV !== 'production'&& warn(
The data property "\${key}" is already declared as a prop.
Use prop default value instead.\`,
vm
)
} else if (!isReserved(key)) { // 验证key值的合法性
//将\_data中的数据挂载到组件vm上，这样就可以通过this.xxx访问到组件上的数据
proxy(vm,\`\_data\`, key)
}
}
// observe data
//响应式监听data是数据的变化

observe(data, true /\* asRootData \*/)

Vue.prototype.\$mount = function (
el?: string | Element,
hydrating?: boolean
): Component {
// 获取或查询元素
el = el && query(el)
/\* istanbul ignore if \*/
// vue 不允许直接挂载到body或页面文档上
if (el === document.body| el === document.documentElement) {
process.env.NODE\_ENV !== 'production'&& warn(
Do not mount Vue to <html> or <body> - mount to normal elements ins

)
return this
}
const options = this.\$options
// resolve template/el and convert to render function
if (!options.render) {
let template = options.template
//存在template模板，解析vue模板文件
if (template) {
if (typeof template === 'string') {
if (template.charAt(0) === '#') {
template = idToTemplate(template)

if (process.env.NODE\_ENV !== 'production'&& !template) {
warn(

else if (template.nodeType) {
template = template.innerHTML
} else {
if (process.env.NODE\_ENV !== 'production') {
warn('invalid template option:'+ template, this)
}
return this
}
} else if (el) {
// 通过选择器获取元素内容

template = getOuterHTML(el)
}

if (template) {

/* istanbul ignore if */

if (process.env.NoDE_ENV !== 'production'&& config-performance && m
ark) {

mark('compile')

}

/**

*1.将temmplate解析ast tree

*2.将ast tree转换成render语法字符串

*3.生成render方法

*/

const { render, staticRenderFns } = compileToFunctions(template, {

outputSourceRange: process.env.NoDE_ENV !=='production',

shouldDecodeNewlines,

shouldDecodeNewlinesForHref,

delimiters: options.delimiters,

comments: options.comments

}, this)

options.render = render

options.staticRenderFns = staticRenderFns

/* istanbul ignore if */

if (process.env.NODE_ENV !== 'production'&& config.performance && m
ark) {

mark('compile end')

measure(`vue ${this._name} compile`, 'compile', 'compile end')

}

}

}

return mount.call(this, el, hydrating)

}

// public mount method
Vue.prototype.$mount = function (
el?: string | Element,
hydrating?: boolean
): Component {
el = el && inBrowser ? query(el) : undefined
//渲染组件
return mountComponent(this, el, hydrating)
}

export function mountComponent (
vm: Component,
el: ?Element,
hydrating?: boolean
): Component {
vm.$el = el
//如果没有获取解析的render函数，则会抛出警告
// render是解析模板文件生成的
if (!vm.$options.render) {
vm.$options.render = createEmptyVNode
if (process.env.NoDE ENV !== 'production') {
/* istanbul ignore if */
if ((vm.$options.template && vm.$options.template.charAt(0) !== '#')
vm.$options.el || el) {
warn(
'You are using the runtime-only build of Vue where the template
+
'compiler is not available. Either pre-compile the templates int
+
'render functions, or use the compiler-included build.',
vm
)
} else {
// 没有获取到vue的模板文件
warn(
'Failed to mount component: template or render function not defi
ned.',
vm
)
}
}
}
//执行beforeMount钩子
callHook(vm, 'beforeMount')

let updateComponent
/* istanbul ignore if */
if (process.env.NoDE ENV !== production'&& config.performance && mark)
{
updateComponent = ( ) => {
const name = vm._name
const id = vm._uid
const startTag =`vue-perf-start:${id}
const endTag =`vue-perf-end:${id}

// 定义vue 原型上的render方法
Vue.prototype.\_render = function (): VNode {
const vm: Component = this
//render函数来自于组件的option
const { render, \_parentVnode } = vm.\$options
if (\_parentVnode) {
vm.\$scopedSlots = normalizeScopedSlots(
\_parentVnode.data.scopedSlots,
vm.\$slots,
vm.\$scopedSlots
)
}
// set parent vnode. this allows render functions to have access
// to the data on the placeholder node.
vm.\$vnode = \_parentVnode
// render self
let vnode
try {
// There's no need to maintain a stack because all render fns are

// when parent component is patched.
currentRenderingInstance = vm
//调用render方法，自己的独特的render方法，传入createElement参数，生成vN

vnode = render.call(vm. renderProxy, vm.\$createElement)
} catch (e) {
handleError(e, vm,\`render\`)
return error render result,
// or previous vnode to prevent render error causing blank compone

if (process.env.NODE\_ENV !== production'&& vm.\$options.renderErr
or) {
try {
vnode = vm.\$options.renderError.call(vm.\_renderProxy, vm.

} catch (e) {
handleError(e, vm,\`renderError\`)
vnode = vm.\_vnode
}
} else {

vnode = vm._vnode
}

} finally {

currentRenderingInstance = null

}

// if the returned array contains only a single node, allow it

if (Array.isArray(vnode) && vnode.length === 1) {

vnode =vnode[0]

}

// return empty vnode in case the render function errored out

if (!(vnode instanceof VNode)) {

if (process.env.NODE_ENV !== ‘production'&& Array.isArray(vnode))
{

warn(

'Multiple root nodes returned from render function. Rende
r function ' +

'should return a single root node.',

vm

)

}

vnode = createEmptyVNode()

}

// set parent

vnode.parent = _parentVnode

return vnode

}

Vue.prototype.\_update = function (vnode: VNode, hydrating?: boolean) {
const vm: Component = this
const prevEl = vm.\$el
const prevVnode = vm.\_vnode
//设置当前激活的作用域
const restoreActiveInstance = setActiveInstance(vm)
vm.\_vnode = vnode
// Vue.prototype.\_\_patch\_\_ is injected in entry points
// based on the rendering backend used.
if (!prevVnode) {
// initial render
//执行具体的挂载逻辑
vm.\$el = vm.\_\_patch\_\_(vm.\$el, vnode, hydrating, false /\* removeOnly

} else {
// updates

}
restoreActiveInstance()
// update\_vue\_\_reference
if (prevEl) {

}
if (vm.\$el) {

}
// if parent is an HOC, update its \$el as well
if (vm.\$vnode && vm.\$parent && vm.\$vnode === vm.\$parent.\_vnode) {

}
// updated hook is called by the scheduler to ensure that children are
// updated in a parent's updated hook.
}

function patch(oldVnode, vnode, hydrating, removeOnly) {
if(isUndef(vnode)) { // 没有新节点，直接执行destory钩子函数
if (isDef(oldVnode)) invokeDestroyHook(oldVnode)
return
}
let isInitialPatch = false
const insertedVnodeQueue = []
if (isUndef(oldVnode)) {
isInitialPatch = true
createElm(vnode，insertedVnodeQueue)//没有旧节点，直接用新节点生成do

} else {
const isRealElement = isDef(oldVnode.nodeType)
if (!isRealElement && sameVnode(oldVnode, vnode)) {
//判断旧节点和新节点自身一样，一致执行patchVnode
patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly)
} else {
//否则直接销毁及旧节点，根据新节点生成dom元素
if (isRealElement) {
if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR\_A
TTR)) {
oldVnode.removeAttribute(SSR\_ATTR)
hydrating = true
}
if (isTrue(hydrating)) {
if (hydrate(oldVnode, vnode, insertedVnodeQueue)) {
invokeInsertHook(vnode, insertedVnodeQueue, true)
return oldVnode

}
oldVnode = emptyNodeAt(oldVnode)
}
return vnode.elm
}
}
}

function patchVnode (oldVnode, vnode, insertedVnodeQueue, removeOnly) {
//如果新旧节点一致，什么都不做
if (oldVnode === vnode) {
return
}

//让vnode.el引用到现在的真实dom，当el修改时，vnode.el会同步变化
const elm = vnode.elm = oldVnode.elm

//异步占位符
if (isTrue(oldVnode.isAsyncPlaceholder)) {
if (isDef(vnode.asyncFactory.resolved)) {
hydrate(oldVnode.elm, vnode, insertedVnodeQueue)
} else {
vnode.isAsyncPlaceholder = true
}
return
}
//如果新旧都是静态节点，并且具有相同的key
//当vnode是克隆节点或是v-once指令控制的节点时，只需要把oldVnode.elm和oldVnod
e.child都复制到vnode上
//也不用再有其他操作
if (isTrue(vnode.isStatic) &&
isTrue(oldVnode.isStatic) &&
vnode.key === oldVnode.key&&
(isTrue(vnode.isCloned)l isTrue(vnode.isOnce))
) {
vnode.componentInstance = oldVnode.componentInstance
return
}

let i
constdata = vnode.data
if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {
i(oldVnode, vnode)

const oldCh = oldVnode.children
const ch = vnode.children
if (isDef(data) && isPatchable(vnode)) {
for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnod
e)
if (isDef(i = data.hook) && isDef(i = i.update)) i(oldVnode, vnode)
}
//如果vnode不是文本节点或者注释节点

if (isUndef(vnode.text)) {
// 并且都有子节点
if (isDef(oldCh) && isDef(ch)) {
// 并且子节点不完全一致，则调用updateChildren
if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueu
e, removeOnly)
//如果只有新的vnode有子节点
} else if (isDef(ch)) {
if (isDef(oldVnode.text)) nodeOps.setTextContent(elm,')
//elm已经引用了老的dom节点，在老的dom节点上添加子节点