Cao NoteVue.mixin 的使用场景和原理
- 在日常的开发中，我们经常会遇到在不同的组件中经常会需要用到一些相同或者相似的代码，这些代码的功能相对独立，可以通过
Vue的mixin功能抽离公共的业务逻辑，原理类似“对象的继承”，当组件初始化时会调用mergeOptions方法进行合并，采用策略模式针对不同的属性进行合并。当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”；如果混入的数据和本身组件的数据冲突，会以组件的数据为准 mixin有很多缺陷如：命名冲突、依赖问题、数据来源问题
基本使用
html
<script>
// Vue.options
Vue.mixin({
// 如果他是对象 每个组件都用mixin里的对象进行合并
data() {
return { a: 1, b: 2 }
},
})
// Vue.extend
Vue.component('my', {
// 组件必须是函数 Vue.extend => render(xxx)
data() {
return { x: 1 }
},
})
// 没有 new 没有实例 _init()
// const vm = this
new Vue({
el: '#app',
data() {
// 根可以不是函数
return { c: 3 }
},
})
</script><script>
// Vue.options
Vue.mixin({
// 如果他是对象 每个组件都用mixin里的对象进行合并
data() {
return { a: 1, b: 2 }
},
})
// Vue.extend
Vue.component('my', {
// 组件必须是函数 Vue.extend => render(xxx)
data() {
return { x: 1 }
},
})
// 没有 new 没有实例 _init()
// const vm = this
new Vue({
el: '#app',
data() {
// 根可以不是函数
return { c: 3 }
},
})
</script>相关源码
js
export default function initMixin(Vue){
Vue.mixin = function (mixin) {
// 合并对象
this.options=mergeOptions(this.options,mixin)
};
}
};
// src/util/index.js
// 定义生命周期
export const LIFECYCLE_HOOKS = [
"beforeCreate",
"created",
"beforeMount",
"mounted",
"beforeUpdate",
"updated",
"beforeDestroy",
"destroyed",
];
// 合并策略
const strats = {};
// mixin核心方法
export function mergeOptions(parent, child) {
const options = {};
// 遍历父亲
for (let k in parent) {
mergeFiled(k);
}
// 父亲没有 儿子有
for (let k in child) {
if (!parent.hasOwnProperty(k)) {
mergeFiled(k);
}
}
//真正合并字段方法
function mergeFiled(k) {
// strats合并策略
if (strats[k]) {
options[k] = strats[k](parent[k], child[k]);
} else {
// 默认策略
options[k] = child[k] ? child[k] : parent[k];
}
}
return options;
}export default function initMixin(Vue){
Vue.mixin = function (mixin) {
// 合并对象
this.options=mergeOptions(this.options,mixin)
};
}
};
// src/util/index.js
// 定义生命周期
export const LIFECYCLE_HOOKS = [
"beforeCreate",
"created",
"beforeMount",
"mounted",
"beforeUpdate",
"updated",
"beforeDestroy",
"destroyed",
];
// 合并策略
const strats = {};
// mixin核心方法
export function mergeOptions(parent, child) {
const options = {};
// 遍历父亲
for (let k in parent) {
mergeFiled(k);
}
// 父亲没有 儿子有
for (let k in child) {
if (!parent.hasOwnProperty(k)) {
mergeFiled(k);
}
}
//真正合并字段方法
function mergeFiled(k) {
// strats合并策略
if (strats[k]) {
options[k] = strats[k](parent[k], child[k]);
} else {
// 默认策略
options[k] = child[k] ? child[k] : parent[k];
}
}
return options;
}Vue 组件 data 为什么必须是个函数？
- 根实例对象
data可以是对象也可以是函数（根实例是单例），不会产生数据污染情况 - 组件实例对象
data必须为函数.vue文件在使用的时候实际上会转换成一个class，一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。如果data是对象的话，对象属于引用类型，会影响到所有的实例。所以为了保证组件在不同的实例之间data不冲突，data必须是一个函数，
简版理解
js
// 1.组件的渲染流程 调用Vue.component -> Vue.extend -> 子类 -> new 子类
// Vue.extend 根据用户定义产生一个新的类
function Vue() {}
function Sub() {
// 会将data存起来
this.data = this.constructor.options.data()
}
Vue.extend = function (options) {
Sub.options = options // 静态属性
return Sub
}
let Child = Vue.extend({
data: () => ({ name: 'test' }),
})
// 两个组件就是两个实例, 希望数据互不感染
let child1 = new Child()
let child2 = new Child()
console.log(child1.data.name)
child1.data.name = 'poetry'
console.log(child2.data.name)
// 根不需要 任何的合并操作 根才有vm属性 所以他可以是函数和对象 但是组件mixin他们都没有vm 所以我就可以判断 当前data是不是个函数// 1.组件的渲染流程 调用Vue.component -> Vue.extend -> 子类 -> new 子类
// Vue.extend 根据用户定义产生一个新的类
function Vue() {}
function Sub() {
// 会将data存起来
this.data = this.constructor.options.data()
}
Vue.extend = function (options) {
Sub.options = options // 静态属性
return Sub
}
let Child = Vue.extend({
data: () => ({ name: 'test' }),
})
// 两个组件就是两个实例, 希望数据互不感染
let child1 = new Child()
let child2 = new Child()
console.log(child1.data.name)
child1.data.name = 'poetry'
console.log(child2.data.name)
// 根不需要 任何的合并操作 根才有vm属性 所以他可以是函数和对象 但是组件mixin他们都没有vm 所以我就可以判断 当前data是不是个函数相关源码
js
// 源码位置 src/core/global-api/extend.js
export function initExtend(Vue: GlobalAPI) {
Vue.extend = function (extendOptions: Object): Function {
extendOptions = extendOptions || {}
const Super = this
const SuperId = Super.cid
const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {})
if (cachedCtors[SuperId]) {
return cachedCtors[SuperId]
}
const name = extendOptions.name || Super.options.name
if (process.env. NODE_ENV !== 'production' && name) {
validateComponentName(name)
}
const Sub = function VueComponent(options) {
this._init(options)
}
// 子类继承大Vue父类的原型
Sub.prototype = Object.create(Super.prototype)
Sub.prototype.constructor = Sub
Sub.cid = cid++
Sub.options = mergeOptions(Super.options, extendOptions)
Sub['super'] = Super
// For props and computed properties, we define the proxy getters on
// the Vue instances at extension time, on the extended prototype. This
// avoids Object.defineProperty calls for each instance created.
if (Sub.options.props) {
initProps(Sub)
}
if (Sub.options.computed) {
initComputed(Sub)
}
// allow further extension/mixin/plugin usage
Sub.extend = Super.extend
Sub.mixin = Super.mixin
Sub.use = Super.use
// create asset registers, so extended classes
// can have their private assets too.
ASSET_TYPES.forEach(function (type) {
Sub[type] = Super[type]
})
// enable recursive self-lookup
if (name) {
Sub.options.components[name] = Sub // 记录自己 在组件中递归自己 -> jsx
}
// keep a reference to the super options at extension time.
// later at instantiation we can check if Super's options have
// been updated.
Sub.superOptions = Super.options
Sub.extendOptions = extendOptions
Sub.sealedOptions = extend({}, Sub.options)
// cache constructor
cachedCtors[SuperId] = Sub
return Sub
}
}// 源码位置 src/core/global-api/extend.js
export function initExtend(Vue: GlobalAPI) {
Vue.extend = function (extendOptions: Object): Function {
extendOptions = extendOptions || {}
const Super = this
const SuperId = Super.cid
const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {})
if (cachedCtors[SuperId]) {
return cachedCtors[SuperId]
}
const name = extendOptions.name || Super.options.name
if (process.env. NODE_ENV !== 'production' && name) {
validateComponentName(name)
}
const Sub = function VueComponent(options) {
this._init(options)
}
// 子类继承大Vue父类的原型
Sub.prototype = Object.create(Super.prototype)
Sub.prototype.constructor = Sub
Sub.cid = cid++
Sub.options = mergeOptions(Super.options, extendOptions)
Sub['super'] = Super
// For props and computed properties, we define the proxy getters on
// the Vue instances at extension time, on the extended prototype. This
// avoids Object.defineProperty calls for each instance created.
if (Sub.options.props) {
initProps(Sub)
}
if (Sub.options.computed) {
initComputed(Sub)
}
// allow further extension/mixin/plugin usage
Sub.extend = Super.extend
Sub.mixin = Super.mixin
Sub.use = Super.use
// create asset registers, so extended classes
// can have their private assets too.
ASSET_TYPES.forEach(function (type) {
Sub[type] = Super[type]
})
// enable recursive self-lookup
if (name) {
Sub.options.components[name] = Sub // 记录自己 在组件中递归自己 -> jsx
}
// keep a reference to the super options at extension time.
// later at instantiation we can check if Super's options have
// been updated.
Sub.superOptions = Super.options
Sub.extendOptions = extendOptions
Sub.sealedOptions = extend({}, Sub.options)
// cache constructor
cachedCtors[SuperId] = Sub
return Sub
}
}nextTick 在哪里使用？原理是？
nextTick中的回调是在下次DOM更新循环结束之后执行延迟回调，用于获得更新后的DOM- 在修改数据之后立即使用这个方法，获取更新后的
DOM - 主要思路就是采用
微任务优先的方式调用异步方法去执行nextTick包装的方法
nextTick方法主要是使用了宏任务和微任务,定义了一个异步方法.多次调用nextTick会将方法存入队列中，通过这个异步方法清空当前队列。所以这个nextTick方法就是异步方法
根据执行环境分别尝试采用
- 先采用
Promise Promise不支持，再采用MutationObserverMutationObserver不支持，再采用setImmediate- 如果以上都不行则采用
setTimeout - 最后执行
flushCallbacks，把callbacks里面的数据依次执行
回答范例
nextTick中的回调是在下次DOM更新循环结束之后执行延迟回调，用于获得更新后的DOMVue有个异步更新策略，意思是如果数据变化，Vue不会立刻更新 DOM，而是开启一个队列，把组件更新函数保存在队列中，在同一事件循环中发生的所有数据变更会异步的批量更新。这一策略导致我们对数据的修改不会立刻体现在 DOM 上，此时如果想要获取更新后的 DOM 状态，就需要使用nextTick- 开发时，有两个场景我们会用到
nextTick
created中想要获取DOM时- 响应式数据变化后获取
DOM更新后的状态，比如希望获取列表更新后的高度
nextTick签名如下：function nextTick(callback?: () => void): Promise<void>
所以我们只需要在传入的回调函数中访问最新 DOM 状态即可，或者我们可以await nextTick()方法返回的Promise之后做这件事
- 在
Vue内部，nextTick之所以能够让我们看到 DOM 更新后的结果，是因为我们传入的callback会被添加到队列刷新函数(flushSchedulerQueue)的后面，这样等队列内部的更新函数都执行完毕，所有 DOM 操作也就结束了，callback自然能够获取到最新的 DOM 值
基本使用
js
const vm = new Vue({
el: '#app',
data() {
return { a: 1 }
},
})
// vm.$nextTick(() => {// [nextTick回调函数fn,内部更新flushSchedulerQueue]
// console.log(vm.$el.innerHTML)
// })
// 是将内容维护到一个数组里，最终按照顺序顺序。 第一次会开启一个异步任务
vm.a = 'test' // 修改了数据后并不会马上更新视图
vm.$nextTick(() => {
// [nextTick回调函数fn,内部更新flushSchedulerQueue]
console.log(vm.$el.innerHTML)
})
// nextTick中的方法会被放到 更新页面watcher的后面去const vm = new Vue({
el: '#app',
data() {
return { a: 1 }
},
})
// vm.$nextTick(() => {// [nextTick回调函数fn,内部更新flushSchedulerQueue]
// console.log(vm.$el.innerHTML)
// })
// 是将内容维护到一个数组里，最终按照顺序顺序。 第一次会开启一个异步任务
vm.a = 'test' // 修改了数据后并不会马上更新视图
vm.$nextTick(() => {
// [nextTick回调函数fn,内部更新flushSchedulerQueue]
console.log(vm.$el.innerHTML)
})
// nextTick中的方法会被放到 更新页面watcher的后面去相关代码如下
js
// src/core/utils/nextTick
let callbacks = []
let pending = false
function flushCallbacks() {
pending = false //把标志还原为false
// 依次执行回调
for (let i = 0; i < callbacks.length; i++) {
callbacks[i]()
}
}
let timerFunc //定义异步方法 采用优雅降级
if (typeof Promise !== 'undefined') {
// 如果支持promise
const p = Promise.resolve()
timerFunc = () => {
p.then(flushCallbacks)
}
} else if (typeof MutationObserver !== 'undefined') {
// MutationObserver 主要是监听dom变化 也是一个异步方法
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)
}
} else if (typeof setImmediate !== 'undefined') {
// 如果前面都不支持 判断setImmediate
timerFunc = () => {
setImmediate(flushCallbacks)
}
} else {
// 最后降级采用setTimeout
timerFunc = () => {
setTimeout(flushCallbacks, 0)
}
}
export function nextTick(cb) {
// 除了渲染watcher 还有用户自己手动调用的nextTick 一起被收集到数组
callbacks.push(cb)
if (!pending) {
// 如果多次调用nextTick 只会执行一次异步 等异步队列清空之后再把标志变为false
pending = true
timerFunc()
}
}// src/core/utils/nextTick
let callbacks = []
let pending = false
function flushCallbacks() {
pending = false //把标志还原为false
// 依次执行回调
for (let i = 0; i < callbacks.length; i++) {
callbacks[i]()
}
}
let timerFunc //定义异步方法 采用优雅降级
if (typeof Promise !== 'undefined') {
// 如果支持promise
const p = Promise.resolve()
timerFunc = () => {
p.then(flushCallbacks)
}
} else if (typeof MutationObserver !== 'undefined') {
// MutationObserver 主要是监听dom变化 也是一个异步方法
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)
}
} else if (typeof setImmediate !== 'undefined') {
// 如果前面都不支持 判断setImmediate
timerFunc = () => {
setImmediate(flushCallbacks)
}
} else {
// 最后降级采用setTimeout
timerFunc = () => {
setTimeout(flushCallbacks, 0)
}
}
export function nextTick(cb) {
// 除了渲染watcher 还有用户自己手动调用的nextTick 一起被收集到数组
callbacks.push(cb)
if (!pending) {
// 如果多次调用nextTick 只会执行一次异步 等异步队列清空之后再把标志变为false
pending = true
timerFunc()
}
}数据更新的时候内部会调用nextTick
js
// src/core/observer/scheduler.js
export function queueWatcher(watcher: Watcher) {
const id = watcher.id
if (has[id] == null) {
has[id] = true
if (!flushing) {
queue.push(watcher)
} else {
// if already flushing, splice the watcher based on its id
// if already past its id, it will be run next immediately.
let i = queue.length - 1
while (i > index && queue[i].id > watcher.id) {
i--
}
queue.splice(i + 1, 0, watcher)
}
// queue the flush
if (!waiting) {
waiting = true
if (process.env. NODE_ENV !== 'production' && !config.async) {
flushSchedulerQueue()
return
}
// 把更新方法放到数组中维护[nextTick回调函数,更新函数flushSchedulerQueue]
/**
* vm.a = 'test'; // 修改了数据后并不会马上更新视图
vm.$nextTick(() => {// [fn,更新]
console.log(vm.$el.innerHTML)
})
*/
nextTick(flushSchedulerQueue)
}
}
}// src/core/observer/scheduler.js
export function queueWatcher(watcher: Watcher) {
const id = watcher.id
if (has[id] == null) {
has[id] = true
if (!flushing) {
queue.push(watcher)
} else {
// if already flushing, splice the watcher based on its id
// if already past its id, it will be run next immediately.
let i = queue.length - 1
while (i > index && queue[i].id > watcher.id) {
i--
}
queue.splice(i + 1, 0, watcher)
}
// queue the flush
if (!waiting) {
waiting = true
if (process.env. NODE_ENV !== 'production' && !config.async) {
flushSchedulerQueue()
return
}
// 把更新方法放到数组中维护[nextTick回调函数,更新函数flushSchedulerQueue]
/**
* vm.a = 'test'; // 修改了数据后并不会马上更新视图
vm.$nextTick(() => {// [fn,更新]
console.log(vm.$el.innerHTML)
})
*/
nextTick(flushSchedulerQueue)
}
}
}computed 和 watch 相关
computed 和 watch 区别
- 当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性
computed
Computed本质是一个具备缓存的watcher，依赖的属性发生变化就会更新视图。 适用于计算比较消耗性能的计算场景。当表达式过于复杂时，在模板中放入过多逻辑会让模板难以维护，可以将复杂的逻辑放入计算属性中处理
jsx
;<template>{{ fullName }}</template>
export default {
data() {
return {
firstName: 'zhang',
lastName: 'san',
}
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
},
},
};<template>{{ fullName }}</template>
export default {
data() {
return {
firstName: 'zhang',
lastName: 'san',
}
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
},
},
}watch用于观察和监听页面上的 vue 实例，如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择
Watch没有缓存性，更多的是观察的作用，可以监听某些数据执行回调。当我们需要深度监听对象中的属性时，可以打开deep：true选项，这样便会对对象中的每一项进行监听。这样会带来性能问题，优化的话可以使用字符串形式监听，如果没有写到组件中，不要忘记使用unWatch手动注销
js
;<template>{{ fullName }}</template>
export default {
data() {
return {
firstName: 'zhang',
lastName: 'san',
fullName: 'zhang san',
}
},
watch: {
firstName(val) {
this.fullName = val + ' ' + this.lastName
},
lastName(val) {
this.fullName = this.firstName + ' ' + val
},
},
};<template>{{ fullName }}</template>
export default {
data() {
return {
firstName: 'zhang',
lastName: 'san',
fullName: 'zhang san',
}
},
watch: {
firstName(val) {
this.fullName = val + ' ' + this.lastName
},
lastName(val) {
this.fullName = this.firstName + ' ' + val
},
},
}computed:
computed是计算属性,也就是计算值,它更多用于计算值的场景computed具有缓存性,computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算computed适用于计算比较消耗性能的计算场景
watch:
- 更多的是「观察」的作用,类似于某些数据的监听回调,用于观察
props$emit或者本组件的值,当数据变化时来执行回调进行后续操作 - 无缓存性，页面重新渲染时值不变化也会执行
小结:
computed和watch都是基于watcher来实现的computed属性是具备缓存的，依赖的值不发生变化，对其取值时计算属性方法不会重新执行watch是监控值的变化，当值发生变化时调用其对应的回调函数- 当我们要进行数值计算,而且依赖于其他数据，那么把这个数据设计为
computed - 如果你需要在某个数据变化时做一些事情，使用
watch来观察这个数据变化
回答范例
思路分析
- 先看
computed,watch两者定义，列举使用上的差异 - 列举使用场景上的差异，如何选择
- 使用细节、注意事项
vue3变化
computed特点：具有响应式的返回值
js
const count = ref(1)
const plusOne = computed(() => count.value + 1)const count = ref(1)
const plusOne = computed(() => count.value + 1)watch特点：侦测变化，执行回调
js
const state = reactive({ count: 0 })
watch(
() => state.count,
(count, prevCount) => {
/* ... */
},
)const state = reactive({ count: 0 })
watch(
() => state.count,
(count, prevCount) => {
/* ... */
},
)回答范例
- 计算属性可以从组件数据派生出新数据，最常见的使用方式是设置一个函数，返回计算之后的结果，
computed和methods的差异是它具备缓存性，如果依赖项不变时不会重新计算。侦听器可以侦测某个响应式数据的变化并执行副作用，常见用法是传递一个函数，执行副作用，watch 没有返回值，但可以执行异步操作等复杂逻辑 - 计算属性常用场景是简化行内模板中的复杂表达式，模板中出现太多逻辑会是模板变得臃肿不易维护。侦听器常用场景是状态变化之后做一些额外的 DOM 操作或者异步操作。选择采用何用方案时首先看是否需要派生出新值，基本能用计算属性实现的方式首选计算属性.
- 使用过程中有一些细节，比如计算属性也是可以传递对象，成为既可读又可写的计算属性。
watch可以传递对象，设置deep、immediate等选项 vue3中watch选项发生了一些变化，例如不再能侦测一个点操作符之外的字符串形式的表达式；reactivity API中新出现了watch、watchEffect可以完全替代目前的watch选项，且功能更加强大
基本使用
js
// src/core/observer:45;
// 渲染watcher / computed watcher / watch
const vm = new Vue({
el: '#app',
data: {
firstname: '张',
lastname: '三',
},
computed: {
// watcher => firstname lastname
// computed 只有取值时才执行
// Object.defineProperty .get
fullName() {
// firstName lastName 会收集fullName计算属性
return this.firstname + this.lastname
},
},
watch: {
firstname(newVal, oldVal) {
console.log(newVal)
},
},
})
setTimeout(() => {
debugger
vm.firstname = '赵'
}, 1000)// src/core/observer:45;
// 渲染watcher / computed watcher / watch
const vm = new Vue({
el: '#app',
data: {
firstname: '张',
lastname: '三',
},
computed: {
// watcher => firstname lastname
// computed 只有取值时才执行
// Object.defineProperty .get
fullName() {
// firstName lastName 会收集fullName计算属性
return this.firstname + this.lastname
},
},
watch: {
firstname(newVal, oldVal) {
console.log(newVal)
},
},
})
setTimeout(() => {
debugger
vm.firstname = '赵'
}, 1000)相关源码
js
// 初始化state
function initState(vm: Component) {
vm._watchers = []
const opts = vm.$options
if (opts.props) initProps(vm, opts.props)
if (opts.methods) initMethods(vm, opts.methods)
if (opts.data) {
initData(vm)
} else {
observe((vm._data = {}), true /* asRootData */)
}
// 初始化计算属性
if (opts.computed) initComputed(vm, opts.computed)
// 初始化watch
if (opts.watch && opts.watch !== nativeWatch) {
initWatch(vm, opts.watch)
}
}
// 计算属性取值函数
function createComputedGetter(key) {
return function computedGetter() {
const watcher = this._computedWatchers && this._computedWatchers[key]
if (watcher) {
if (watcher.dirty) {
// 如果值依赖的值发生变化，就会进行重新求值
watcher.evaluate() // this.firstname lastname
}
if (Dep.target) {
// 让计算属性所依赖的属性 收集渲染watcher
watcher.depend()
}
return watcher.value
}
}
}
// watch的实现
Vue.prototype.$watch = function (expOrFn: string | Function, cb: any, options?: Object): Function {
const vm: Component = this
debugger
if (isPlainObject(cb)) {
return createWatcher(vm, expOrFn, cb, options)
}
options = options || {}
options.user = true
const watcher = new Watcher(vm, expOrFn, cb, options) // 创建watcher，数据更新调用cb
if (options.immediate) {
try {
cb.call(vm, watcher.value)
} catch (error) {
handleError(error, vm, `callback for immediate watcher "${watcher.expression}"`)
}
}
return function unwatchFn() {
watcher.teardown()
}
}// 初始化state
function initState(vm: Component) {
vm._watchers = []
const opts = vm.$options
if (opts.props) initProps(vm, opts.props)
if (opts.methods) initMethods(vm, opts.methods)
if (opts.data) {
initData(vm)
} else {
observe((vm._data = {}), true /* asRootData */)
}
// 初始化计算属性
if (opts.computed) initComputed(vm, opts.computed)
// 初始化watch
if (opts.watch && opts.watch !== nativeWatch) {
initWatch(vm, opts.watch)
}
}
// 计算属性取值函数
function createComputedGetter(key) {
return function computedGetter() {
const watcher = this._computedWatchers && this._computedWatchers[key]
if (watcher) {
if (watcher.dirty) {
// 如果值依赖的值发生变化，就会进行重新求值
watcher.evaluate() // this.firstname lastname
}
if (Dep.target) {
// 让计算属性所依赖的属性 收集渲染watcher
watcher.depend()
}
return watcher.value
}
}
}
// watch的实现
Vue.prototype.$watch = function (expOrFn: string | Function, cb: any, options?: Object): Function {
const vm: Component = this
debugger
if (isPlainObject(cb)) {
return createWatcher(vm, expOrFn, cb, options)
}
options = options || {}
options.user = true
const watcher = new Watcher(vm, expOrFn, cb, options) // 创建watcher，数据更新调用cb
if (options.immediate) {
try {
cb.call(vm, watcher.value)
} catch (error) {
handleError(error, vm, `callback for immediate watcher "${watcher.expression}"`)
}
}
return function unwatchFn() {
watcher.teardown()
}
}
vue3 中 watch、watchEffect 区别
watch是惰性执行，也就是只有监听的值发生变化的时候才会执行，但是watchEffect不同，每次代码加载watchEffect都会执行（忽略watch第三个参数的配置，如果修改配置项也可以实现立即执行）watch需要传递监听的对象，watchEffect不需要watch只能监听响应式数据：ref定义的属性和reactive定义的对象，如果直接监听reactive定义对象中的属性是不允许的（会报警告），除非使用函数转换一下。其实就是官网上说的监听一个getterwatchEffect如果监听reactive定义的对象是不起作用的，只能监听对象中的属性
看一下watchEffect的代码
html
<template>
<div>
请输入firstName：
<input type="text" v-model="firstName" />
</div>
<div>
请输入lastName：
<input type="text" v-model="lastName" />
</div>
<div>
请输入obj.text：
<input type="text" v-model="obj.text" />
</div>
<div>【obj.text】 {{obj.text}}</div>
</template>
<script>
import { ref, reactive, watch, watchEffect } from 'vue'
export default {
name: 'HelloWorld',
props: {
msg: String,
},
setup(props, content) {
let firstName = ref('')
let lastName = ref('')
let obj = reactive({
text: 'hello',
})
watchEffect(() => {
console.log('触发了watchEffect')
console.log(`组合后的名称为：${firstName.value} ${lastName.value}`)
})
return {
obj,
firstName,
lastName,
}
},
}
</script><template>
<div>
请输入firstName：
<input type="text" v-model="firstName" />
</div>
<div>
请输入lastName：
<input type="text" v-model="lastName" />
</div>
<div>
请输入obj.text：
<input type="text" v-model="obj.text" />
</div>
<div>【obj.text】 {{obj.text}}</div>
</template>
<script>
import { ref, reactive, watch, watchEffect } from 'vue'
export default {
name: 'HelloWorld',
props: {
msg: String,
},
setup(props, content) {
let firstName = ref('')
let lastName = ref('')
let obj = reactive({
text: 'hello',
})
watchEffect(() => {
console.log('触发了watchEffect')
console.log(`组合后的名称为：${firstName.value} ${lastName.value}`)
})
return {
obj,
firstName,
lastName,
}
},
}
</script>
改造一下代码
js
watchEffect(() => {
console.log('触发了watchEffect')
// 这里我们不使用firstName.value/lastName.value ，相当于是监控整个ref,对应第四点上面的结论
console.log(`组合后的名称为：${firstName} ${lastName}`)
})watchEffect(() => {
console.log('触发了watchEffect')
// 这里我们不使用firstName.value/lastName.value ，相当于是监控整个ref,对应第四点上面的结论
console.log(`组合后的名称为：${firstName} ${lastName}`)
})
js
watchEffect(() => {
console.log('触发了watchEffect')
console.log(obj)
})watchEffect(() => {
console.log('触发了watchEffect')
console.log(obj)
})
稍微改造一下
js
let obj = reactive({
text: 'hello',
})
watchEffect(() => {
console.log('触发了watchEffect')
console.log(obj.text)
})let obj = reactive({
text: 'hello',
})
watchEffect(() => {
console.log('触发了watchEffect')
console.log(obj.text)
})
再看一下 watch 的代码，验证一下
js
let obj = reactive({
text: 'hello',
})
// watch是惰性执行， 默认初始化之后不会执行，只有值有变化才会触发，可通过配置参数实现默认执行
watch(
obj,
(newValue, oldValue) => {
// 回调函数
console.log('触发监控更新了new', newValue)
console.log('触发监控更新了old', oldValue)
},
{
// 配置immediate参数，立即执行，以及深层次监听
immediate: true,
deep: true,
},
)let obj = reactive({
text: 'hello',
})
// watch是惰性执行， 默认初始化之后不会执行，只有值有变化才会触发，可通过配置参数实现默认执行
watch(
obj,
(newValue, oldValue) => {
// 回调函数
console.log('触发监控更新了new', newValue)
console.log('触发监控更新了old', oldValue)
},
{
// 配置immediate参数，立即执行，以及深层次监听
immediate: true,
deep: true,
},
)
- 监控整个
reactive对象，从上面的图可以看到deep实际默认是开启的，就算我们设置为false也还是无效。而且旧值获取不到。 - 要获取旧值则需要监控对象的属性，也就是监听一个
getter，看下图
总结
- 如果定义了
reactive的数据，想去使用watch监听数据改变，则无法正确获取旧值，并且deep属性配置无效，自动强制开启了深层次监听。 - 如果使用
ref初始化一个对象或者数组类型的数据，会被自动转成reactive的实现方式，生成proxy代理对象。也会变得无法正确取旧值。 - 用任何方式生成的数据，如果接收的变量是一个
proxy代理对象，就都会导致watch这个对象时,watch回调里无法正确获取旧值。 - 所以当大家使用
watch监听对象时，如果在不需要使用旧值的情况，可以正常监听对象没关系；但是如果当监听改变函数里面需要用到旧值时，只能监听 对象.xxx`属性 的方式才行
watch 和 watchEffect 异同总结
体验
watchEffect立即运行一个函数，然后被动地追踪它的依赖，当这些依赖改变时重新执行该函数
js
const count = ref(0)
watchEffect(() => console.log(count.value))
// -> logs 0
count.value++
// -> logs 1const count = ref(0)
watchEffect(() => console.log(count.value))
// -> logs 0
count.value++
// -> logs 1watch侦测一个或多个响应式数据源并在数据源变化时调用一个回调函数
js
const state = reactive({ count: 0 })
watch(
() => state.count,
(count, prevCount) => {
/* ... */
},
)const state = reactive({ count: 0 })
watch(
() => state.count,
(count, prevCount) => {
/* ... */
},
)回答范例
watchEffect立即运行一个函数，然后被动地追踪它的依赖，当这些依赖改变时重新执行该函数。watch侦测一个或多个响应式数据源并在数据源变化时调用一个回调函数watchEffect(effect)是一种特殊watch，传入的函数既是依赖收集的数据源，也是回调函数。如果我们不关心响应式数据变化前后的值，只是想拿这些数据做些事情，那么watchEffect就是我们需要的。watch更底层，可以接收多种数据源，包括用于依赖收集的getter函数，因此它完全可以实现watchEffect的功能，同时由于可以指定getter函数，依赖可以控制的更精确，还能获取数据变化前后的值，因此如果需要这些时我们会使用watchwatchEffect在使用时，传入的函数会立刻执行一次。watch默认情况下并不会执行回调函数，除非我们手动设置immediate选项- 从实现上来说，
watchEffect(fn)相当于watch(fn,fn,{immediate:true})
watchEffect定义如下
js
export function watchEffect(effect: WatchEffect, options?: WatchOptionsBase): WatchStopHandle {
return doWatch(effect, null, options)
}export function watchEffect(effect: WatchEffect, options?: WatchOptionsBase): WatchStopHandle {
return doWatch(effect, null, options)
}watch定义如下
js
export function watch<T = any, Immediate extends Readonly<boolean> = false>(
source: T | WatchSource<T>,
cb: any,
options?: WatchOptions<Immediate>
): WatchStopHandle {
return doWatch(source as any, cb, options)
}export function watch<T = any, Immediate extends Readonly<boolean> = false>(
source: T | WatchSource<T>,
cb: any,
options?: WatchOptions<Immediate>
): WatchStopHandle {
return doWatch(source as any, cb, options)
}很明显watchEffect就是一种特殊的watch实现。
Watch 中的 deep:true 是如何实现的
当用户指定了
watch中的 deep 属性为true时，如果当前监控的值是数组类型。会对对象中的每一项进行求值，此时会将当前watcher存入到对应属性的依赖中，这样数组中对象发生变化时也会通知数据更新
源码相关
js
get () {
pushTarget(this) // 先将当前依赖放到 Dep.target上
let value
const vm = this.vm
try {
value = this.getter.call(vm, vm)
} catch (e) {
if (this.user) {
handleError(e, vm, `getter for watcher "${this.expression}"`)
} else {
throw e
}
} finally {
if (this.deep) { // 如果需要深度监控
traverse(value) // 会对对象中的每一项取值,取值时会执行对应的get方法
}
popTarget()
}get () {
pushTarget(this) // 先将当前依赖放到 Dep.target上
let value
const vm = this.vm
try {
value = this.getter.call(vm, vm)
} catch (e) {
if (this.user) {
handleError(e, vm, `getter for watcher "${this.expression}"`)
} else {
throw e
}
} finally {
if (this.deep) { // 如果需要深度监控
traverse(value) // 会对对象中的每一项取值,取值时会执行对应的get方法
}
popTarget()
}Vue computed 实现
- 建立与其他属性（如：
data、Store）的联系； - 属性改变后，通知计算属性重新计算
实现时，主要如下
- 初始化
data， 使用Object.defineProperty把这些属性全部转为getter/setter。 - 初始化
computed, 遍历computed里的每个属性，每个computed属性都是一个watch实例。每个属性提供的函数作为属性的getter，使用Object.defineProperty转化。 Object.defineProperty getter依赖收集。用于依赖发生变化时，触发属性重新计算。- 若出现当前
computed计算属性嵌套其他computed计算属性时，先进行其他的依赖收集
watch 原理
watch 本质上是为每个监听属性 setter 创建了一个 watcher，当被监听的属性更新时，调用传入的回调函数。常见的配置选项有 deep 和 immediate，对应原理如下
deep：深度监听对象，为对象的每一个属性创建一个watcher，从而确保对象的每一个属性更新时都会触发传入的回调函数。主要原因在于对象属于引用类型，单个属性的更新并不会触发对象setter，因此引入deep能够很好地解决监听对象的问题。同时也会引入判断机制，确保在多个属性更新时回调函数仅触发一次，避免性能浪费。immediate：在初始化时直接调用回调函数，可以通过在created阶段手动调用回调函数实现相同的效果
Vue.set 的实现原理
- 给对象和数组本身都增加了
dep属性 - 当给对象新增不存在的属性则触发对象依赖的
watcher去更新 - 当修改数组索引时，我们调用数组本身的
splice去更新数组（数组的响应式原理就是重新了splice等方法，调用splice就会触发视图更新）
基本使用
以下方法调用会改变原始数组：
push(),pop(),shift(),unshift(),splice(),sort(),reverse(),Vue.set( target, key, value )
调用方法：
Vue.set(target, key, value )Vue.set(target, key, value )target：要更改的数据源(可以是对象或者数组)key：要更改的具体数据value：重新赋的值
html
<div id="app">{{user.name}} {{user.age}}</div>
<div id="app"></div>
<script>
// 1. 依赖收集的特点：给每个属性都增加一个dep属性，dep属性会进行收集，收集的是watcher
// 2. vue会给每个对象也增加一个dep属性
const vm = new Vue({
el: '#app',
data: {
// vm._data
user: { name: 'poetry' },
},
})
// 对象的话：调用defineReactive在user对象上定义一个age属性，增加到响应式数据中，触发对象本身的watcher，ob.dep.notify()更新
// 如果是数组 通过调用 splice方法，触发视图更新
vm.$set(vm.user, 'age', 20) // 不能给根属性添加，因为给根添加属性 性能消耗太大，需要做很多处理
// 修改肯定是同步的 -> 更新都是一步的 queuewatcher
</script><div id="app">{{user.name}} {{user.age}}</div>
<div id="app"></div>
<script>
// 1. 依赖收集的特点：给每个属性都增加一个dep属性，dep属性会进行收集，收集的是watcher
// 2. vue会给每个对象也增加一个dep属性
const vm = new Vue({
el: '#app',
data: {
// vm._data
user: { name: 'poetry' },
},
})
// 对象的话：调用defineReactive在user对象上定义一个age属性，增加到响应式数据中，触发对象本身的watcher，ob.dep.notify()更新
// 如果是数组 通过调用 splice方法，触发视图更新
vm.$set(vm.user, 'age', 20) // 不能给根属性添加，因为给根添加属性 性能消耗太大，需要做很多处理
// 修改肯定是同步的 -> 更新都是一步的 queuewatcher
</script>相关源码
js
// src/core/observer/index.js 44
export class Observer {
// new Observer(value)
value: any
dep: Dep
vmCount: number // number of vms that have this object as root $data
constructor(value: any) {
this.value = value
this.dep = new Dep() // 给所有对象类型增加dep属性
}
}
// src/core/observer/index.js 201
export function set(target: Array<any> | Object, key: any, val: any): any {
// 1.是开发环境 target 没定义或者是基础类型则报错
if (process.env. NODE_ENV !== 'production' && (isUndef(target) || isPrimitive(target))) {
warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)
}
// 2.如果是数组 Vue.set(array,1,100); 调用我们重写的splice方法 (这样可以更新视图)
if (Array.isArray(target) && isValidArrayIndex(key)) {
target.length = Math.max(target.length, key)
// 利用数组的splice变异方法触发响应式
target.splice(key, 1, val)
return val
}
// 3.如果是对象本身的属性，则直接添加即可
if (key in target && !(key in Object.prototype)) {
target[key] = val // 直接修改属性值
return val
}
// 4.如果是Vue实例 或 根数据data时 报错,（更新_data 无意义）
const ob = (target: any).__ob__
if (target._isVue || (ob && ob.vmCount)) {
process.env.NODE_ENV !== 'production' &&
warn(
'Avoid adding reactive properties to a Vue instance or its root $data ' +
'at runtime - declare it upfront in the data option.',
)
return val
}
// 5.如果不是响应式的也不需要将其定义成响应式属性
if (!ob) {
target[key] = val
return val
}
// 6.将属性定义成响应式的
defineReactive(ob.value, key, val)
// 通知视图更新
ob.dep.notify()
return val
}// src/core/observer/index.js 44
export class Observer {
// new Observer(value)
value: any
dep: Dep
vmCount: number // number of vms that have this object as root $data
constructor(value: any) {
this.value = value
this.dep = new Dep() // 给所有对象类型增加dep属性
}
}
// src/core/observer/index.js 201
export function set(target: Array<any> | Object, key: any, val: any): any {
// 1.是开发环境 target 没定义或者是基础类型则报错
if (process.env. NODE_ENV !== 'production' && (isUndef(target) || isPrimitive(target))) {
warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)
}
// 2.如果是数组 Vue.set(array,1,100); 调用我们重写的splice方法 (这样可以更新视图)
if (Array.isArray(target) && isValidArrayIndex(key)) {
target.length = Math.max(target.length, key)
// 利用数组的splice变异方法触发响应式
target.splice(key, 1, val)
return val
}
// 3.如果是对象本身的属性，则直接添加即可
if (key in target && !(key in Object.prototype)) {
target[key] = val // 直接修改属性值
return val
}
// 4.如果是Vue实例 或 根数据data时 报错,（更新_data 无意义）
const ob = (target: any).__ob__
if (target._isVue || (ob && ob.vmCount)) {
process.env.NODE_ENV !== 'production' &&
warn(
'Avoid adding reactive properties to a Vue instance or its root $data ' +
'at runtime - declare it upfront in the data option.',
)
return val
}
// 5.如果不是响应式的也不需要将其定义成响应式属性
if (!ob) {
target[key] = val
return val
}
// 6.将属性定义成响应式的
defineReactive(ob.value, key, val)
// 通知视图更新
ob.dep.notify()
return val
}我们阅读以上源码可知，vm.$set 的实现原理是：
- 如果目标是数组，直接使用数组的
splice方法触发响应式； - 如果目标是对象，会先判读属性是否存在、对象是否是响应式，最终如果要对属性进行响应式处理，则是通过调用
defineReactive方法进行响应式处理（defineReactive方法就是Vue在初始化对象时，给对象属性采用Object.defineProperty动态添加getter和setter的功能所调用的方法）
Vue diff 算法相关问题
Vue 为什么需要虚拟 DOM？优缺点有哪些
由于在浏览器中操作
DOM是很昂贵的。频繁的操作DOM，会产生一定的性能问题。这就是虚拟Dom的产生原因。Vue2的Virtual DOM借鉴了开源库snabbdom的实现。Virtual DOM本质就是用一个原生的JS对象去描述一个DOM节点，是对真实DOM的一层抽象
优点：
- 保证性能下限： 框架的虚拟
DOM需要适配任何上层API可能产生的操作，它的一些DOM操作的实现必须是普适的，所以它的性能并不是最优的；但是比起粗暴的DOM操作性能要好很多，因此框架的虚拟DOM至少可以保证在你不需要手动优化的情况下，依然可以提供还不错的性能，即保证性能的下限； - 无需手动操作 DOM： 我们不再需要手动去操作
DOM，只需要写好View-Model的代码逻辑，框架会根据虚拟DOM和 数据双向绑定，帮我们以可预期的方式更新视图，极大提高我们的开发效率； - 跨平台： 虚拟
DOM本质上是JavaScript对象,而DOM与平台强相关，相比之下虚拟DOM可以进行更方便地跨平台操作，例如服务器渲染、weex开发等等。
缺点:
- 无法进行极致优化：虽然虚拟
DOM+ 合理的优化，足以应对绝大部分应用的性能需求，但在一些性能要求极高的应用中虚拟DOM无法进行针对性的极致优化。 - 首次渲染大量
DOM时，由于多了一层虚拟DOM的计算，会比innerHTML插入慢。
虚拟 DOM 实现原理？
虚拟 DOM 的实现原理主要包括以下 3 部分：
- 用
JavaScript对象模拟真实DOM树，对真实DOM进行抽象； diff算法 — 比较两棵虚拟DOM树的差异；pach算法 — 将两个虚拟DOM对象的差异应用到真正的DOM树。
说说你对虚拟 DOM 的理解？回答范例
思路
vdom是什么- 引入
vdom的好处 vdom如何生成，又如何成为dom- 在后续的
diff中的作用
回答范例
- 虚拟
dom顾名思义就是虚拟的dom对象，它本身就是一个JavaScript对象，只不过它是通过不同的属性去描述一个视图结构 - 通过引入
vdom我们可以获得如下好处：
- 将真实元素节点抽象成
VNode，有效减少直接操作dom次数，从而提高程序性能- 直接操作
dom是有限制的，比如：diff、clone等操作，一个真实元素上有许多的内容，如果直接对其进行diff操作，会去额外diff一些没有必要的内容；同样的，如果需要进行clone那么需要将其全部内容进行复制，这也是没必要的。但是，如果将这些操作转移到JavaScript对象上，那么就会变得简单了 - 操作
dom是比较昂贵的操作，频繁的dom操作容易引起页面的重绘和回流，但是通过抽象VNode进行中间处理，可以有效减少直接操作dom的次数，从而减少页面重绘和回流
- 直接操作
- 方便实现跨平台
- 同一
VNode节点可以渲染成不同平台上的对应的内容，比如：渲染在浏览器是dom元素节点，渲染在Native( iOS、Android)变为对应的控件、可以实现SSR、渲染到WebGL中等等 Vue3中允许开发者基于VNode实现自定义渲染器（renderer），以便于针对不同平台进行渲染
- 同一
vdom如何生成？在 vue 中我们常常会为组件编写模板 -template， 这个模板会被编译器 -compiler编译为渲染函数，在接下来的挂载（mount）过程中会调用render函数，返回的对象就是虚拟dom。但它们还不是真正的dom，所以会在后续的patch过程中进一步转化为dom。
- 挂载过程结束后，
vue程序进入更新流程。如果某些响应式数据发生变化，将会引起组件重新render，此时就会生成新的vdom，和上一次的渲染结果diff就能得到变化的地方，从而转换为最小量的dom操作，高效更新视图
为什么要用 vdom？案例解析
现在有一个场景，实现以下需求:
js
;[
{ name: '张三', age: '20', address: '北京' },
{ name: '李四', age: '21', address: '武汉' },
{ name: '王五', age: '22', address: '杭州' },
];[
{ name: '张三', age: '20', address: '北京' },
{ name: '李四', age: '21', address: '武汉' },
{ name: '王五', age: '22', address: '杭州' },
]将该数据展示成一个表格，并且随便修改一个信息，表格也跟着修改。 用 jQuery 实现如下:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="container"></div>
<button id="btn-change">改变</button>
<script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.js"></script>
<script>
const data = [
{
name: '张三',
age: '20',
address: '北京',
},
{
name: '李四',
age: '21',
address: '武汉',
},
{
name: '王五',
age: '22',
address: '杭州',
},
]
//渲染函数
function render(data) {
const $container = $('#container')
$container.html('')
const $table = $('<table>')
// 重绘一次
$table.append($('<tr><td>name</td><td>age</td><td>address</td></tr>'))
data.forEach((item) => {
//每次进入都重绘
$table.append(
$(`<tr><td>${item.name}</td><td>${item.age}</td><td>${item.address}</td></tr>`),
)
})
$container.append($table)
}
$('#btn-change').click(function () {
data[1].age = 30
data[2].address = '深圳'
render(data)
})
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="container"></div>
<button id="btn-change">改变</button>
<script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.js"></script>
<script>
const data = [
{
name: '张三',
age: '20',
address: '北京',
},
{
name: '李四',
age: '21',
address: '武汉',
},
{
name: '王五',
age: '22',
address: '杭州',
},
]
//渲染函数
function render(data) {
const $container = $('#container')
$container.html('')
const $table = $('<table>')
// 重绘一次
$table.append($('<tr><td>name</td><td>age</td><td>address</td></tr>'))
data.forEach((item) => {
//每次进入都重绘
$table.append(
$(`<tr><td>${item.name}</td><td>${item.age}</td><td>${item.address}</td></tr>`),
)
})
$container.append($table)
}
$('#btn-change').click(function () {
data[1].age = 30
data[2].address = '深圳'
render(data)
})
</script>
</body>
</html>- 这样点击按钮，会有相应的视图变化，但是你审查以下元素，每次改动之后，
table标签都得重新创建，也就是说table下面的每一个栏目，不管是数据是否和原来一样，都得重新渲染，这并不是理想中的情况，当其中的一栏数据和原来一样，我们希望这一栏不要重新渲染，因为DOM重绘相当消耗浏览器性能。 - 因此我们采用 JS 对象模拟的方法，将
DOM的比对操作放在JS层，减少浏览器不必要的重绘，提高效率。 - 当然有人说虚拟 DOM 并不比真实的
DOM快，其实也是有道理的。当上述table中的每一条数据都改变时，显然真实的DOM操作更快，因为虚拟DOM还存在js中diff算法的比对过程。所以，上述性能优势仅仅适用于大量数据的渲染并且改变的数据只是一小部分的情况。
如下DOM结构:
html
<ul id="list">
<li class="item">Item1</li>
<li class="item">Item2</li>
</ul><ul id="list">
<li class="item">Item1</li>
<li class="item">Item2</li>
</ul>映射成虚拟DOM就是这样:
js
{
tag: "ul",
attrs: {
id: "list"
},
children: [
{
tag: "li",
attrs: { className: "item" },
children: ["Item1"]
}, {
tag: "li",
attrs: { className: "item" },
children: ["Item2"]
}
]
}{
tag: "ul",
attrs: {
id: "list"
},
children: [
{
tag: "li",
attrs: { className: "item" },
children: ["Item1"]
}, {
tag: "li",
attrs: { className: "item" },
children: ["Item2"]
}
]
}使用 snabbdom 实现 vdom
这是一个简易的实现
vdom功能的库，相比vue、react，对于vdom这块更加简易，适合我们学习vdom。vdom里面有两个核心的api，一个是h函数，一个是patch函数，前者用来生成vdom对象，后者的功能在于做虚拟dom的比对和将vdom挂载到真实DOM上
简单介绍一下这两个函数的用法:
js
h('标签名', { 属性 }, [子元素])
h('标签名', { 属性 }, [文本])
patch(container, vnode) // container为容器DOM元素
patch(vnode, newVnode)h('标签名', { 属性 }, [子元素])
h('标签名', { 属性 }, [文本])
patch(container, vnode) // container为容器DOM元素
patch(vnode, newVnode)现在我们就来用snabbdom重写一下刚才的例子:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="container"></div>
<button id="btn-change">改变</button>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-class.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-props.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-style.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-eventlisteners.min.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/h.js"></script>
<script>
let snabbdom = window.snabbdom
// 定义patch
let patch = snabbdom.init([
snabbdom_class,
snabbdom_props,
snabbdom_style,
snabbdom_eventlisteners,
])
//定义h
let h = snabbdom.h
const data = [
{
name: '张三',
age: '20',
address: '北京',
},
{
name: '李四',
age: '21',
address: '武汉',
},
{
name: '王五',
age: '22',
address: '杭州',
},
]
data.unshift({ name: '姓名', age: '年龄', address: '地址' })
let container = document.getElementById('container')
let vnode
const render = (data) => {
let newVnode = h(
'table',
{},
data.map((item) => {
let tds = []
for (let i in item) {
if (item.hasOwnProperty(i)) {
tds.push(h('td', {}, item[i] + ''))
}
}
return h('tr', {}, tds)
}),
)
if (vnode) {
patch(vnode, newVnode)
} else {
patch(container, newVnode)
}
vnode = newVnode
}
render(data)
let btnChnage = document.getElementById('btn-change')
btnChnage.addEventListener('click', function () {
data[1].age = 30
data[2].address = '深圳'
//re-render
render(data)
})
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="container"></div>
<button id="btn-change">改变</button>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-class.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-props.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-style.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-eventlisteners.min.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/h.js"></script>
<script>
let snabbdom = window.snabbdom
// 定义patch
let patch = snabbdom.init([
snabbdom_class,
snabbdom_props,
snabbdom_style,
snabbdom_eventlisteners,
])
//定义h
let h = snabbdom.h
const data = [
{
name: '张三',
age: '20',
address: '北京',
},
{
name: '李四',
age: '21',
address: '武汉',
},
{
name: '王五',
age: '22',
address: '杭州',
},
]
data.unshift({ name: '姓名', age: '年龄', address: '地址' })
let container = document.getElementById('container')
let vnode
const render = (data) => {
let newVnode = h(
'table',
{},
data.map((item) => {
let tds = []
for (let i in item) {
if (item.hasOwnProperty(i)) {
tds.push(h('td', {}, item[i] + ''))
}
}
return h('tr', {}, tds)
}),
)
if (vnode) {
patch(vnode, newVnode)
} else {
patch(container, newVnode)
}
vnode = newVnode
}
render(data)
let btnChnage = document.getElementById('btn-change')
btnChnage.addEventListener('click', function () {
data[1].age = 30
data[2].address = '深圳'
//re-render
render(data)
})
</script>
</body>
</html>
你会发现，只有改变的栏目才闪烁，也就是进行重绘，数据没有改变的栏目还是保持原样，这样就大大节省了浏览器重新渲染的开销
vue 中使用
h函数生成虚拟DOM返回
js
const vm = new Vue({
el: '#app',
data: {
user: { name: 'poetry' },
},
render(h) {
// h()
// h(App)
// h('div',[])
let vnode = h('div', {}, 'hello world')
return vnode
},
})const vm = new Vue({
el: '#app',
data: {
user: { name: 'poetry' },
},
render(h) {
// h()
// h(App)
// h('div',[])
let vnode = h('div', {}, 'hello world')
return vnode
},
})Vue 中 diff 算法原理
DOM操作是非常昂贵的，因此我们需要尽量地减少DOM操作。这就需要找出本次DOM必须更新的节点来更新，其他的不更新，这个找出的过程，就需要应用 diff 算法
vue的diff算法是平级比较，不考虑跨级比较的情况。内部采用深度递归的方式+双指针(头尾都加指针)的方式进行比较。
简单来说，Diff 算法有以下过程
同级比较，再比较子节点（根据
key和tag标签名判断）先判断一方有子节点和一方没有子节点的情况(如果新的
children没有子节点，将旧的子节点移除)比较都有子节点的情况(核心
diff)递归比较子节点
正常
Diff两个树的时间复杂度是O(n^3)，但实际情况下我们很少会进行跨层级的移动DOM，所以Vue将Diff进行了优化，从O(n^3) -> O(n)，只有当新旧children都为多个子节点时才需要用核心的Diff算法进行同层级比较。Vue2的核心Diff算法采用了双端比较的算法，同时从新旧children的两端开始进行比较，借助key值找到可复用的节点，再进行相关操作。相比React的Diff算法，同样情况下可以减少移动节点次数，减少不必要的性能损耗，更加的优雅在创建
VNode时就确定其类型，以及在mount/patch的过程中采用位运算来判断一个VNode的类型，在这个基础之上再配合核心的Diff算法，使得性能上较Vue2.x有了提升
vue3 中采用最长递增子序列来实现
diff优化
回答范例
思路
diff算法是干什么的- 它的必要性
- 它何时执行
- 具体执行方式
- 拔高：说一下
vue3中的优化
回答范例
Vue中的diff算法称为patching算法，它由Snabbdom修改而来，虚拟DOM要想转化为真实DOM就需要通过patch方法转换- 最初
Vue1.x视图中每个依赖均有更新函数对应，可以做到精准更新，因此并不需要虚拟DOM和patching算法支持，但是这样粒度过细导致Vue1.x无法承载较大应用；Vue 2.x中为了降低Watcher粒度，每个组件只有一个Watcher与之对应，此时就需要引入patching算法才能精确找到发生变化的地方并高效更新 vue中diff执行的时刻是组件内响应式数据变更触发实例执行其更新函数时，更新函数会再次执行render函数获得最新的虚拟DOM，然后执行patch函数，并传入新旧两次虚拟 DOM，通过比对两者找到变化的地方，最后将其转化为对应的DOM操作patch过程是一个递归过程，遵循深度优先、同层比较的策略；
以vue3的patch为例
- 首先判断两个节点是否为相同同类节点，不同则删除重新创建
- 如果双方都是文本则更新文本内容
- 如果双方都是元素节点则递归更新子元素，同时更新元素属性
- 更新子节点时又分了几种情况
- 新的子节点是文本，老的子节点是数组则清空，并设置文本；
- 新的子节点是文本，老的子节点是文本则直接更新文本；
- 新的子节点是数组，老的子节点是文本则清空文本，并创建新子节点数组中的子元素；
- 新的子节点是数组，老的子节点也是数组，那么比较两组子节点，更新细节 blabla
vue3中引入的更新策略：静态节点标记等
vdom 中 diff 算法的简易实现
以下代码只是帮助大家理解diff算法的原理和流程
- 将
vdom转化为真实dom：
js
const createElement = (vnode) => {
let tag = vnode.tag
let attrs = vnode.attrs || {}
let children = vnode.children || []
if (!tag) {
return null
}
//创建元素
let elem = document.createElement(tag)
//属性
let attrName
for (attrName in attrs) {
if (attrs.hasOwnProperty(attrName)) {
elem.setAttribute(attrName, attrs[attrName])
}
}
//子元素
children.forEach((childVnode) => {
//给elem添加子元素
elem.appendChild(createElement(childVnode))
})
//返回真实的dom元素
return elem
}const createElement = (vnode) => {
let tag = vnode.tag
let attrs = vnode.attrs || {}
let children = vnode.children || []
if (!tag) {
return null
}
//创建元素
let elem = document.createElement(tag)
//属性
let attrName
for (attrName in attrs) {
if (attrs.hasOwnProperty(attrName)) {
elem.setAttribute(attrName, attrs[attrName])
}
}
//子元素
children.forEach((childVnode) => {
//给elem添加子元素
elem.appendChild(createElement(childVnode))
})
//返回真实的dom元素
return elem
}- 用简易
diff算法做更新操作
js
function updateChildren(vnode, newVnode) {
let children = vnode.children || []
let newChildren = newVnode.children || []
children.forEach((childVnode, index) => {
let newChildVNode = newChildren[index]
if (childVnode.tag === newChildVNode.tag) {
//深层次对比, 递归过程
updateChildren(childVnode, newChildVNode)
} else {
//替换
replaceNode(childVnode, newChildVNode)
}
})
}function updateChildren(vnode, newVnode) {
let children = vnode.children || []
let newChildren = newVnode.children || []
children.forEach((childVnode, index) => {
let newChildVNode = newChildren[index]
if (childVnode.tag === newChildVNode.tag) {
//深层次对比, 递归过程
updateChildren(childVnode, newChildVNode)
} else {
//替换
replaceNode(childVnode, newChildVNode)
}
})
}Vue 的 diff 算法详细分析
1. 是什么
diff 算法是一种通过同层的树节点进行比较的高效算法
其有两个特点：
- 比较只会在同层级进行, 不会跨层级比较
- 在 diff 比较的过程中，循环从两边向中间比较
diff 算法在很多场景下都有应用，在 vue 中，作用于虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较
2. 比较方式
diff整体策略为：深度优先，同层比较
- 比较只会在同层级进行, 不会跨层级比较
- 比较的过程中，循环从两边向中间收拢
下面举个vue通过diff算法更新的例子：
新旧VNode节点如下图所示：
第一次循环后，发现旧节点 D 与新节点 D 相同，直接复用旧节点 D 作为diff后的第一个真实节点，同时旧节点endIndex移动到 C，新节点的 startIndex 移动到了 C
第二次循环后，同样是旧节点的末尾和新节点的开头(都是 C)相同，同理，diff 后创建了 C 的真实节点插入到第一次创建的 D 节点后面。同时旧节点的 endIndex 移动到了 B，新节点的 startIndex 移动到
了 E
第三次循环中，发现 E 没有找到，这时候只能直接创建新的真实节点 E，插入到第二次创建的 C 节点之后。同时新节点的 startIndex 移动到了 A。旧节点的 startIndex 和 endIndex 都保持不动
第四次循环中，发现了新旧节点的开头(都是 A)相同，于是 diff 后创建了 A 的真实节点，插入到前一次创建的 E 节点后面。同时旧节点的 startIndex 移动到了 B，新节点的startIndex 移动到了 B
第五次循环中，情形同第四次循环一样，因此 diff 后创建了 B 真实节点 插入到前一次创建的 A 节点后面。同时旧节点的 startIndex移动到了 C，新节点的 startIndex 移动到了 F
新节点的 startIndex 已经大于 endIndex 了，需要创建 newStartIdx 和 newEndIdx 之间的所有节点，也就是节点 F，直接创建 F 节点对应的真实节点放到 B 节点后面
原理分析
当数据发生改变时，set方法会调用Dep.notify通知所有订阅者Watcher，订阅者就会调用patch给真实的DOM打补丁，更新相应的视图
源码位置：src/core/vdom/patch.js
js
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) // 没有旧节点，直接用新节点生成dom元素
} 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_ATTR)) {
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 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) // 没有旧节点，直接用新节点生成dom元素
} 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_ATTR)) {
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
}
}
}patch函数前两个参数位为oldVnode 和 Vnode ，分别代表新的节点和之前的旧节点，主要做了四个判断：
- 没有新节点，直接触发旧节点的
destory钩子 - 没有旧节点，说明是页面刚开始初始化的时候，此时，根本不需要比较了，直接全是新建，所以只调用
createElm - 旧节点和新节点自身一样，通过
sameVnode判断节点是否一样，一样时，直接调用patchVnode去处理这两个节点 - 旧节点和新节点自身不一样，当两个节点不一样的时候，直接创建新节点，删除旧节点
下面主要讲的是patchVnode部分
js
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和oldVnode.child都复制到vnode上
// 也不用再有其他操作
if (
isTrue(vnode.isStatic) &&
isTrue(oldVnode.isStatic) &&
vnode.key === oldVnode.key &&
(isTrue(vnode.isCloned) || isTrue(vnode.isOnce))
) {
vnode.componentInstance = oldVnode.componentInstance
return
}
let i
const data = 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, vnode)
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, insertedVnodeQueue, removeOnly)
// 如果只有新的vnode有子节点
} else if (isDef(ch)) {
if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
// elm已经引用了老的dom节点，在老的dom节点上添加子节点
addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
// 如果新vnode没有子节点，而vnode有子节点，直接删除老的oldCh
} else if (isDef(oldCh)) {
removeVnodes(elm, oldCh, 0, oldCh.length - 1)
// 如果老节点是文本节点
} else if (isDef(oldVnode.text)) {
nodeOps.setTextContent(elm, '')
}
// 如果新vnode和老vnode是文本节点或注释节点
// 但是vnode.text != oldVnode.text时，只需要更新vnode.elm的文本内容就可以
} else if (oldVnode.text !== vnode.text) {
nodeOps.setTextContent(elm, vnode.text)
}
if (isDef(data)) {
if (isDef((i = data.hook)) && isDef((i = i.postpatch))) i(oldVnode, vnode)
}
}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和oldVnode.child都复制到vnode上
// 也不用再有其他操作
if (
isTrue(vnode.isStatic) &&
isTrue(oldVnode.isStatic) &&
vnode.key === oldVnode.key &&
(isTrue(vnode.isCloned) || isTrue(vnode.isOnce))
) {
vnode.componentInstance = oldVnode.componentInstance
return
}
let i
const data = 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, vnode)
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, insertedVnodeQueue, removeOnly)
// 如果只有新的vnode有子节点
} else if (isDef(ch)) {
if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
// elm已经引用了老的dom节点，在老的dom节点上添加子节点
addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
// 如果新vnode没有子节点，而vnode有子节点，直接删除老的oldCh
} else if (isDef(oldCh)) {
removeVnodes(elm, oldCh, 0, oldCh.length - 1)
// 如果老节点是文本节点
} else if (isDef(oldVnode.text)) {
nodeOps.setTextContent(elm, '')
}
// 如果新vnode和老vnode是文本节点或注释节点
// 但是vnode.text != oldVnode.text时，只需要更新vnode.elm的文本内容就可以
} else if (oldVnode.text !== vnode.text) {
nodeOps.setTextContent(elm, vnode.text)
}
if (isDef(data)) {
if (isDef((i = data.hook)) && isDef((i = i.postpatch))) i(oldVnode, vnode)
}
}patchVnode主要做了几个判断：
- 新节点是否是文本节点，如果是，则直接更新
dom的文本内容为新节点的文本内容 - 新节点和旧节点如果都有子节点，则处理比较更新子节点
- 只有新节点有子节点，旧节点没有，那么不用比较了，所有节点都是全新的，所以直接全部新建就好了，新建是指创建出所有新
DOM，并且添加进父节点 - 只有旧节点有子节点而新节点没有，说明更新后的页面，旧节点全部都不见了，那么要做的，就是把所有的旧节点删除，也就是直接把
DOM删除
子节点不完全一致，则调用updateChildren
js
function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
let oldStartIdx = 0 // 旧头索引
let newStartIdx = 0 // 新头索引
let oldEndIdx = oldCh.length - 1 // 旧尾索引
let newEndIdx = newCh.length - 1 // 新尾索引
let oldStartVnode = oldCh[0] // oldVnode的第一个child
let oldEndVnode = oldCh[oldEndIdx] // oldVnode的最后一个child
let newStartVnode = newCh[0] // newVnode的第一个child
let newEndVnode = newCh[newEndIdx] // newVnode的最后一个child
let oldKeyToIdx, idxInOld, vnodeToMove, refElm
// removeOnly is a special flag used only by <transition-group>
// to ensure removed elements stay in correct relative positions
// during leaving transitions
const canMove = !removeOnly
// 如果oldStartVnode和oldEndVnode重合，并且新的也都重合了，证明diff完了，循环结束
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
// 如果oldVnode的第一个child不存在
if (isUndef(oldStartVnode)) {
// oldStart索引右移
oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
// 如果oldVnode的最后一个child不存在
} else if (isUndef(oldEndVnode)) {
// oldEnd索引左移
oldEndVnode = oldCh[--oldEndIdx]
// oldStartVnode和newStartVnode是同一个节点
} else if (sameVnode(oldStartVnode, newStartVnode)) {
// patch oldStartVnode和newStartVnode， 索引左移，继续循环
patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)
oldStartVnode = oldCh[++oldStartIdx]
newStartVnode = newCh[++newStartIdx]
// oldEndVnode和newEndVnode是同一个节点
} else if (sameVnode(oldEndVnode, newEndVnode)) {
// patch oldEndVnode和newEndVnode，索引右移，继续循环
patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue)
oldEndVnode = oldCh[--oldEndIdx]
newEndVnode = newCh[--newEndIdx]
// oldStartVnode和newEndVnode是同一个节点
} else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
// patch oldStartVnode和newEndVnode
patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue)
// 如果removeOnly是false，则将oldStartVnode.eml移动到oldEndVnode.elm之后
canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
// oldStart索引右移，newEnd索引左移
oldStartVnode = oldCh[++oldStartIdx]
newEndVnode = newCh[--newEndIdx]
// 如果oldEndVnode和newStartVnode是同一个节点
} else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
// patch oldEndVnode和newStartVnode
patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue)
// 如果removeOnly是false，则将oldEndVnode.elm移动到oldStartVnode.elm之前
canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
// oldEnd索引左移，newStart索引右移
oldEndVnode = oldCh[--oldEndIdx]
newStartVnode = newCh[++newStartIdx]
// 如果都不匹配
} else {
if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
// 尝试在oldChildren中寻找和newStartVnode的具有相同的key的Vnode
idxInOld = isDef(newStartVnode.key)
? oldKeyToIdx[newStartVnode.key]
: findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
// 如果未找到，说明newStartVnode是一个新的节点
if (isUndef(idxInOld)) { // New element
// 创建一个新Vnode
createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
// 如果找到了和newStartVnodej具有相同的key的Vnode，叫vnodeToMove
} else {
vnodeToMove = oldCh[idxInOld]
/* istanbul ignore if */
if (process.env. NODE_ENV !== 'production' && !vnodeToMove) {
warn(
'It seems there are duplicate keys that is causing an update error. ' +
'Make sure each v-for item has a unique key.'
)
}
// 比较两个具有相同的key的新节点是否是同一个节点
//不设key，newCh和oldCh只会进行头尾两端的相互比较，设key后，除了头尾两端的比较外，还会从用key生成的对象oldKeyToIdx中查找匹配的节点，所以为节点设置key可以更高效的利用dom。
if (sameVnode(vnodeToMove, newStartVnode)) {
// patch vnodeToMove和newStartVnode
patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue)
// 清除
oldCh[idxInOld] = undefined
// 如果removeOnly是false，则将找到的和newStartVnodej具有相同的key的Vnode，叫vnodeToMove.elm
// 移动到oldStartVnode.elm之前
canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
// 如果key相同，但是节点不相同，则创建一个新的节点
} else {
// same key but different element. treat as new element
createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
}
}
// 右移
newStartVnode = newCh[++newStartIdx]
}
}function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
let oldStartIdx = 0 // 旧头索引
let newStartIdx = 0 // 新头索引
let oldEndIdx = oldCh.length - 1 // 旧尾索引
let newEndIdx = newCh.length - 1 // 新尾索引
let oldStartVnode = oldCh[0] // oldVnode的第一个child
let oldEndVnode = oldCh[oldEndIdx] // oldVnode的最后一个child
let newStartVnode = newCh[0] // newVnode的第一个child
let newEndVnode = newCh[newEndIdx] // newVnode的最后一个child
let oldKeyToIdx, idxInOld, vnodeToMove, refElm
// removeOnly is a special flag used only by <transition-group>
// to ensure removed elements stay in correct relative positions
// during leaving transitions
const canMove = !removeOnly
// 如果oldStartVnode和oldEndVnode重合，并且新的也都重合了，证明diff完了，循环结束
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
// 如果oldVnode的第一个child不存在
if (isUndef(oldStartVnode)) {
// oldStart索引右移
oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
// 如果oldVnode的最后一个child不存在
} else if (isUndef(oldEndVnode)) {
// oldEnd索引左移
oldEndVnode = oldCh[--oldEndIdx]
// oldStartVnode和newStartVnode是同一个节点
} else if (sameVnode(oldStartVnode, newStartVnode)) {
// patch oldStartVnode和newStartVnode， 索引左移，继续循环
patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)
oldStartVnode = oldCh[++oldStartIdx]
newStartVnode = newCh[++newStartIdx]
// oldEndVnode和newEndVnode是同一个节点
} else if (sameVnode(oldEndVnode, newEndVnode)) {
// patch oldEndVnode和newEndVnode，索引右移，继续循环
patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue)
oldEndVnode = oldCh[--oldEndIdx]
newEndVnode = newCh[--newEndIdx]
// oldStartVnode和newEndVnode是同一个节点
} else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
// patch oldStartVnode和newEndVnode
patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue)
// 如果removeOnly是false，则将oldStartVnode.eml移动到oldEndVnode.elm之后
canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
// oldStart索引右移，newEnd索引左移
oldStartVnode = oldCh[++oldStartIdx]
newEndVnode = newCh[--newEndIdx]
// 如果oldEndVnode和newStartVnode是同一个节点
} else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
// patch oldEndVnode和newStartVnode
patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue)
// 如果removeOnly是false，则将oldEndVnode.elm移动到oldStartVnode.elm之前
canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
// oldEnd索引左移，newStart索引右移
oldEndVnode = oldCh[--oldEndIdx]
newStartVnode = newCh[++newStartIdx]
// 如果都不匹配
} else {
if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
// 尝试在oldChildren中寻找和newStartVnode的具有相同的key的Vnode
idxInOld = isDef(newStartVnode.key)
? oldKeyToIdx[newStartVnode.key]
: findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
// 如果未找到，说明newStartVnode是一个新的节点
if (isUndef(idxInOld)) { // New element
// 创建一个新Vnode
createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
// 如果找到了和newStartVnodej具有相同的key的Vnode，叫vnodeToMove
} else {
vnodeToMove = oldCh[idxInOld]
/* istanbul ignore if */
if (process.env. NODE_ENV !== 'production' && !vnodeToMove) {
warn(
'It seems there are duplicate keys that is causing an update error. ' +
'Make sure each v-for item has a unique key.'
)
}
// 比较两个具有相同的key的新节点是否是同一个节点
//不设key，newCh和oldCh只会进行头尾两端的相互比较，设key后，除了头尾两端的比较外，还会从用key生成的对象oldKeyToIdx中查找匹配的节点，所以为节点设置key可以更高效的利用dom。
if (sameVnode(vnodeToMove, newStartVnode)) {
// patch vnodeToMove和newStartVnode
patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue)
// 清除
oldCh[idxInOld] = undefined
// 如果removeOnly是false，则将找到的和newStartVnodej具有相同的key的Vnode，叫vnodeToMove.elm
// 移动到oldStartVnode.elm之前
canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
// 如果key相同，但是节点不相同，则创建一个新的节点
} else {
// same key but different element. treat as new element
createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
}
}
// 右移
newStartVnode = newCh[++newStartIdx]
}
}while循环主要处理了以下五种情景：
- 当新老
VNode节点的start相同时，直接patchVnode，同时新老VNode节点的开始索引都加 1 - 当新老
VNode节点的end相同时，同样直接patchVnode，同时新老VNode节点的结束索引都减 1 - 当老
VNode节点的start和新VNode节点的end相同时，这时候在patchVnode后，还需要将当前真实dom节点移动到oldEndVnode的后面，同时老VNode节点开始索引加 1，新VNode节点的结束索引减 1 - 当老
VNode节点的end和新VNode节点的start相同时，这时候在patchVnode后，还需要将当前真实dom节点移动到oldStartVnode的前面，同时老VNode节点结束索引减 1，新VNode节点的开始索引加 1 - 如果都不满足以上四种情形，那说明没有相同的节点可以复用，则会分为以下两种情况：
- 从旧的
VNode为key值，对应index序列为value值的哈希表中找到与newStartVnode一致key的旧的VNode节点，再进行patchVnode，同时将这个真实dom移动到oldStartVnode对应的真实dom的前面 - 调用
createElm创建一个新的dom节点放到当前newStartIdx的位置
- 从旧的
小结
当数据发生改变时，订阅者
watcher就会调用patch给真实的DOM打补丁通过
isSameVnode进行判断，相同则调用patchVnode方法patchVnodepatchVnode做了以下操作：
- 找到对应的真实
dom，称为el - 如果都有都有文本节点且不相等，将
el文本节点设置为Vnode的文本节点 - 如果
oldVnode有子节点而VNode没有，则删除el子节点 - 如果
oldVnode没有子节点而VNode有，则将VNode的子节点真实化后添加到el - 如果两者都有子节点，则执行
updateChildren函数比较子节点
- 找到对应的真实
updateChildrenupdateChildren主要做了以下操作：
- 设置新旧
VNode的头尾指针 - 新旧头尾指针进行比较，循环向中间靠拢，根据情况调用
patchVnode进行patch重复流程、调用createElem创建一个新节点，从哈希表寻找key一致的VNode节点再分情况操作
- 设置新旧
原理分析
当数据发生改变时，set方法会调用Dep.notify通知所有订阅者Watcher，订阅者就会调用patch给真实的DOM打补丁，更新相应的视图
源码位置：src/core/vdom/patch.js
js
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) // 没有旧节点，直接用新节点生成dom元素
} 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_ATTR)) {
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 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) // 没有旧节点，直接用新节点生成dom元素
} 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_ATTR)) {
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
}
}
}patch函数前两个参数位为oldVnode 和 Vnode ，分别代表新的节点和之前的旧节点，主要做了四个判断：
- 没有新节点，直接触发旧节点的
destory钩子 - 没有旧节点，说明是页面刚开始初始化的时候，此时，根本不需要比较了，直接全是新建，所以只调用
createElm - 旧节点和新节点自身一样，通过
sameVnode判断节点是否一样，一样时，直接调用patchVnode去处理这两个节点 - 旧节点和新节点自身不一样，当两个节点不一样的时候，直接创建新节点，删除旧节点
下面主要讲的是patchVnode部分
js
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和oldVnode.child都复制到vnode上
// 也不用再有其他操作
if (
isTrue(vnode.isStatic) &&
isTrue(oldVnode.isStatic) &&
vnode.key === oldVnode.key &&
(isTrue(vnode.isCloned) || isTrue(vnode.isOnce))
) {
vnode.componentInstance = oldVnode.componentInstance
return
}
let i
const data = 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, vnode)
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, insertedVnodeQueue, removeOnly)
// 如果只有新的vnode有子节点
} else if (isDef(ch)) {
if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
// elm已经引用了老的dom节点，在老的dom节点上添加子节点
addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
// 如果新vnode没有子节点，而vnode有子节点，直接删除老的oldCh
} else if (isDef(oldCh)) {
removeVnodes(elm, oldCh, 0, oldCh.length - 1)
// 如果老节点是文本节点
} else if (isDef(oldVnode.text)) {
nodeOps.setTextContent(elm, '')
}
// 如果新vnode和老vnode是文本节点或注释节点
// 但是vnode.text != oldVnode.text时，只需要更新vnode.elm的文本内容就可以
} else if (oldVnode.text !== vnode.text) {
nodeOps.setTextContent(elm, vnode.text)
}
if (isDef(data)) {
if (isDef((i = data.hook)) && isDef((i = i.postpatch))) i(oldVnode, vnode)
}
}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和oldVnode.child都复制到vnode上
// 也不用再有其他操作
if (
isTrue(vnode.isStatic) &&
isTrue(oldVnode.isStatic) &&
vnode.key === oldVnode.key &&
(isTrue(vnode.isCloned) || isTrue(vnode.isOnce))
) {
vnode.componentInstance = oldVnode.componentInstance
return
}
let i
const data = 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, vnode)
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, insertedVnodeQueue, removeOnly)
// 如果只有新的vnode有子节点
} else if (isDef(ch)) {
if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
// elm已经引用了老的dom节点，在老的dom节点上添加子节点
addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
// 如果新vnode没有子节点，而vnode有子节点，直接删除老的oldCh
} else if (isDef(oldCh)) {
removeVnodes(elm, oldCh, 0, oldCh.length - 1)
// 如果老节点是文本节点
} else if (isDef(oldVnode.text)) {
nodeOps.setTextContent(elm, '')
}
// 如果新vnode和老vnode是文本节点或注释节点
// 但是vnode.text != oldVnode.text时，只需要更新vnode.elm的文本内容就可以
} else if (oldVnode.text !== vnode.text) {
nodeOps.setTextContent(elm, vnode.text)
}
if (isDef(data)) {
if (isDef((i = data.hook)) && isDef((i = i.postpatch))) i(oldVnode, vnode)
}
}patchVnode主要做了几个判断：
- 新节点是否是文本节点，如果是，则直接更新
dom的文本内容为新节点的文本内容 - 新节点和旧节点如果都有子节点，则处理比较更新子节点
- 只有新节点有子节点，旧节点没有，那么不用比较了，所有节点都是全新的，所以直接全部新建就好了，新建是指创建出所有新
DOM，并且添加进父节点 - 只有旧节点有子节点而新节点没有，说明更新后的页面，旧节点全部都不见了，那么要做的，就是把所有的旧节点删除，也就是直接把
DOM删除
子节点不完全一致，则调用updateChildren
js
function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
let oldStartIdx = 0 // 旧头索引
let newStartIdx = 0 // 新头索引
let oldEndIdx = oldCh.length - 1 // 旧尾索引
let newEndIdx = newCh.length - 1 // 新尾索引
let oldStartVnode = oldCh[0] // oldVnode的第一个child
let oldEndVnode = oldCh[oldEndIdx] // oldVnode的最后一个child
let newStartVnode = newCh[0] // newVnode的第一个child
let newEndVnode = newCh[newEndIdx] // newVnode的最后一个child
let oldKeyToIdx, idxInOld, vnodeToMove, refElm
// removeOnly is a special flag used only by <transition-group>
// to ensure removed elements stay in correct relative positions
// during leaving transitions
const canMove = !removeOnly
// 如果oldStartVnode和oldEndVnode重合，并且新的也都重合了，证明diff完了，循环结束
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
// 如果oldVnode的第一个child不存在
if (isUndef(oldStartVnode)) {
// oldStart索引右移
oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
// 如果oldVnode的最后一个child不存在
} else if (isUndef(oldEndVnode)) {
// oldEnd索引左移
oldEndVnode = oldCh[--oldEndIdx]
// oldStartVnode和newStartVnode是同一个节点
} else if (sameVnode(oldStartVnode, newStartVnode)) {
// patch oldStartVnode和newStartVnode， 索引左移，继续循环
patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)
oldStartVnode = oldCh[++oldStartIdx]
newStartVnode = newCh[++newStartIdx]
// oldEndVnode和newEndVnode是同一个节点
} else if (sameVnode(oldEndVnode, newEndVnode)) {
// patch oldEndVnode和newEndVnode，索引右移，继续循环
patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue)
oldEndVnode = oldCh[--oldEndIdx]
newEndVnode = newCh[--newEndIdx]
// oldStartVnode和newEndVnode是同一个节点
} else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
// patch oldStartVnode和newEndVnode
patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue)
// 如果removeOnly是false，则将oldStartVnode.eml移动到oldEndVnode.elm之后
canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
// oldStart索引右移，newEnd索引左移
oldStartVnode = oldCh[++oldStartIdx]
newEndVnode = newCh[--newEndIdx]
// 如果oldEndVnode和newStartVnode是同一个节点
} else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
// patch oldEndVnode和newStartVnode
patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue)
// 如果removeOnly是false，则将oldEndVnode.elm移动到oldStartVnode.elm之前
canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
// oldEnd索引左移，newStart索引右移
oldEndVnode = oldCh[--oldEndIdx]
newStartVnode = newCh[++newStartIdx]
// 如果都不匹配
} else {
if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
// 尝试在oldChildren中寻找和newStartVnode的具有相同的key的Vnode
idxInOld = isDef(newStartVnode.key)
? oldKeyToIdx[newStartVnode.key]
: findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
// 如果未找到，说明newStartVnode是一个新的节点
if (isUndef(idxInOld)) { // New element
// 创建一个新Vnode
createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
// 如果找到了和newStartVnodej具有相同的key的Vnode，叫vnodeToMove
} else {
vnodeToMove = oldCh[idxInOld]
/* istanbul ignore if */
if (process.env. NODE_ENV !== 'production' && !vnodeToMove) {
warn(
'It seems there are duplicate keys that is causing an update error. ' +
'Make sure each v-for item has a unique key.'
)
}
// 比较两个具有相同的key的新节点是否是同一个节点
//不设key，newCh和oldCh只会进行头尾两端的相互比较，设key后，除了头尾两端的比较外，还会从用key生成的对象oldKeyToIdx中查找匹配的节点，所以为节点设置key可以更高效的利用dom。
if (sameVnode(vnodeToMove, newStartVnode)) {
// patch vnodeToMove和newStartVnode
patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue)
// 清除
oldCh[idxInOld] = undefined
// 如果removeOnly是false，则将找到的和newStartVnodej具有相同的key的Vnode，叫vnodeToMove.elm
// 移动到oldStartVnode.elm之前
canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
// 如果key相同，但是节点不相同，则创建一个新的节点
} else {
// same key but different element. treat as new element
createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
}
}
// 右移
newStartVnode = newCh[++newStartIdx]
}
}function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
let oldStartIdx = 0 // 旧头索引
let newStartIdx = 0 // 新头索引
let oldEndIdx = oldCh.length - 1 // 旧尾索引
let newEndIdx = newCh.length - 1 // 新尾索引
let oldStartVnode = oldCh[0] // oldVnode的第一个child
let oldEndVnode = oldCh[oldEndIdx] // oldVnode的最后一个child
let newStartVnode = newCh[0] // newVnode的第一个child
let newEndVnode = newCh[newEndIdx] // newVnode的最后一个child
let oldKeyToIdx, idxInOld, vnodeToMove, refElm
// removeOnly is a special flag used only by <transition-group>
// to ensure removed elements stay in correct relative positions
// during leaving transitions
const canMove = !removeOnly
// 如果oldStartVnode和oldEndVnode重合，并且新的也都重合了，证明diff完了，循环结束
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
// 如果oldVnode的第一个child不存在
if (isUndef(oldStartVnode)) {
// oldStart索引右移
oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
// 如果oldVnode的最后一个child不存在
} else if (isUndef(oldEndVnode)) {
// oldEnd索引左移
oldEndVnode = oldCh[--oldEndIdx]
// oldStartVnode和newStartVnode是同一个节点
} else if (sameVnode(oldStartVnode, newStartVnode)) {
// patch oldStartVnode和newStartVnode， 索引左移，继续循环
patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)
oldStartVnode = oldCh[++oldStartIdx]
newStartVnode = newCh[++newStartIdx]
// oldEndVnode和newEndVnode是同一个节点
} else if (sameVnode(oldEndVnode, newEndVnode)) {
// patch oldEndVnode和newEndVnode，索引右移，继续循环
patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue)
oldEndVnode = oldCh[--oldEndIdx]
newEndVnode = newCh[--newEndIdx]
// oldStartVnode和newEndVnode是同一个节点
} else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
// patch oldStartVnode和newEndVnode
patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue)
// 如果removeOnly是false，则将oldStartVnode.eml移动到oldEndVnode.elm之后
canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
// oldStart索引右移，newEnd索引左移
oldStartVnode = oldCh[++oldStartIdx]
newEndVnode = newCh[--newEndIdx]
// 如果oldEndVnode和newStartVnode是同一个节点
} else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
// patch oldEndVnode和newStartVnode
patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue)
// 如果removeOnly是false，则将oldEndVnode.elm移动到oldStartVnode.elm之前
canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
// oldEnd索引左移，newStart索引右移
oldEndVnode = oldCh[--oldEndIdx]
newStartVnode = newCh[++newStartIdx]
// 如果都不匹配
} else {
if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
// 尝试在oldChildren中寻找和newStartVnode的具有相同的key的Vnode
idxInOld = isDef(newStartVnode.key)
? oldKeyToIdx[newStartVnode.key]
: findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
// 如果未找到，说明newStartVnode是一个新的节点
if (isUndef(idxInOld)) { // New element
// 创建一个新Vnode
createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
// 如果找到了和newStartVnodej具有相同的key的Vnode，叫vnodeToMove
} else {
vnodeToMove = oldCh[idxInOld]
/* istanbul ignore if */
if (process.env. NODE_ENV !== 'production' && !vnodeToMove) {
warn(
'It seems there are duplicate keys that is causing an update error. ' +
'Make sure each v-for item has a unique key.'
)
}
// 比较两个具有相同的key的新节点是否是同一个节点
//不设key，newCh和oldCh只会进行头尾两端的相互比较，设key后，除了头尾两端的比较外，还会从用key生成的对象oldKeyToIdx中查找匹配的节点，所以为节点设置key可以更高效的利用dom。
if (sameVnode(vnodeToMove, newStartVnode)) {
// patch vnodeToMove和newStartVnode
patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue)
// 清除
oldCh[idxInOld] = undefined
// 如果removeOnly是false，则将找到的和newStartVnodej具有相同的key的Vnode，叫vnodeToMove.elm
// 移动到oldStartVnode.elm之前
canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
// 如果key相同，但是节点不相同，则创建一个新的节点
} else {
// same key but different element. treat as new element
createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
}
}
// 右移
newStartVnode = newCh[++newStartIdx]
}
}while循环主要处理了以下五种情景：
- 当新老
VNode节点的start相同时，直接patchVnode，同时新老VNode节点的开始索引都加 1 - 当新老
VNode节点的end相同时，同样直接patchVnode，同时新老VNode节点的结束索引都减 1 - 当老
VNode节点的start和新VNode节点的end相同时，这时候在patchVnode后，还需要将当前真实dom节点移动到oldEndVnode的后面，同时老VNode节点开始索引加 1，新VNode节点的结束索引减 1 - 当老
VNode节点的end和新VNode节点的start相同时，这时候在patchVnode后，还需要将当前真实dom节点移动到oldStartVnode的前面，同时老VNode节点结束索引减 1，新VNode节点的开始索引加 1 - 如果都不满足以上四种情形，那说明没有相同的节点可以复用，则会分为以下两种情况：
- 从旧的
VNode为key值，对应index序列为value值的哈希表中找到与newStartVnode一致key的旧的VNode节点，再进行patchVnode，同时将这个真实dom移动到oldStartVnode对应的真实dom的前面 - 调用
createElm创建一个新的dom节点放到当前newStartIdx的位置
- 从旧的
小结
当数据发生改变时，订阅者
watcher就会调用patch给真实的DOM打补丁通过
isSameVnode进行判断，相同则调用patchVnode方法patchVnodepatchVnode做了以下操作：
- 找到对应的真实
dom，称为el - 如果都有都有文本节点且不相等，将
el文本节点设置为Vnode的文本节点 - 如果
oldVnode有子节点而VNode没有，则删除el子节点 - 如果
oldVnode没有子节点而VNode有，则将VNode的子节点真实化后添加到el - 如果两者都有子节点，则执行
updateChildren函数比较子节点
- 找到对应的真实
updateChildrenupdateChildren主要做了以下操作：
- 设置新旧
VNode的头尾指针 - 新旧头尾指针进行比较，循环向中间靠拢，根据情况调用
patchVnode进行patch重复流程、调用createElem创建一个新节点，从哈希表寻找key一致的VNode节点再分情况操作
- 设置新旧
Vue2 和 Vue3 和 React 三者的 diff 算法有什么区别
如果要严格diff两颗树，时间复杂度O(n^3)不可用，react把复杂度优化到了O(n)
Tree diff 的优化
- 只比较同一层级，不跨级比较
tag不同则删掉重建（不在去比较内部细节）- 子节点通过
key区分
React diff 仅右移动
Vue2 深度递归的方式 + 双指针的方式
Vue2的diff算法是平级比较，不考虑跨级比较的情况。内部采用深度递归的方式 + 双指针的方式进行比较
- 比较过程:
- 先比较是否是相同节点
- 相同节点比较属性,并复用老节点
- 比较儿子节点，考虑老节点和新节点儿子的情况
- 优化比较：
头头、尾尾、头尾、尾头 - 比对查找进行复用
Vue3 中采用最长递增子序列实现 diff 算法
Vue React 为何循环时必须使用 key
vdom diff算法会根据key判断元素是否要删除- 如果匹配了
key，则只移动元素-性能较好 - 未匹配
key，则删除重建，性能较差
既然 Vue 通过数据劫持可以精准探测数据变化，为什么还需要虚拟 DOM 进行 diff 检测差异
- 响应式数据变化，
Vue确实可以在数据变化时，响应式系统可以立刻得知。但是如果给每个属性都添加watcher用于更新的话，会产生大量的watcher从而降低性能 - 而且粒度过细也得导致更新不准确的问题，所以
vue采用了组件级的watcher配合diff来检测差异
请说明 Vue 中 key 的作用和原理，谈谈你对它的理解
key是为Vue中的VNode标记的唯一id，在patch过程中通过key可以判断两个虚拟节点是否是相同节点，通过这个key，我们的diff操作可以更准确、更快速diff算法的过程中,先会进行新旧节点的首尾交叉对比,当无法匹配的时候会用新节点的key与旧节点进行比对,然后检出差异- 尽量不要采用索引作为
key - 如果不加
key,那么vue会选择复用节点(Vue 的就地更新策略),导致之前节点的状态被保留下来,会产生一系列的bug - 更准确：因为带
key就不是就地复用了，在sameNode函数a.key === b.key对比中可以避免就地复用的情况。所以会更加准确。 - 更快速：
key的唯一性可以被Map数据结构充分利用，相比于遍历查找的时间复杂度O(n)，Map的时间复杂度仅仅为O(1)，比遍历方式更快。
源码如下：
js
function createKeyToOldIdx(children, beginIdx, endIdx) {
let i, key
const map = {}
for (i = beginIdx; i <= endIdx; ++i) {
key = children[i].key
if (isDef(key)) map[key] = i
}
return map
}function createKeyToOldIdx(children, beginIdx, endIdx) {
let i, key
const map = {}
for (i = beginIdx; i <= endIdx; ++i) {
key = children[i].key
if (isDef(key)) map[key] = i
}
return map
}回答范例
分析
这是一道特别常见的问题，主要考查大家对虚拟DOM和patch细节的掌握程度，能够反映面试者理解层次
思路分析：
- 给出结论，
key的作用是用于优化patch性能 key的必要性- 实际使用方式
- 总结：可从源码层面描述一下
vue如何判断两个节点是否相同
回答范例：
key的作用主要是为了更高效的更新虚拟DOMvue在patch过程中判断两个节点是否是相同节点是key是一个必要条件，渲染一组列表时，key往往是唯一标识，所以如果不定义key的话，vue只能认为比较的两个节点是同一个，哪怕它们实际上不是，这导致了频繁更新元素，使得整个patch过程比较低效，影响性能- 实际使用中在渲染一组列表时
key必须设置，而且必须是唯一标识，应该避免使用数组索引作为key，这可能导致一些隐蔽的bug；vue中在使用相同标签元素过渡切换时，也会使用key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果 - 从源码中可以知道，
vue判断两个节点是否相同时主要判断两者的key和标签类型(如div)等，因此如果不设置key，它的值就是undefined，则可能永远认为这是两个相同节点，只能去做更新操作，这造成了大量的dom更新操作，明显是不可取的
如果不使用
key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。key是为Vue中vnode的唯一标记，通过这个key，我们的diff操作可以更准确、更快速
diff 程可以概括为：
oldCh和newCh各有两个头尾的变量 StartIdx和EndIdx，它们的2个变量相互比较，一共有4种比较方式。如果4种比较都没匹配，如果设置了key，就会用key进行比较，在比较的过程中，变量会往中间靠，一旦StartIdx>EndIdx表明oldCh和newCh至少有一个已经遍历完了，就会结束比较,这四种比较方式就是首、尾、旧尾新头、旧头新尾
相关代码如下
js
// 判断两个vnode的标签和key是否相同 如果相同 就可以认为是同一节点就地复用
function isSameVnode(oldVnode, newVnode) {
return oldVnode.tag === newVnode.tag && oldVnode.key === newVnode.key
}
// 根据key来创建老的儿子的index映射表 类似 {'a':0,'b':1} 代表key为'a'的节点在第一个位置 key为'b'的节点在第二个位置
function makeIndexByKey(children) {
let map = {}
children.forEach((item, index) => {
map[item.key] = index
})
return map
}
// 生成的映射表
let map = makeIndexByKey(oldCh)// 判断两个vnode的标签和key是否相同 如果相同 就可以认为是同一节点就地复用
function isSameVnode(oldVnode, newVnode) {
return oldVnode.tag === newVnode.tag && oldVnode.key === newVnode.key
}
// 根据key来创建老的儿子的index映射表 类似 {'a':0,'b':1} 代表key为'a'的节点在第一个位置 key为'b'的节点在第二个位置
function makeIndexByKey(children) {
let map = {}
children.forEach((item, index) => {
map[item.key] = index
})
return map
}
// 生成的映射表
let map = makeIndexByKey(oldCh)Vue 组件相关
Vue 组件为什么只能有一个根元素
vue3中没有问题
js
Vue.createApp({
components: {
comp: {
template: `
<div>root1</div>
<div>root2</div>
`,
},
},
}).mount('#app')Vue.createApp({
components: {
comp: {
template: `
<div>root1</div>
<div>root2</div>
`,
},
},
}).mount('#app')vue2中组件确实只能有一个根，但vue3中组件已经可以多根节点了。- 之所以需要这样是因为
vdom是一颗单根树形结构，patch方法在遍历的时候从根节点开始遍历，它要求只有一个根节点。组件也会转换为一个vdom vue3中之所以可以写多个根节点，是因为引入了Fragment的概念，这是一个抽象的节点，如果发现组件是多根的，就创建一个Fragment节点，把多个根节点作为它的children。将来patch的时候，如果发现是一个Fragment节点，则直接遍历children创建或更新
谈一谈对 Vue 组件化的理解
- 组件化开发能大幅提高开发效率、测试性、复用性等
- 常用的组件化技术：属性、自定义事件、插槽
- 降低更新频率，只重新渲染变化的组件
- 组件的特点：高内聚、低耦合、单向数据流
Vue 组件渲染和更新过程
渲染组件时，会通过
Vue.extend方法构建子组件的构造函数，并进行实例化。最终手动调用$mount()进行挂载。更新组件时会进行patchVnode流程，核心就是diff算法
异步组件是什么？使用场景有哪些？
分析
因为异步路由的存在，我们使用异步组件的次数比较少，因此还是有必要两者的不同。
体验
大型应用中，我们需要分割应用为更小的块，并且在需要组件时再加载它们
js
import { defineAsyncComponent } from 'vue'
// defineAsyncComponent定义异步组件，返回一个包装组件。包装组件根据加载器的状态决定渲染什么内容
const AsyncComp = defineAsyncComponent(() => {
// 加载函数返回Promise
return new Promise((resolve, reject) => {
// ...可以从服务器加载组件
resolve(/* loaded component */)
})
})
// 借助打包工具实现ES模块动态导入
const AsyncComp = defineAsyncComponent(() => import('./components/MyComponent.vue'))import { defineAsyncComponent } from 'vue'
// defineAsyncComponent定义异步组件，返回一个包装组件。包装组件根据加载器的状态决定渲染什么内容
const AsyncComp = defineAsyncComponent(() => {
// 加载函数返回Promise
return new Promise((resolve, reject) => {
// ...可以从服务器加载组件
resolve(/* loaded component */)
})
})
// 借助打包工具实现ES模块动态导入
const AsyncComp = defineAsyncComponent(() => import('./components/MyComponent.vue'))回答范例
- 在大型应用中，我们需要分割应用为更小的块，并且在需要组件时再加载它们。
- 我们不仅可以在路由切换时懒加载组件，还可以在页面组件中继续使用异步组件，从而实现更细的分割粒度。
- 使用异步组件最简单的方式是直接给
defineAsyncComponent指定一个loader函数，结合 ES 模块动态导入函数import可以快速实现。我们甚至可以指定loadingComponent和errorComponent选项从而给用户一个很好的加载反馈。另外Vue3中还可以结合Suspense组件使用异步组件。 - 异步组件容易和路由懒加载混淆，实际上不是一个东西。异步组件不能被用于定义懒加载路由上，处理它的是
vue框架，处理路由组件加载的是vue-router。但是可以在懒加载的路由组件中使用异步组件
为什么要使用异步组件
- 节省打包出的结果，异步组件分开打包，采用
jsonp的方式进行加载，有效解决文件过大的问题。 - 核心就是包组件定义变成一个函数，依赖
import()语法，可以实现文件的分割加载。
js
components: {
AddCustomerSchedule: (resolve) => import('../components/AddCustomer') // require([])
}components: {
AddCustomerSchedule: (resolve) => import('../components/AddCustomer') // require([])
}原理
js
export function ( Ctor: Class<Component> | Function | Object | void, data: ?VNodeData, context: Component, children: ?Array<VNode>, tag?: string ): VNode | Array<VNode> | void {
// async component
let asyncFactory
if (isUndef(Ctor.cid)) {
asyncFactory = Ctor
Ctor = resolveAsyncComponent(asyncFactory, baseCtor) // 默认调用此函数时返回 undefiend
// 第二次渲染时Ctor不为undefined
if (Ctor === undefined) {
return createAsyncPlaceholder( // 渲染占位符 空虚拟节点
asyncFactory,
data,
context,
children,
tag
)
}
}
}
function resolveAsyncComponent ( factory: Function, baseCtor: Class<Component> ): Class<Component> | void {
if (isDef(factory.resolved)) {
// 3.在次渲染时可以拿到获取的最新组件
return factory.resolved
}
const resolve = once((res: Object | Class<Component>) => {
factory.resolved = ensureCtor(res, baseCtor)
if (!sync) {
forceRender(true) //2. 强制更新视图重新渲染
} else {
owners.length = 0
}
})
const reject = once(reason => {
if (isDef(factory.errorComp)) {
factory.error = true forceRender(true)
}
})
const res = factory(resolve, reject)// 1.将resolve方法和reject方法传入，用户调用 resolve方法后
sync = false
return factory.resolved
}export function ( Ctor: Class<Component> | Function | Object | void, data: ?VNodeData, context: Component, children: ?Array<VNode>, tag?: string ): VNode | Array<VNode> | void {
// async component
let asyncFactory
if (isUndef(Ctor.cid)) {
asyncFactory = Ctor
Ctor = resolveAsyncComponent(asyncFactory, baseCtor) // 默认调用此函数时返回 undefiend
// 第二次渲染时Ctor不为undefined
if (Ctor === undefined) {
return createAsyncPlaceholder( // 渲染占位符 空虚拟节点
asyncFactory,
data,
context,
children,
tag
)
}
}
}
function resolveAsyncComponent ( factory: Function, baseCtor: Class<Component> ): Class<Component> | void {
if (isDef(factory.resolved)) {
// 3.在次渲染时可以拿到获取的最新组件
return factory.resolved
}
const resolve = once((res: Object | Class<Component>) => {
factory.resolved = ensureCtor(res, baseCtor)
if (!sync) {
forceRender(true) //2. 强制更新视图重新渲染
} else {
owners.length = 0
}
})
const reject = once(reason => {
if (isDef(factory.errorComp)) {
factory.error = true forceRender(true)
}
})
const res = factory(resolve, reject)// 1.将resolve方法和reject方法传入，用户调用 resolve方法后
sync = false
return factory.resolved
}函数式组件优势和原理
函数组件的特点
- 函数式组件需要在声明组件是指定
functional:true - 不需要实例化，所以没有
this,this通过render函数的第二个参数context来代替 - 没有生命周期钩子函数，不能使用计算属性，
watch - 不能通过
$emit对外暴露事件，调用事件只能通过context.listeners.click的方式调用外部传入的事件 - 因为函数式组件是没有实例化的，所以在外部通过
ref去引用组件时，实际引用的是HTMLElement - 函数式组件的
props可以不用显示声明，所以没有在props里面声明的属性都会被自动隐式解析为prop,而普通组件所有未声明的属性都解析到$attrs里面，并自动挂载到组件根元素上面(可以通过inheritAttrs属性禁止)
优点
- 由于函数式组件不需要实例化，无状态，没有生命周期，所以渲染性能要好于普通组件
- 函数式组件结构比较简单，代码结构更清晰
使用场景：
- 一个简单的展示组件，作为容器组件使用 比如
router-view就是一个函数式组件 - “高阶组件”——用于接收一个组件作为参数，返回一个被包装过的组件
例子
js
Vue.component('functional', {
// 构造函数产生虚拟节点的
functional: true, // 函数式组件 // data={attrs:{}}
render(h) {
return h('div', 'test')
},
})
const vm = new Vue({
el: '#app',
})Vue.component('functional', {
// 构造函数产生虚拟节点的
functional: true, // 函数式组件 // data={attrs:{}}
render(h) {
return h('div', 'test')
},
})
const vm = new Vue({
el: '#app',
})源码相关
js
// functional component
if (isTrue(Ctor.options.functional)) {
// 带有functional的属性的就是函数式组件
return createFunctionalComponent(Ctor, propsData, data, context, children)
}
// extract listeners, since these needs to be treated as
// child component listeners instead of DOM listeners
const listeners = data.on // 处理事件
// replace with listeners with .native modifier
// so it gets processed during parent component patch.
data.on = data.nativeOn // 处理原生事件
// install component management hooks onto the placeholder node
installComponentHooks(data) // 安装组件相关钩子 （函数式组件没有调用此方法，从而性能高于普通组件）// functional component
if (isTrue(Ctor.options.functional)) {
// 带有functional的属性的就是函数式组件
return createFunctionalComponent(Ctor, propsData, data, context, children)
}
// extract listeners, since these needs to be treated as
// child component listeners instead of DOM listeners
const listeners = data.on // 处理事件
// replace with listeners with .native modifier
// so it gets processed during parent component patch.
data.on = data.nativeOn // 处理原生事件
// install component management hooks onto the placeholder node
installComponentHooks(data) // 安装组件相关钩子 （函数式组件没有调用此方法，从而性能高于普通组件）Vue 组件之间通信方式有哪些
Vue 组件间通信是面试常考的知识点之一，这题有点类似于开放题，你回答出越多方法当然越加分，表明你对 Vue 掌握的越熟练。Vue 组件间通信只要指以下 3 类通信：
父子组件通信、隔代组件通信、兄弟组件通信，下面我们分别介绍每种通信方式且会说明此种方法可适用于哪类组件间通信
组件传参的各种方式
组件通信常用方式有以下几种
props / $emit
适用 父子组件通信
- 父组件向子组件传递数据是通过
prop传递的，子组件传递数据给父组件是通过$emit触发事件来做到的
- 父组件向子组件传递数据是通过
ref与**$parent** / $children(vue3 废弃)适用 父子组件通信
ref：如果在普通的DOM元素上使用，引用指向的就是DOM元素；如果用在子组件上，引用就指向组件实例$parent / $children：访问访问父组件的属性或方法 / 访问子组件的属性或方法
EventBus （$emit / $on）适用于 父子、隔代、兄弟组件通信
- 这种方法通过一个空的
Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件
- 这种方法通过一个空的
$attrs / $listeners(vue3 废弃)适用于 隔代组件通信
$attrs：包含了父作用域中不被prop所识别 (且获取) 的特性绑定 (class和style除外 )。当一个组件没有声明任何prop时，这里会包含所有父作用域的绑定 (class和style除外 )，并且可以通过v-bind="$attrs"传入内部组件。通常配合inheritAttrs选项一起使用，多余的属性不会被解析到标签上$listeners：包含了父作用域中的 (不含.native修饰器的)v-on事件监听器。它可以通过v-on="$listeners"传入内部组件
provide / inject适用于 隔代组件通信
- 祖先组件中通过
provider来提供变量，然后在子孙组件中通过inject来注入变量。provide / injectAPI 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系
- 祖先组件中通过
$root适用于 隔代组件通信 访问根组件中的属性或方法，是根组件，不是父组件。$root只对根组件有用Vuex适用于 父子、隔代、兄弟组件通信
Vuex是一个专为Vue.js应用程序开发的状态管理模式。每一个Vuex应用的核心就是store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 (state)Vuex的状态存储是响应式的。当Vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会相应地得到高效更新。- 改变
store中的状态的唯一途径就是显式地提交 (commit)mutation。这样使得我们可以方便地跟踪每一个状态的变化。
根据组件之间关系讨论组件通信最为清晰有效
- 父子组件：
props/$emit/$parent/ref - 兄弟组件：
$parent/eventbus/vuex - 跨层级关系：
eventbus/vuex/provide+inject/$attrs + $listeners/$root
下面演示组件之间通讯三种情况: 父传子、子传父、兄弟组件之间的通讯
1. 父子组件通信
使用
props，父组件可以使用props向子组件传递数据。
父组件vue模板father.vue:
html
<template>
<child :msg="message"></child>
</template>
<script>
import child from './child.vue';
export default {
components: {
child
},
data () {
return {
message: 'father message';
}
}
}
</script><template>
<child :msg="message"></child>
</template>
<script>
import child from './child.vue';
export default {
components: {
child
},
data () {
return {
message: 'father message';
}
}
}
</script>子组件vue模板child.vue:
html
<template>
<div>{{msg}}</div>
</template>
<script>
export default {
props: {
msg: {
type: String,
required: true,
},
},
}
</script><template>
<div>{{msg}}</div>
</template>
<script>
export default {
props: {
msg: {
type: String,
required: true,
},
},
}
</script>回调函数（callBack）
父传子：将父组件里定义的method作为props传入子组件
js
// 父组件Parent.vue：
<Child :changeMsgFn="changeMessage">
methods: {
changeMessage(){
this.message = 'test'
}
}
// 子组件Child.vue：
<button @click="changeMsgFn">
props:['changeMsgFn']// 父组件Parent.vue：
<Child :changeMsgFn="changeMessage">
methods: {
changeMessage(){
this.message = 'test'
}
}
// 子组件Child.vue：
<button @click="changeMsgFn">
props:['changeMsgFn']子组件向父组件通信
父组件向子组件传递事件方法，子组件通过
$emit触发事件，回调给父组件
父组件vue模板father.vue:
html
<template>
<child @msgFunc="func"></child>
</template>
<script>
import child from './child.vue'
export default {
components: {
child,
},
methods: {
func(msg) {
console.log(msg)
},
},
}
</script><template>
<child @msgFunc="func"></child>
</template>
<script>
import child from './child.vue'
export default {
components: {
child,
},
methods: {
func(msg) {
console.log(msg)
},
},
}
</script>子组件vue模板child.vue:
html
<template>
<button @click="handleClick">点我</button>
</template>
<script>
export default {
props: {
msg: {
type: String,
required: true
}
},
methods () {
handleClick () {
//........
this.$emit('msgFunc');
}
}
}
</script><template>
<button @click="handleClick">点我</button>
</template>
<script>
export default {
props: {
msg: {
type: String,
required: true
}
},
methods () {
handleClick () {
//........
this.$emit('msgFunc');
}
}
}
</script>2. provide / inject 跨级访问祖先组件的数据
父组件通过使用provide(){return{}}提供需要传递的数据
js
export default {
data() {
return {
title: '我是父组件',
name: 'poetry',
}
},
methods: {
say() {
alert(1)
},
},
// provide属性 能够为后面的后代组件/嵌套的组件提供所需要的变量和方法
provide() {
return {
message: '我是祖先组件提供的数据',
name: this.name, // 传递属性
say: this.say,
}
},
}export default {
data() {
return {
title: '我是父组件',
name: 'poetry',
}
},
methods: {
say() {
alert(1)
},
},
// provide属性 能够为后面的后代组件/嵌套的组件提供所需要的变量和方法
provide() {
return {
message: '我是祖先组件提供的数据',
name: this.name, // 传递属性
say: this.say,
}
},
}子组件通过使用inject:[“参数1”,”参数2”,…]接收父组件传递的参数
html
<template>
<p>曾孙组件</p>
<p>{{message}}</p>
</template>
<script>
export default {
// inject 注入/接收祖先组件传递的所需要的数据即可
//接收到的数据 变量 跟data里面的变量一样 可以直接绑定到页面 {}
inject: ['message', 'say'],
mounted() {
this.say()
},
}
</script><template>
<p>曾孙组件</p>
<p>{{message}}</p>
</template>
<script>
export default {
// inject 注入/接收祖先组件传递的所需要的数据即可
//接收到的数据 变量 跟data里面的变量一样 可以直接绑定到页面 {}
inject: ['message', 'say'],
mounted() {
this.say()
},
}
</script>3. $parent + $children 获取父组件实例和子组件实例的集合
this.$parent可以直接访问该组件的父实例或组件- 父组件也可以通过
this.$children访问它所有的子组件；需要注意$children并不保证顺序，也不是响应式的
html
<!-- parent.vue -->
<template>
<div>
<child1></child1>
<child2></child2>
<button @click="clickChild">$children方式获取子组件值</button>
</div>
</template>
<script>
import child1 from './child1'
import child2 from './child2'
export default {
data() {
return {
total: 108,
}
},
components: {
child1,
child2,
},
methods: {
funa(e) {
console.log('index', e)
},
clickChild() {
console.log(this.$children[0].msg)
console.log(this.$children[1].msg)
},
},
}
</script>
<!-- child1.vue -->
<template>
<div>
<button @click="parentClick">点击访问父组件</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: 'child1',
}
},
methods: {
// 访问父组件数据
parentClick() {
this.$parent.funa('xx')
console.log(this.$parent.total)
},
},
}
</script>
<!-- child2.vue -->
<template>
<div>child2</div>
</template>
<script>
export default {
data() {
return {
msg: 'child2',
}
},
}
</script><!-- parent.vue -->
<template>
<div>
<child1></child1>
<child2></child2>
<button @click="clickChild">$children方式获取子组件值</button>
</div>
</template>
<script>
import child1 from './child1'
import child2 from './child2'
export default {
data() {
return {
total: 108,
}
},
components: {
child1,
child2,
},
methods: {
funa(e) {
console.log('index', e)
},
clickChild() {
console.log(this.$children[0].msg)
console.log(this.$children[1].msg)
},
},
}
</script>
<!-- child1.vue -->
<template>
<div>
<button @click="parentClick">点击访问父组件</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: 'child1',
}
},
methods: {
// 访问父组件数据
parentClick() {
this.$parent.funa('xx')
console.log(this.$parent.total)
},
},
}
</script>
<!-- child2.vue -->
<template>
<div>child2</div>
</template>
<script>
export default {
data() {
return {
msg: 'child2',
}
},
}
</script>4. $attrs + $listeners 多级组件通信
$attrs包含了从父组件传过来的所有props属性
js
// 父组件Parent.vue：
<Child :name="name" :age="age"/>
// 子组件Child.vue：
<GrandChild v-bind="$attrs" />
// 孙子组件GrandChild
<p>姓名：{{$attrs.name}}</p>
<p>年龄：{{$attrs.age}}</p>// 父组件Parent.vue：
<Child :name="name" :age="age"/>
// 子组件Child.vue：
<GrandChild v-bind="$attrs" />
// 孙子组件GrandChild
<p>姓名：{{$attrs.name}}</p>
<p>年龄：{{$attrs.age}}</p>
$listeners包含了父组件监听的所有事件
js
// 父组件Parent.vue：
<Child :name="name" :age="age" @changeNameFn="changeName"/>
// 子组件Child.vue：
<button @click="$listeners.changeNameFn"></button>// 父组件Parent.vue：
<Child :name="name" :age="age" @changeNameFn="changeName"/>
// 子组件Child.vue：
<button @click="$listeners.changeNameFn"></button>5. ref 父子组件通信
js
// 父组件Parent.vue：
<Child ref="childComp"/>
<button @click="changeName"></button>
changeName(){
console.log(this.$refs.childComp.age);
this.$refs.childComp.changeAge()
}
// 子组件Child.vue：
data(){
return{
age:20
}
},
methods(){
changeAge(){
this.age=15
}
}// 父组件Parent.vue：
<Child ref="childComp"/>
<button @click="changeName"></button>
changeName(){
console.log(this.$refs.childComp.age);
this.$refs.childComp.changeAge()
}
// 子组件Child.vue：
data(){
return{
age:20
}
},
methods(){
changeAge(){
this.age=15
}
}6. 非父子, 兄弟组件之间通信
vue2中废弃了broadcast广播和分发事件的方法。父子组件中可以用props和$emit()。如何实现非父子组件间的通信，可以通过实例一个vue实例Bus作为媒介，要相互通信的兄弟组件之中，都引入Bus，然后通过分别调用 Bus 事件触发和监听来实现通信和参数传递。Bus.js可以是这样:
js
// Bus.js
// 创建一个中央时间总线类
class Bus {
constructor() {
this.callbacks = {}; // 存放事件的名字
}
$on(name, fn) {
this.callbacks[name] = this.callbacks[name] || [];
this.callbacks[name].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的功能
<template>
<button @click="toBus">子组件传给兄弟组件</button>
</template>
<script>
export default{
methods: {
toBus () {
this.$bus.$emit('foo', '来自兄弟组件')
}
}
}
</script>// Bus.js
// 创建一个中央时间总线类
class Bus {
constructor() {
this.callbacks = {}; // 存放事件的名字
}
$on(name, fn) {
this.callbacks[name] = this.callbacks[name] || [];
this.callbacks[name].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的功能
<template>
<button @click="toBus">子组件传给兄弟组件</button>
</template>
<script>
export default{
methods: {
toBus () {
this.$bus.$emit('foo', '来自兄弟组件')
}
}
}
</script>另一个组件也在钩子函数中监听on事件
js
export default {
data() {
return {
message: '',
}
},
mounted() {
this.$bus.$on('foo', (msg) => {
this.message = msg
})
},
}export default {
data() {
return {
message: '',
}
},
mounted() {
this.$bus.$on('foo', (msg) => {
this.message = msg
})
},
}7. $root 访问根组件中的属性或方法
- 作用：访问根组件中的属性或方法
- 注意：是根组件，不是父组件。
$root只对根组件有用
js
var vm = new Vue({
el: '#app',
data() {
return {
rootInfo: '我是根元素的属性',
}
},
methods: {
alerts() {
alert(111)
},
},
components: {
com1: {
data() {
return {
info: '组件1',
}
},
template: '<p>{{ info }} <com2></com2></p>',
components: {
com2: {
template: '<p>我是组件1的子组件</p>',
created() {
this.$root.alerts() // 根组件方法
console.log(this.$root.rootInfo) // 我是根元素的属性
},
},
},
},
},
})var vm = new Vue({
el: '#app',
data() {
return {
rootInfo: '我是根元素的属性',
}
},
methods: {
alerts() {
alert(111)
},
},
components: {
com1: {
data() {
return {
info: '组件1',
}
},
template: '<p>{{ info }} <com2></com2></p>',
components: {
com2: {
template: '<p>我是组件1的子组件</p>',
created() {
this.$root.alerts() // 根组件方法
console.log(this.$root.rootInfo) // 我是根元素的属性
},
},
},
},
},
})8. vuex
- 适用场景: 复杂关系的组件数据传递
- Vuex 作用相当于一个用来存储共享变量的容器
state用来存放共享变量的地方getter，可以增加一个getter派生状态，(相当于store中的计算属性），用来获得共享变量的值mutations用来存放修改state的方法。actions也是用来存放修改 state 的方法，不过action是在mutations的基础上进行。常用来做一些异步操作
小结
- 父子关系的组件数据传递选择
props与$emit进行传递，也可选择ref - 兄弟关系的组件数据传递可选择
$bus，其次可以选择$parent进行传递 - 祖先与后代组件数据传递可选择
attrs与listeners或者Provide与Inject - 复杂关系的组件数据传递可以通过
vuex存放共享的变量
组件中写 name 属性的好处
可以标识组件的具体名称方便调试和查找对应属性
js
// 源码位置 src/core/global-api/extend.js
// enable recursive self-lookup
if (name) {
Sub.options.components[name] = Sub // 记录自己 在组件中递归自己 -> jsx
}// 源码位置 src/core/global-api/extend.js
// enable recursive self-lookup
if (name) {
Sub.options.components[name] = Sub // 记录自己 在组件中递归自己 -> jsx
}Vue.extend 作用和原理
官方解释：
Vue.extend使用基础Vue构造器，创建一个“子类”。参数是一个包含组件选项的对象。
其实就是一个子类构造器 是 Vue 组件的核心 api 实现思路就是使用原型继承的方法返回了 Vue 的子类 并且利用 mergeOptions 把传入组件的 options 和父类的 options 进行了合并
extend是构造一个组件的语法器。然后这个组件你可以作用到Vue.component这个全局注册方法里还可以在任意vue模板里使用组件。 也可以作用到vue实例或者某个组件中的components属性中并在内部使用apple组件。Vue.component你可以创建 ，也可以取组件。
相关代码如下
js
export default function initExtend(Vue) {
let cid = 0 //组件的唯一标识
// 创建子类继承Vue父类 便于属性扩展
Vue.extend = function (extendOptions) {
// 创建子类的构造函数 并且调用初始化方法
const Sub = function VueComponent(options) {
this._init(options) //调用Vue初始化方法
}
Sub.cid = cid++
Sub.prototype = Object.create(this.prototype) // 子类原型指向父类
Sub.prototype.constructor = Sub //constructor指向自己
Sub.options = mergeOptions(this.options, extendOptions) //合并自己的options和父类的options
return Sub
}
}export default function initExtend(Vue) {
let cid = 0 //组件的唯一标识
// 创建子类继承Vue父类 便于属性扩展
Vue.extend = function (extendOptions) {
// 创建子类的构造函数 并且调用初始化方法
const Sub = function VueComponent(options) {
this._init(options) //调用Vue初始化方法
}
Sub.cid = cid++
Sub.prototype = Object.create(this.prototype) // 子类原型指向父类
Sub.prototype.constructor = Sub //constructor指向自己
Sub.options = mergeOptions(this.options, extendOptions) //合并自己的options和父类的options
return Sub
}
}Vue 中如何扩展一个组件
此题属于实践题，考察大家对 vue 常用 api 使用熟练度，答题时不仅要列出这些解决方案，同时最好说出他们异同
答题思路：
- 按照逻辑扩展和内容扩展来列举
- 逻辑扩展有：
mixins、extends、composition api - 内容扩展有
slots；
- 逻辑扩展有：
- 分别说出他们使用方法、场景差异和问题。
- 作为扩展，还可以说说
vue3中新引入的composition api带来的变化
回答范例：
- 常见的组件扩展方法有：
mixins，slots，extends等 - 混入
mixins是分发Vue组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项
js
// 复用代码：它是一个配置对象，选项和组件里面一样
const mymixin = {
methods: {
dosomething() {},
},
}
// 全局混入：将混入对象传入
Vue.mixin(mymixin)
// 局部混入：做数组项设置到mixins选项，仅作用于当前组件
const Comp = {
mixins: [mymixin],
}// 复用代码：它是一个配置对象，选项和组件里面一样
const mymixin = {
methods: {
dosomething() {},
},
}
// 全局混入：将混入对象传入
Vue.mixin(mymixin)
// 局部混入：做数组项设置到mixins选项，仅作用于当前组件
const Comp = {
mixins: [mymixin],
}- 插槽主要用于
vue组件中的内容分发，也可以用于组件扩展
子组件 Child
html
<div>
<slot>这个内容会被父组件传递的内容替换</slot>
</div><div>
<slot>这个内容会被父组件传递的内容替换</slot>
</div>父组件 Parent
html
<div>
<Child>来自父组件内容</Child>
</div><div>
<Child>来自父组件内容</Child>
</div>如果要精确分发到不同位置可以使用具名插槽，如果要使用子组件中的数据可以使用作用域插槽
- 组件选项中还有一个不太常用的选项
extends，也可以起到扩展组件的目的
js
// 扩展对象
const myextends = {
methods: {
dosomething() {},
},
}
// 组件扩展：做数组项设置到extends选项，仅作用于当前组件
// 跟混入的不同是它只能扩展单个对象
// 另外如果和混入发生冲突，该选项优先级较高，优先起作用
const Comp = {
extends: myextends,
}// 扩展对象
const myextends = {
methods: {
dosomething() {},
},
}
// 组件扩展：做数组项设置到extends选项，仅作用于当前组件
// 跟混入的不同是它只能扩展单个对象
// 另外如果和混入发生冲突，该选项优先级较高，优先起作用
const Comp = {
extends: myextends,
}- 混入的数据和方法不能明确判断来源且可能和当前组件内变量产生命名冲突，
vue3中引入的composition api，可以很好解决这些问题，利用独立出来的响应式模块可以很方便的编写独立逻辑并提供响应式的数据，然后在setup选项中组合使用，增强代码的可读性和维护性。例如
js
// 复用逻辑1
function useXX() {}
// 复用逻辑2
function useYY() {}
// 逻辑组合
const Comp = {
setup() {
const { xx } = useXX()
const { yy } = useYY()
return { xx, yy }
},
}// 复用逻辑1
function useXX() {}
// 复用逻辑2
function useYY() {}
// 逻辑组合
const Comp = {
setup() {
const { xx } = useXX()
const { yy } = useYY()
return { xx, yy }
},
}子组件可以直接改变父组件的数据么，说明原因
这是一个实践知识点，组件化开发过程中有个单项数据流原则，不在子组件中修改父组件是个常识问题
思路
- 讲讲单项数据流原则，表明为何不能这么做
- 举几个常见场景的例子说说解决方案
- 结合实践讲讲如果需要修改父组件状态应该如何做
回答范例
- 所有的
prop都使得其父子之间形成了一个单向下行绑定：父级prop的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。另外，每次父级组件发生变更时，子组件中所有的prop都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变prop。如果你这样做了，Vue会在浏览器控制台中发出警告
js
const props = defineProps(['foo'])
// ❌ 下面行为会被警告, props是只读的!
props.foo = 'bar'const props = defineProps(['foo'])
// ❌ 下面行为会被警告, props是只读的!
props.foo = 'bar'- 实际开发过程中有两个场景会想要修改一个属性：
这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。 在这种情况下，最好定义一个本地的 data，并将这个 prop 用作其初始值：
js
const props = defineProps(['initialCounter'])
const counter = ref(props.initialCounter)const props = defineProps(['initialCounter'])
const counter = ref(props.initialCounter)这个 prop 以一种原始的值传入且需要进行转换。 在这种情况下，最好使用这个 prop 的值来定义一个计算属性：
js
const props = defineProps(['size'])
// prop变化，计算属性自动更新
const normalizedSize = computed(() => props.size.trim().toLowerCase())const props = defineProps(['size'])
// prop变化，计算属性自动更新
const normalizedSize = computed(() => props.size.trim().toLowerCase())- 实践中如果确实想要改变父组件属性应该
emit一个事件让父组件去做这个变更。注意虽然我们不能直接修改一个传入的对象或者数组类型的prop，但是我们还是能够直接改内嵌的对象或属性
什么是递归组件？举个例子说明下？
分析
递归组件我们用的比较少，但是在Tree、Menu这类组件中会被用到。
体验
组件通过组件名称引用它自己，这种情况就是递归组件
html
<template>
<li>
<div>{{ model.name }}</div>
<ul v-show="isOpen" v-if="isFolder">
<!-- 注意这里：组件递归渲染了它自己 -->
<TreeItem class="item" v-for="model in model.children" :model="model"></TreeItem>
</ul>
</li>
<script>
export default {
name: 'TreeItem',
// ...
}
</script>
</template><template>
<li>
<div>{{ model.name }}</div>
<ul v-show="isOpen" v-if="isFolder">
<!-- 注意这里：组件递归渲染了它自己 -->
<TreeItem class="item" v-for="model in model.children" :model="model"></TreeItem>
</ul>
</li>
<script>
export default {
name: 'TreeItem',
// ...
}
</script>
</template>回答范例
- 如果某个组件通过组件名称引用它自己，这种情况就是递归组件。
- 实际开发中类似
Tree、Menu这类组件，它们的节点往往包含子节点，子节点结构和父节点往往是相同的。这类组件的数据往往也是树形结构，这种都是使用递归组件的典型场景。 - 使用递归组件时，由于我们并未也不能在组件内部导入它自己，所以设置组件
name属性，用来查找组件定义，如果使用SFC，则可以通过SFC文件名推断。组件内部通常也要有递归结束条件，比如model.children这样的判断。 - 查看生成渲染函数可知，递归组件查找时会传递一个布尔值给
resolveComponent，这样实际获取的组件就是当前组件本身
原理
递归组件编译结果中，获取组件时会传递一个标识符 _resolveComponent("Comp", true)
js
const _component_Comp = _resolveComponent('Comp', true)const _component_Comp = _resolveComponent('Comp', true)就是在传递maybeSelfReference
js
export function resolveComponent(
name: string,
maybeSelfReference?: boolean,
): ConcreteComponent | string {
return resolveAsset(COMPONENTS, name, true, maybeSelfReference) || name
}export function resolveComponent(
name: string,
maybeSelfReference?: boolean,
): ConcreteComponent | string {
return resolveAsset(COMPONENTS, name, true, maybeSelfReference) || name
}resolveAsset中最终返回的是组件自身：
js
if (!res && maybeSelfReference) {
// fallback to implicit self-reference
return Component
}if (!res && maybeSelfReference) {
// fallback to implicit self-reference
return Component
}Vue 中组件和插件有什么区别
1. 组件是什么
组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式，在 Vue 中每一个.vue 文件都可以视为一个组件
组件的优势
- 降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求，例如输入框，可以替换为日历、时间、范围等组件作具体的实现
- 调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间低耦合，职责单一，所以逻辑会比分析整个系统要简单
- 提高可维护性，由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可获得系统的整体升级
2. 插件是什么
插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：
- 添加全局方法或者属性。如:
vue-custom-element - 添加全局资源：指令/过滤器/过渡等。如
vue-touch - 通过全局混入来添加一些组件选项。如
vue-router - 添加
Vue实例方法，通过把它们添加到Vue.prototype上实现。 - 一个库，提供自己的
API，同时提供上面提到的一个或多个功能。如vue-router
3. 两者的区别
两者的区别主要表现在以下几个方面：
- 编写形式
- 注册形式
- 使用场景
3.1 编写形式
编写组件
编写一个组件，可以有很多方式，我们最常见的就是 vue 单文件的这种格式，每一个.vue文件我们都可以看成是一个组件
vue 文件标准格式
html
<template></template>
<script>
export default{
...
}
</script>
<style></style><template></template>
<script>
export default{
...
}
</script>
<style></style>我们还可以通过template属性来编写一个组件，如果组件内容多，我们可以在外部定义template组件内容，如果组件内容并不多，我们可直接写在template属性上
html
<template id="testComponent">
// 组件显示的内容
<div>component!</div>
</template>
Vue.component('componentA',{ template: '#testComponent' template: `
<div>component</div>
` // 组件内容少可以通过这种形式 })<template id="testComponent">
// 组件显示的内容
<div>component!</div>
</template>
Vue.component('componentA',{ template: '#testComponent' template: `
<div>component</div>
` // 组件内容少可以通过这种形式 })编写插件
vue插件的实现应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象
js
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或 property
Vue.myGlobalMethod = function () {
// 逻辑...
}
// 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})
// 3. 注入组件选项
Vue.mixin({
created: function () {
// 逻辑...
}
...
})
// 4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑...
}
}MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或 property
Vue.myGlobalMethod = function () {
// 逻辑...
}
// 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})
// 3. 注入组件选项
Vue.mixin({
created: function () {
// 逻辑...
}
...
})
// 4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑...
}
}3.2 注册形式
组件注册
vue 组件注册主要分为全局注册与局部注册
全局注册通过Vue.component方法，第一个参数为组件的名称，第二个参数为传入的配置项
js
Vue.component('my-component-name', {
/* ... */
})Vue.component('my-component-name', {
/* ... */
})局部注册只需在用到的地方通过components属性注册一个组件
js
const component1 = {...} // 定义一个组件
export default {
components:{
component1 // 局部注册
}
}const component1 = {...} // 定义一个组件
export default {
components:{
component1 // 局部注册
}
}插件注册
插件的注册通过Vue.use()的方式进行注册（安装），第一个参数为插件的名字，第二个参数是可选择的配置项
js
Vue.use(插件名字, {
/* ... */
})Vue.use(插件名字, {
/* ... */
})注意的是：
注册插件的时候，需要在调用 new Vue() 启动应用之前完成
Vue.use会自动阻止多次注册相同插件，只会注册一次
4. 使用场景
- 组件 (Component) 是用来构成你的 App 的业务模块，它的目标是
App.vue - 插件 (Plugin) 是用来增强你的技术栈的功能模块，它的目标是 Vue 本身
简单来说，插件就是指对Vue的功能的增强或补充
为什么 Vue 采用异步渲染
Vue 是组件级更新，如果不采用异步更新，那么每次更新数据都会对当前组件进行重新渲染，所以为了性能， Vue 会在本轮数据更新后，在异步更新视图。核心思想
nextTick
源码相关
dep.notify（）通知watcher进行更新，subs[i].update依次调用watcher的update，queueWatcher将watcher去重放入队列，nextTick（flushSchedulerQueue）在下一tick中刷新watcher队列（异步）
js
update () { /* istanbul ignore else */
if (this.lazy) {
this.dirty = true
}
else if (this.sync) {
this.run()
}
else {
queueWatcher(this); // 当数据发生变化时会将watcher放到一个队列中批量更新
}
}
export function queueWatcher (watcher: Watcher) {
const id = watcher.id // 会对相同的watcher进行过滤
if (has[id] == null) {
has[id] = true
if (!flushing) {
queue.push(watcher)
} else {
let i = queue.length - 1
while (i > index && queue[i].id > watcher.id) {
i--
}
queue.splice(i + 1, 0, watcher)
}
// queue the flush
if (!waiting) {
waiting = true
if (process.env. NODE_ENV !== 'production' && !config.async) {
flushSchedulerQueue()
return
}
nextTick(flushSchedulerQueue) // 调用nextTick方法 批量的进行更新
}
}
}update () { /* istanbul ignore else */
if (this.lazy) {
this.dirty = true
}
else if (this.sync) {
this.run()
}
else {
queueWatcher(this); // 当数据发生变化时会将watcher放到一个队列中批量更新
}
}
export function queueWatcher (watcher: Watcher) {
const id = watcher.id // 会对相同的watcher进行过滤
if (has[id] == null) {
has[id] = true
if (!flushing) {
queue.push(watcher)
} else {
let i = queue.length - 1
while (i > index && queue[i].id > watcher.id) {
i--
}
queue.splice(i + 1, 0, watcher)
}
// queue the flush
if (!waiting) {
waiting = true
if (process.env. NODE_ENV !== 'production' && !config.async) {
flushSchedulerQueue()
return
}
nextTick(flushSchedulerQueue) // 调用nextTick方法 批量的进行更新
}
}
}v-if 和 v-show 区别
v-show隐藏则是为该元素添加css--display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除- 编译过程：
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换 - 编译条件：
v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染 v-show由false变为true的时候不会触发组件的生命周期v-if由false变为true的时候，触发组件的beforeCreate、create、beforeMount、mounted钩子，由true变为false的时候触发组件的beforeDestory、destoryed方法- 性能消耗：
v-if有更高的切换消耗；v-show有更高的初始渲染消耗
v-show 与 v-if 的使用场景
v-if与v-show都能控制dom元素在页面的显示v-if相比v-show开销更大的（直接操作dom节点增加与删除）- 如果需要非常频繁地切换，则使用
v-show较好 - 如果在运行时条件很少改变，则使用
v-if较好
v-show 与 v-if 原理分析
v-show原理
不管初始条件是什么，元素总是会被渲染
我们看一下在 vue 中是如何实现的
代码很好理解，有transition就执行transition，没有就直接设置display属性
js
// https://github.com/vuejs/vue-next/blob/3cd30c5245da0733f9eb6f29d220f39c46518162/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/3cd30c5245da0733f9eb6f29d220f39c46518162/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)
},
}v-if原理
v-if在实现上比v-show要复杂的多，因为还有else else-if 等条件需要处理，这里我们也只摘抄源码中处理 v-if 的一小部分
返回一个node节点，render函数通过表达式的值来决定是否生成DOM
js
// https://github.com/vuejs/vue-next/blob/cdc9f336fd/packages/compiler-core/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
)
}
}
})
}
)// https://github.com/vuejs/vue-next/blob/cdc9f336fd/packages/compiler-core/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
)
}
}
})
}
)v-if 和 v-for 哪个优先级更高
- 实践中不应该把
v-for和v-if放一起 - 在
vue2中，v-for的优先级是高于v-if，把它们放在一起，输出的渲染函数中可以看出会先执行循环再判断条件，哪怕我们只渲染列表中一小部分元素，也得在每次重渲染的时候遍历整个列表，这会比较浪费；另外需要注意的是在vue3中则完全相反，v-if的优先级高于v-for，所以v-if执行时，它调用的变量还不存在，就会导致异常 - 通常有两种情况下导致我们这样做：
- 为了过滤列表中的项目 (比如
v-for="user in users" v-if="user.isActive")。此时定义一个计算属性 (比如activeUsers)，让其返回过滤后的列表即可（比如users.filter(u=>u.isActive)） - 为了避免渲染本应该被隐藏的列表 (比如
v-for="user in users" v-if="shouldShowUsers")。此时把v-if移动至容器元素上 (比如ul、ol)或者外面包一层template即可
- 为了过滤列表中的项目 (比如
- 文档中明确指出永远不要把
v-if和v-for同时用在同一个元素上，显然这是一个重要的注意事项 - 源码里面关于代码生成的部分，能够清晰的看到是先处理
v-if还是v-for，顺序上vue2和vue3正好相反，因此产生了一些症状的不同，但是不管怎样都是不能把它们写在一起的
vue2.x 源码分析
在 vue 模板编译的时候，会将指令系统转化成可执行的
render函数
编写一个p标签，同时使用v-if与 v-for
html
<div id="app">
<p v-if="isShow" v-for="item in items">{{ item.title }}</p>
</div><div id="app">
<p v-if="isShow" v-for="item in items">{{ item.title }}</p>
</div>创建vue实例，存放isShow与items数据
js
const app = new Vue({
el: '#app',
data() {
return {
items: [{ title: 'foo' }, { title: 'baz' }],
}
},
computed: {
isShow() {
return this.items && this.items.length > 0
},
},
})const app = new Vue({
el: '#app',
data() {
return {
items: [{ title: 'foo' }, { title: 'baz' }],
}
},
computed: {
isShow() {
return this.items && this.items.length > 0
},
},
})模板指令的代码都会生成在render函数中，通过app.$options.render就能得到渲染函数
js
ƒ 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) }
}ƒ 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) }
}_l是vue的列表渲染函数，函数内部都会进行一次if判断- 初步得到结论：
v-for优先级是比v-if 高 - 再将
v-for与v-if置于不同标签
html
<div id="app">
<template v-if="isShow">
<p v-for="item in items">{{item.title}}</p>
</template>
</div><div id="app">
<template v-if="isShow">
<p v-for="item in items">{{item.title}}</p>
</template>
</div>再输出下render函数
js
ƒ anonymous() {
with(this){return
_c('div',{attrs:{"id":"app"}},
[(isShow)?[_v("\n"),
_l((items),function(item){return _c('p',[_v(_s(item.title))])})]:_e()],2)}
}ƒ anonymous() {
with(this){return
_c('div',{attrs:{"id":"app"}},
[(isShow)?[_v("\n"),
_l((items),function(item){return _c('p',[_v(_s(item.title))])})]:_e()],2)}
}这时候我们可以看到，v-for与v-if作用在不同标签时候，是先进行判断，再进行列表的渲染
我们再在查看下 vue 源码
源码位置：\vue-dev\src\compiler\codegen\index.js
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) || 'void 0'
} else if (el.tag === 'slot') {
return genSlot(el, state)
} else {
// component or element
...
}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) || 'void 0'
} else if (el.tag === 'slot') {
return genSlot(el, state)
} else {
// component or element
...
}在进行if判断的时候，v-for是比v-if先进行判断
最终结论：v-for优先级比v-if高
Vue 的事件绑定原理
原生事件绑定是通过
addEventListener绑定给真实元素的，组件事件绑定是通过Vue自定义的$on实现的。如果要在组件上使用原生事件，需要加.native修饰符，这样就相当于在父组件中把子组件当做普通html标签，然后加上原生事件。
$on、$emit 是基于发布订阅模式的，维护一个事件中心，on 的时候将事件按名称存在事件中心里，称之为订阅者，然后 emit 将对应的事件进行发布，去执行事件中心里的对应的监听器
EventEmitter(发布订阅模式--简单版)
js
// 手写发布订阅模式 EventEmitter
class EventEmitter {
constructor() {
this.events = {}
}
// 实现订阅
on(type, callBack) {
if (!this.events) this.events = Object.create(null)
if (!this.events[type]) {
this.events[type] = [callBack]
} else {
this.events[type].push(callBack)
}
}
// 删除订阅
off(type, callBack) {
if (!this.events[type]) return
this.events[type] = this.events[type].filter((item) => {
return item !== callBack
})
}
// 只执行一次订阅事件
once(type, callBack) {
function fn() {
callBack()
this.off(type, fn)
}
this.on(type, fn)
}
// 触发事件
emit(type, ...rest) {
this.events[type] && this.events[type].forEach((fn) => fn.apply(this, rest))
}
}
// 使用如下
const event = new EventEmitter()
const handle = (...rest) => {
console.log(rest)
}
event.on('click', handle)
event.emit('click', 1, 2, 3, 4)
event.off('click', handle)
event.emit('click', 1, 2)
event.once('dbClick', () => {
console.log(123456)
})
event.emit('dbClick')
event.emit('dbClick')// 手写发布订阅模式 EventEmitter
class EventEmitter {
constructor() {
this.events = {}
}
// 实现订阅
on(type, callBack) {
if (!this.events) this.events = Object.create(null)
if (!this.events[type]) {
this.events[type] = [callBack]
} else {
this.events[type].push(callBack)
}
}
// 删除订阅
off(type, callBack) {
if (!this.events[type]) return
this.events[type] = this.events[type].filter((item) => {
return item !== callBack
})
}
// 只执行一次订阅事件
once(type, callBack) {
function fn() {
callBack()
this.off(type, fn)
}
this.on(type, fn)
}
// 触发事件
emit(type, ...rest) {
this.events[type] && this.events[type].forEach((fn) => fn.apply(this, rest))
}
}
// 使用如下
const event = new EventEmitter()
const handle = (...rest) => {
console.log(rest)
}
event.on('click', handle)
event.emit('click', 1, 2, 3, 4)
event.off('click', handle)
event.emit('click', 1, 2)
event.once('dbClick', () => {
console.log(123456)
})
event.emit('dbClick')
event.emit('dbClick')源码分析
- 原生 dom 的绑定
Vue在创建真是dom时会调用createElm,默认会调用invokeCreateHooks- 会遍历当前平台下相对的属性处理代码,其中就有
updateDOMListeners方法,内部会传入add方法
js
function updateDOMListeners (oldVnode: VNodeWithData, vnode: VNodeWithData) {
if (isUndef(oldVnode.data.on) && isUndef(vnode.data.on)) {
return
}
const on = vnode.data.on || {}
const oldOn = oldVnode.data.on || {}
target = vnode.elm normalizeEvents(on)
updateListeners(on, oldOn, add, remove, createOnceHandler, vnode.context)
target = undefined
}
function add ( name: string, handler: Function, capture: boolean, passive: boolean ) {
target.addEventListener( // 给当前的dom添加事件
name,
handler,
supportsPassive ? { capture, passive } : capture
)
}function updateDOMListeners (oldVnode: VNodeWithData, vnode: VNodeWithData) {
if (isUndef(oldVnode.data.on) && isUndef(vnode.data.on)) {
return
}
const on = vnode.data.on || {}
const oldOn = oldVnode.data.on || {}
target = vnode.elm normalizeEvents(on)
updateListeners(on, oldOn, add, remove, createOnceHandler, vnode.context)
target = undefined
}
function add ( name: string, handler: Function, capture: boolean, passive: boolean ) {
target.addEventListener( // 给当前的dom添加事件
name,
handler,
supportsPassive ? { capture, passive } : capture
)
}
vue中绑定事件是直接绑定给真实dom元素的
- 组件中绑定事件
js
export function updateComponentListeners ( vm: Component, listeners: Object, oldListeners: ?Object ) {
target = vm updateListeners(listeners, oldListeners || {}, add, remove, createOnceHandler, vm)
target = undefined
}
function add (event, fn) {
target.$on(event, fn)
}export function updateComponentListeners ( vm: Component, listeners: Object, oldListeners: ?Object ) {
target = vm updateListeners(listeners, oldListeners || {}, add, remove, createOnceHandler, vm)
target = undefined
}
function add (event, fn) {
target.$on(event, fn)
}组件绑定事件是通过
vue中自定义的$on方法来实现的
Vue 是如何实现数据双向绑定的
Vue 数据双向绑定主要是指：数据变化更新视图，视图变化更新数据，如下图所示：
- 输入框内容变化时，
Data中的数据同步变化。即View => Data的变化。 Data中的数据变化时，文本节点的内容同步变化。即Data => View的变化
Vue 主要通过以下 4 个步骤来实现数据双向绑定的
- 实现一个监听器 Observer：对数据对象进行遍历，包括子属性对象的属性，利用
Object.defineProperty()对属性都加上setter和getter。这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化 - 实现一个解析器 Compile：解析
Vue模板指令，将模板中的变量都替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，调用更新函数进行数据更新 - 实现一个订阅者 Watcher：
Watcher订阅者是Observer和Compile之间通信的桥梁 ，主要的任务是订阅Observer中的属性值变化的消息，当收到属性值变化的消息时，触发解析器Compile中对应的更新函数 - 实现一个订阅器 Dep：订阅器采用 发布-订阅 设计模式，用来收集订阅者
Watcher，对监听器Observer和 订阅者Watcher进行统一管理
Vue 数据双向绑定原理图
双向绑定的原理是什么
我们都知道 Vue 是数据双向绑定的框架，双向绑定由三个重要部分构成
- 数据层（Model）：应用的数据及业务逻辑
- 视图层（View）：应用的展示效果，各类 UI 组件
- 业务逻辑层（ViewModel）：框架封装的核心，它负责将数据与视图关联起来
而上面的这个分层的架构方案，可以用一个专业术语进行称呼：MVVM这里的控制层的核心功能便是 “数据双向绑定” 。自然，我们只需弄懂它是什么，便可以进一步了解数据绑定的原理
理解 ViewModel
它的主要职责就是：
- 数据变化后更新视图
- 视图变化后更新数据
当然，它还有两个主要部分组成
- 监听器（
Observer）：对所有数据的属性进行监听 - 解析器（
Compiler）：对每个元素节点的指令进行扫描跟解析,根据指令模板替换数据,以及绑定相应的更新函数
实现双向绑定
我们还是以Vue为例，先来看看Vue中的双向绑定流程是什么的
new Vue()首先执行初始化，对data执行响应化处理，这个过程发生Observe中- 同时对模板执行编译，找到其中动态绑定的数据，从
data中获取并初始化视图，这个过程发生在Compile中 - 同时定义⼀个更新函数和
Watcher，将来对应数据变化时Watcher会调用更新函数 - 由于
data的某个key在⼀个视图中可能出现多次，所以每个key都需要⼀个管家Dep来管理多个Watcher - 将来 data 中数据⼀旦发生变化，会首先找到对应的
Dep，通知所有Watcher执行更新函数
流程图如下：
先来一个构造函数：执行初始化，对data执行响应化处理
js
class Vue {
constructor(options) {
this.$options = options
this.$data = options.data
// 对data选项做响应式处理
observe(this.$data)
// 代理data到vm上
proxy(this)
// 执行编译
new Compile(options.el, this)
}
}class Vue {
constructor(options) {
this.$options = options
this.$data = options.data
// 对data选项做响应式处理
observe(this.$data)
// 代理data到vm上
proxy(this)
// 执行编译
new Compile(options.el, this)
}
}对data选项执行响应化具体操作
js
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])
})
}
}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])
})
}
}编译Compile
对每个元素节点的指令进行扫描跟解析,根据指令模板替换数据,以及绑定相应的更新函数
js
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 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)
}
}依赖收集
视图中会用到data中某key，这称为依赖。同⼀个key可能出现多次，每次都需要收集出来用⼀个Watcher来维护它们，此过程称为依赖收集多个Watcher需要⼀个Dep来管理，需要更新时由Dep统⼀通知
实现思路
defineReactive时为每⼀个key创建⼀个Dep实例- 初始化视图时读取某个
key，例如name1，创建⼀个watcher1 - 由于触发
name1的getter方法，便将watcher1添加到name1对应的Dep中 - 当
name1更新，setter触发时，便可通过对应Dep通知其管理所有Watcher更新
js
// 负责更新视图
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 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])
}
}声明Dep
js
class Dep {
constructor() {
this.deps = [] // 依赖管理
}
addDep(dep) {
this.deps.push(dep)
}
notify() {
this.deps.forEach((dep) => dep.update())
}
}class Dep {
constructor() {
this.deps = [] // 依赖管理
}
addDep(dep) {
this.deps.push(dep)
}
notify() {
this.deps.forEach((dep) => dep.update())
}
}创建watcher时触发getter
js
class Watcher {
constructor(vm, key, updateFn) {
Dep.target = this
this.vm[this.key]
Dep.target = null
}
}class Watcher {
constructor(vm, key, updateFn) {
Dep.target = this
this.vm[this.key]
Dep.target = null
}
}依赖收集，创建Dep实例
js
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执行更新方法
},
})
}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执行更新方法
},
})
}v-model 双向绑定原理
v-model 实现原理
我们在
vue项目中主要使用v-model指令在表单input、textarea、select等元素上创建双向数据绑定，我们知道v-model本质上不过是语法糖（可以看成是value + input方法的语法糖），v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件：
text和textarea元素使用value属性和input事件checkbox和radio使用checked属性和change事件select字段将value作为prop并将change作为事件
所以我们可以 v-model 进行如下改写：
html
<input v-model="sth" />
<!-- 等同于 -->
<input :value="sth" @input="sth = $event.target.value" /><input v-model="sth" />
<!-- 等同于 -->
<input :value="sth" @input="sth = $event.target.value" />当在
input元素中使用v-model实现双数据绑定，其实就是在输入的时候触发元素的input事件，通过这个语法糖，实现了数据的双向绑定
- 这个语法糖必须是固定的，也就是说属性必须为
value，方法名必须为：input。 - 知道了
v-model的原理，我们可以在自定义组件上实现v-model
js
//Parent
<template>
{{num}}
<Child v-model="num">
</template>
export default {
data(){
return {
num: 0
}
}
}
//Child
<template>
<div @click="add">Add</div>
</template>
export default {
props: ['value'], // 属性必须为value
methods:{
add(){
// 方法名为input
this.$emit('input', this.value + 1)
}
}
}//Parent
<template>
{{num}}
<Child v-model="num">
</template>
export default {
data(){
return {
num: 0
}
}
}
//Child
<template>
<div @click="add">Add</div>
</template>
export default {
props: ['value'], // 属性必须为value
methods:{
add(){
// 方法名为input
this.$emit('input', this.value + 1)
}
}
}原理
会将组件的 v-model 默认转化成value+input
js
const VueTemplateCompiler = require('vue-template-compiler')
const ele = VueTemplateCompiler.compile('<el-checkbox v-model="check"></el- checkbox>')
// 观察输出的渲染函数：
// with(this) {
// return _c('el-checkbox', {
// model: {
// value: (check),
// callback: function ($$v) { check = $$v },
// expression: "check"
// }
// })
// }
// 源码位置 core/vdom/create-component.js line:155
function transformModel(options, data: any) {
const prop = (options.model && options.model.prop) || 'value'
const event = (options.model && options.model.event) || 'input'
;(data.attrs || (data.attrs = {}))[prop] = data.model.value
const on = data.on || (data.on = {})
const existing = on[event]
const callback = data.model.callback
if (isDef(existing)) {
if (Array.isArray(existing) ? existing.indexOf(callback) === -1 : existing !== callback) {
on[event] = [callback].concat(existing)
}
} else {
on[event] = callback
}
}const VueTemplateCompiler = require('vue-template-compiler')
const ele = VueTemplateCompiler.compile('<el-checkbox v-model="check"></el- checkbox>')
// 观察输出的渲染函数：
// with(this) {
// return _c('el-checkbox', {
// model: {
// value: (check),
// callback: function ($$v) { check = $$v },
// expression: "check"
// }
// })
// }
// 源码位置 core/vdom/create-component.js line:155
function transformModel(options, data: any) {
const prop = (options.model && options.model.prop) || 'value'
const event = (options.model && options.model.event) || 'input'
;(data.attrs || (data.attrs = {}))[prop] = data.model.value
const on = data.on || (data.on = {})
const existing = on[event]
const callback = data.model.callback
if (isDef(existing)) {
if (Array.isArray(existing) ? existing.indexOf(callback) === -1 : existing !== callback) {
on[event] = [callback].concat(existing)
}
} else {
on[event] = callback
}
}原生的 v-model，会根据标签的不同生成不同的事件和属性
js
const VueTemplateCompiler = require('vue-template-compiler')
const ele = VueTemplateCompiler.compile('<input v-model="value"/>')
// with(this) {
// return _c('input', {
// directives: [{ name: "model", rawName: "v-model", value: (value), expression: "value" }],
// domProps: { "value": (value) },
// on: {"input": function ($event) {
// if ($event.target.composing) return;
// value = $event.target.value
// }
// }
// })
// }const VueTemplateCompiler = require('vue-template-compiler')
const ele = VueTemplateCompiler.compile('<input v-model="value"/>')
// with(this) {
// return _c('input', {
// directives: [{ name: "model", rawName: "v-model", value: (value), expression: "value" }],
// domProps: { "value": (value) },
// on: {"input": function ($event) {
// if ($event.target.composing) return;
// value = $event.target.value
// }
// }
// })
// }编译时：不同的标签解析出的内容不一样
platforms/web/compiler/directives/model.js
js
if (el.component) {
genComponentModel(el, value, modifiers) // component v-model doesn't need extra runtime
return false
} else if (tag === 'select') {
genSelect(el, value, modifiers)
} else if (tag === 'input' && type === 'checkbox') {
genCheckboxModel(el, value, modifiers)
} else if (tag === 'input' && type === 'radio') {
genRadioModel(el, value, modifiers)
} else if (tag === 'input' || tag === 'textarea') {
genDefaultModel(el, value, modifiers)
} else if (!config.isReservedTag(tag)) {
genComponentModel(el, value, modifiers) // component v-model doesn't need extra runtime
return false
}if (el.component) {
genComponentModel(el, value, modifiers) // component v-model doesn't need extra runtime
return false
} else if (tag === 'select') {
genSelect(el, value, modifiers)
} else if (tag === 'input' && type === 'checkbox') {
genCheckboxModel(el, value, modifiers)
} else if (tag === 'input' && type === 'radio') {
genRadioModel(el, value, modifiers)
} else if (tag === 'input' || tag === 'textarea') {
genDefaultModel(el, value, modifiers)
} else if (!config.isReservedTag(tag)) {
genComponentModel(el, value, modifiers) // component v-model doesn't need extra runtime
return false
}运行时：会对元素处理一些关于输入法的问题
platforms/web/runtime/directives/model.js
js
inserted (el, binding, vnode, oldVnode) {
if (vnode.tag === 'select') { // #6903
if (oldVnode.elm && !oldVnode.elm._vOptions) {
mergeVNodeHook(vnode, 'postpatch', () => {
directive.componentUpdated(el, binding, vnode)
})
} else {
setSelected(el, binding, vnode.context)
}
el._vOptions = [].map.call(el.options, getValue)
} else if (vnode.tag === 'textarea' || isTextInputType(el.type)) {
el._vModifiers = binding.modifiers
if (!binding.modifiers.lazy) {
el.addEventListener('compositionstart', onCompositionStart)
el.addEventListener('compositionend', onCompositionEnd)
// Safari < 10.2 & UIWebView doesn't fire compositionend when
// switching focus before confirming composition choice
// this also fixes the issue where some browsers e.g. iOS Chrome
// fires "change" instead of "input" on autocomplete.
el.addEventListener('change', onCompositionEnd) /* istanbul ignore if */
if (isIE9) {
el.vmodel = true
}
}
}
}inserted (el, binding, vnode, oldVnode) {
if (vnode.tag === 'select') { // #6903
if (oldVnode.elm && !oldVnode.elm._vOptions) {
mergeVNodeHook(vnode, 'postpatch', () => {
directive.componentUpdated(el, binding, vnode)
})
} else {
setSelected(el, binding, vnode.context)
}
el._vOptions = [].map.call(el.options, getValue)
} else if (vnode.tag === 'textarea' || isTextInputType(el.type)) {
el._vModifiers = binding.modifiers
if (!binding.modifiers.lazy) {
el.addEventListener('compositionstart', onCompositionStart)
el.addEventListener('compositionend', onCompositionEnd)
// Safari < 10.2 & UIWebView doesn't fire compositionend when
// switching focus before confirming composition choice
// this also fixes the issue where some browsers e.g. iOS Chrome
// fires "change" instead of "input" on autocomplete.
el.addEventListener('change', onCompositionEnd) /* istanbul ignore if */
if (isIE9) {
el.vmodel = true
}
}
}
}Vue 中修饰符.sync 与 v-model 的区别
sync的作用
.sync修饰符可以实现父子组件之间的双向绑定，并且可以实现子组件同步修改父组件的值，相比较与v-model来说,sync修饰符就简单很多了- 一个组件上可以有多个
.sync修饰符
html
<!-- 正常父传子 -->
<Son :a="num" :b="num2" />
<!-- 加上sync之后的父传子 -->
<Son :a.sync="num" :b.sync="num2" />
<!-- 它等价于 -->
<Son :a="num" :b="num2" @update:a="val=>num=val" @update:b="val=>num2=val" />
<!-- 相当于多了一个事件监听，事件名是update:a, -->
<!-- 回调函数中，会把接收到的值赋值给属性绑定的数据项中。 --><!-- 正常父传子 -->
<Son :a="num" :b="num2" />
<!-- 加上sync之后的父传子 -->
<Son :a.sync="num" :b.sync="num2" />
<!-- 它等价于 -->
<Son :a="num" :b="num2" @update:a="val=>num=val" @update:b="val=>num2=val" />
<!-- 相当于多了一个事件监听，事件名是update:a, -->
<!-- 回调函数中，会把接收到的值赋值给属性绑定的数据项中。 -->
v-model的工作原理
html
<com1 v-model="num"></com1>
<!-- 等价于 -->
<com1 :value="num" @input="(val)=>num=val"></com1><com1 v-model="num"></com1>
<!-- 等价于 -->
<com1 :value="num" @input="(val)=>num=val"></com1>- 相同点
- 都是语法糖，都可以实现父子组件中的数据的双向通信
- 区别点
- 格式不同：
v-model="num",:num.sync="num" v-model:@input + value:num.sync:@update:numv-model只能用一次；.sync可以有多个
- 格式不同：
什么是作用域插槽
插槽
- 创建组件虚拟节点时，会将组件儿子的虚拟节点保存起来。当初始化组件时，通过插槽属性将儿子进行分类
{a:[vnode],b[vnode]} - 渲染组件时会拿对应的
slot属性的节点进行替换操作。（插槽的作用域为父组件）
html
<app>
<div slot="a">xxxx</div>
<div slot="b">xxxx</div>
</app>
slot name="a" slot name="b"<app>
<div slot="a">xxxx</div>
<div slot="b">xxxx</div>
</app>
slot name="a" slot name="b"作用域插槽
- 作用域插槽在解析的时候不会作为组件的孩子节点。会解析成函数，当子组件渲染时，会调用此函数进行渲染。（插槽的作用域为子组件）
- 普通插槽渲染的作用域是父组件，作用域插槽的渲染作用域是当前子组件。
js
// 插槽
const VueTemplateCompiler = require('vue-template-compiler');
let ele = VueTemplateCompiler.compile(`
<my-component>
<div slot="header">node</div>
<div>react</div>
<div slot="footer">vue</div>
</my-component> `
)
// with(this) {
// return _c('my-component', [_c('div', {
// attrs: { "slot": "header" },
// slot: "header"
// }, [_v("node")] // _文本及诶点 )
// , _v(" "),
// _c('div', [_v("react")]), _v(" "), _c('div', {
// attrs: { "slot": "footer" },
// slot: "footer" }, [_v("vue")])])
// }
const VueTemplateCompiler = require('vue-template-compiler');
let ele = VueTemplateCompiler.compile(`
<div>
<slot name="header"></slot>
<slot name="footer"></slot>
<slot></slot>
</div> `
);
with(this) {
return _c('div', [_v("node"), _v(" "), _t(_v("vue")])]), _v(" "), _t("default")], 2)
}
// _t定义在 core/instance/render-helpers/index.js
// 作用域插槽:
let ele = VueTemplateCompiler.compile(` <app>
<div slot-scope="msg" slot="footer">{{msg.a}}</div>
</app> `
);
// with(this) {
// return _c('app', { scopedSlots: _u([{
// // 作用域插槽的内容会被渲染成一个函数
// key: "footer",
// fn: function (msg) {
// return _c('div', {}, [_v(_s(msg.a))]) } }])
// })
// }
// }
const VueTemplateCompiler = require('vue-template-compiler');
VueTemplateCompiler.compile(` <div><slot name="footer" a="1" b="2"></slot> </div> `);
// with(this) { return _c('div', [_t("footer", null, { "a": "1", "b": "2" })], 2) }// 插槽
const VueTemplateCompiler = require('vue-template-compiler');
let ele = VueTemplateCompiler.compile(`
<my-component>
<div slot="header">node</div>
<div>react</div>
<div slot="footer">vue</div>
</my-component> `
)
// with(this) {
// return _c('my-component', [_c('div', {
// attrs: { "slot": "header" },
// slot: "header"
// }, [_v("node")] // _文本及诶点 )
// , _v(" "),
// _c('div', [_v("react")]), _v(" "), _c('div', {
// attrs: { "slot": "footer" },
// slot: "footer" }, [_v("vue")])])
// }
const VueTemplateCompiler = require('vue-template-compiler');
let ele = VueTemplateCompiler.compile(`
<div>
<slot name="header"></slot>
<slot name="footer"></slot>
<slot></slot>
</div> `
);
with(this) {
return _c('div', [_v("node"), _v(" "), _t(_v("vue")])]), _v(" "), _t("default")], 2)
}
// _t定义在 core/instance/render-helpers/index.js
// 作用域插槽:
let ele = VueTemplateCompiler.compile(` <app>
<div slot-scope="msg" slot="footer">{{msg.a}}</div>
</app> `
);
// with(this) {
// return _c('app', { scopedSlots: _u([{
// // 作用域插槽的内容会被渲染成一个函数
// key: "footer",
// fn: function (msg) {
// return _c('div', {}, [_v(_s(msg.a))]) } }])
// })
// }
// }
const VueTemplateCompiler = require('vue-template-compiler');
VueTemplateCompiler.compile(` <div><slot name="footer" a="1" b="2"></slot> </div> `);
// with(this) { return _c('div', [_t("footer", null, { "a": "1", "b": "2" })], 2) }keep-alive 原理
keep-alive 使用场景和原理
keep-alive是Vue内置的一个组件，可以实现组件缓存，当组件切换时不会对当前组件进行卸载。一般结合路由和动态组件一起使用，用于缓存组件- 提供
include和exclude属性，允许组件有条件的进行缓存。两者都支持字符串或正则表达式，include表示只有名称匹配的组件会被缓存，exclude表示任何名称匹配的组件都不会被缓存 ，其中exclude的优先级比include高 - 对应两个钩子函数
activated和deactivated，当组件被激活时，触发钩子函数activated，当组件被移除时，触发钩子函数deactivated keep-alive的中还运用了LRU(最近最少使用) 算法，选择最近最久未使用的组件予以淘汰
<keep-alive></keep-alive>包裹动态组件时，会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染- 比如有一个列表和一个详情，那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面，那么就可以对列表组件使用
<keep-alive></keep-alive>进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染
关于 keep-alive 的基本用法
html
<keep-alive>
<component :is="view"></component>
</keep-alive><keep-alive>
<component :is="view"></component>
</keep-alive>使用includes和exclude：
html
<keep-alive include="a,b">
<component :is="view"></component>
</keep-alive>
<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
<component :is="view"></component>
</keep-alive><keep-alive include="a,b">
<component :is="view"></component>
</keep-alive>
<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
<component :is="view"></component>
</keep-alive>匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)，匿名组件不能被匹配
设置了 keep-alive 缓存的组件，会多出两个生命周期钩子（activated与deactivated）：
- 首次进入组件时：
beforeRouteEnter>beforeCreate>created>mounted>activated> ... ... >beforeRouteLeave>deactivated - 再次进入组件时：
beforeRouteEnter>activated> ... ... >beforeRouteLeave>deactivated
使用场景
使用原则：当我们在某些场景下不需要让页面重新加载时我们可以使用keepalive
举个栗子:
当我们从首页–>列表页–>商详页–>再返回，这时候列表页应该是需要keep-alive
从首页–>列表页–>商详页–>返回到列表页(需要缓存)–>返回到首页(需要缓存)–>再次进入列表页(不需要缓存)，这时候可以按需来控制页面的keep-alive
在路由中设置keepAlive属性判断是否需要缓存
js
{
path: 'list',
name: 'itemList', // 列表页
component (resolve) {
require(['@/pages/item/list'], resolve)
},
meta: {
keepAlive: true,
title: '列表页'
}
}{
path: 'list',
name: 'itemList', // 列表页
component (resolve) {
require(['@/pages/item/list'], resolve)
},
meta: {
keepAlive: true,
title: '列表页'
}
}使用<keep-alive>
html
<div id="app" class="wrapper">
<keep-alive>
<!-- 需要缓存的视图组件 -->
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<!-- 不需要缓存的视图组件 -->
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div><div id="app" class="wrapper">
<keep-alive>
<!-- 需要缓存的视图组件 -->
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<!-- 不需要缓存的视图组件 -->
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>思考题：缓存后如何获取数据
解决方案可以有以下两种：
beforeRouteEnter：每次组件渲染的时候，都会执行beforeRouteEnter
js
beforeRouteEnter(to, from, next){
next(vm=>{
console.log(vm)
// 每次进入路由执行
vm.getData() // 获取数据
})
},beforeRouteEnter(to, from, next){
next(vm=>{
console.log(vm)
// 每次进入路由执行
vm.getData() // 获取数据
})
},actived：在keep-alive缓存的组件被激活的时候，都会执行actived钩子
js
// 注意：服务器端渲染期间avtived不被调用
activated(){
this.getData() // 获取数据
},// 注意：服务器端渲染期间avtived不被调用
activated(){
this.getData() // 获取数据
},扩展补充：LRU 算法是什么？
LRU的核心思想是如果数据最近被访问过，那么将来被访问的几率也更高，所以我们将命中缓存的组件key重新插入到this.keys的尾部，这样一来，this.keys中越往头部的数据即将来被访问几率越低，所以当缓存数量达到最大值时，我们就删除将来被访问几率最低的数据，即this.keys中第一个缓存的组件
相关代码
keep-alive是vue中内置的一个组件
源码位置：src/core/components/keep-alive.js
js
export default {
name: 'keep-alive',
abstract: true, //抽象组件
props: {
include: patternTypes, //要缓存的组件
exclude: patternTypes, //要排除的组件
max: [String, Number], //最大缓存数
},
created() {
this.cache = Object.create(null) //缓存对象 {a:vNode,b:vNode}
this.keys = [] //缓存组件的key集合 [a,b]
},
destroyed() {
for (const key in this.cache) {
pruneCacheEntry(this.cache, key, this.keys)
}
},
mounted() {
//动态监听include exclude
this.$watch('include', (val) => {
pruneCache(this, (name) => matches(val, name))
})
this.$watch('exclude', (val) => {
pruneCache(this, (name) => !matches(val, name))
})
},
render() {
const slot = this.$slots.default //获取包裹的插槽默认值 获取默认插槽中的第一个组件节点
const vnode: VNode = getFirstComponentChild(slot) //获取第一个子组件
// 获取该组件节点的componentOptions
const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
if (componentOptions) {
// 获取该组件节点的名称，优先获取组件的name字段，如果name不存在则获取组件的tag
const name: ?string = getComponentName(componentOptions)
const { include, exclude } = this
// 不走缓存 如果name不在inlcude中或者存在于exlude中则表示不缓存，直接返回vnode
if (
// not included 不包含
(include && (!name || !matches(include, name))) ||
// excluded 排除里面
(exclude && name && matches(exclude, name))
) {
//返回虚拟节点
return vnode
}
const { cache, keys } = this
// 获取组件的key值
const key: ?string =
vnode.key == null
? // same constructor may get registered as different local components
// so cid alone is not enough (#3269)
componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
: vnode.key
// 拿到key值后去this.cache对象中去寻找是否有该值，如果有则表示该组件有缓存，即命中缓存
if (cache[key]) {
//通过key 找到缓存 获取实例
vnode.componentInstance = cache[key].componentInstance
// make current key freshest
remove(keys, key) //通过LRU算法把数组里面的key删掉
keys.push(key) //把它放在数组末尾
} else {
cache[key] = vnode //没找到就换存下来
keys.push(key) //把它放在数组末尾
// prune oldest entry //如果超过最大值就把数组第0项删掉
if (this.max && keys.length > parseInt(this.max)) {
pruneCacheEntry(cache, keys[0], keys, this._vnode)
}
}
vnode.data.keepAlive = true //标记虚拟节点已经被缓存
}
// 返回虚拟节点
return vnode || (slot && slot[0])
},
}export default {
name: 'keep-alive',
abstract: true, //抽象组件
props: {
include: patternTypes, //要缓存的组件
exclude: patternTypes, //要排除的组件
max: [String, Number], //最大缓存数
},
created() {
this.cache = Object.create(null) //缓存对象 {a:vNode,b:vNode}
this.keys = [] //缓存组件的key集合 [a,b]
},
destroyed() {
for (const key in this.cache) {
pruneCacheEntry(this.cache, key, this.keys)
}
},
mounted() {
//动态监听include exclude
this.$watch('include', (val) => {
pruneCache(this, (name) => matches(val, name))
})
this.$watch('exclude', (val) => {
pruneCache(this, (name) => !matches(val, name))
})
},
render() {
const slot = this.$slots.default //获取包裹的插槽默认值 获取默认插槽中的第一个组件节点
const vnode: VNode = getFirstComponentChild(slot) //获取第一个子组件
// 获取该组件节点的componentOptions
const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
if (componentOptions) {
// 获取该组件节点的名称，优先获取组件的name字段，如果name不存在则获取组件的tag
const name: ?string = getComponentName(componentOptions)
const { include, exclude } = this
// 不走缓存 如果name不在inlcude中或者存在于exlude中则表示不缓存，直接返回vnode
if (
// not included 不包含
(include && (!name || !matches(include, name))) ||
// excluded 排除里面
(exclude && name && matches(exclude, name))
) {
//返回虚拟节点
return vnode
}
const { cache, keys } = this
// 获取组件的key值
const key: ?string =
vnode.key == null
? // same constructor may get registered as different local components
// so cid alone is not enough (#3269)
componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
: vnode.key
// 拿到key值后去this.cache对象中去寻找是否有该值，如果有则表示该组件有缓存，即命中缓存
if (cache[key]) {
//通过key 找到缓存 获取实例
vnode.componentInstance = cache[key].componentInstance
// make current key freshest
remove(keys, key) //通过LRU算法把数组里面的key删掉
keys.push(key) //把它放在数组末尾
} else {
cache[key] = vnode //没找到就换存下来
keys.push(key) //把它放在数组末尾
// prune oldest entry //如果超过最大值就把数组第0项删掉
if (this.max && keys.length > parseInt(this.max)) {
pruneCacheEntry(cache, keys[0], keys, this._vnode)
}
}
vnode.data.keepAlive = true //标记虚拟节点已经被缓存
}
// 返回虚拟节点
return vnode || (slot && slot[0])
},
}可以看到该组件没有template，而是用了render，在组件渲染的时候会自动执行render函数
this.cache是一个对象，用来存储需要缓存的组件，它将以如下形式存储：
js
this.cache = {
key1: '组件1',
key2: '组件2',
// ...
}this.cache = {
key1: '组件1',
key2: '组件2',
// ...
}在组件销毁的时候执行pruneCacheEntry函数
js
function pruneCacheEntry(cache: VNodeCache, key: string, keys: Array<string>, current?: VNode) {
const cached = cache[key]
/* 判断当前没有处于被渲染状态的组件，将其销毁*/
if (cached && (!current || cached.tag !== current.tag)) {
cached.componentInstance.$destroy()
}
cache[key] = null
remove(keys, key)
}function pruneCacheEntry(cache: VNodeCache, key: string, keys: Array<string>, current?: VNode) {
const cached = cache[key]
/* 判断当前没有处于被渲染状态的组件，将其销毁*/
if (cached && (!current || cached.tag !== current.tag)) {
cached.componentInstance.$destroy()
}
cache[key] = null
remove(keys, key)
}在mounted钩子函数中观测 include 和 exclude 的变化，如下：
js
mounted () {
this.$watch('include', val => {
pruneCache(this, name => matches(val, name))
})
this.$watch('exclude', val => {
pruneCache(this, name => !matches(val, name))
})
}mounted () {
this.$watch('include', val => {
pruneCache(this, name => matches(val, name))
})
this.$watch('exclude', val => {
pruneCache(this, name => !matches(val, name))
})
}如果include 或exclude 发生了变化，即表示定义需要缓存的组件的规则或者不需要缓存的组件的规则发生了变化，那么就执行pruneCache函数，函数如下
js
function pruneCache(keepAliveInstance, filter) {
const { cache, keys, _vnode } = keepAliveInstance
for (const key in cache) {
const cachedNode = cache[key]
if (cachedNode) {
const name = getComponentName(cachedNode.componentOptions)
if (name && !filter(name)) {
pruneCacheEntry(cache, key, keys, _vnode)
}
}
}
}function pruneCache(keepAliveInstance, filter) {
const { cache, keys, _vnode } = keepAliveInstance
for (const key in cache) {
const cachedNode = cache[key]
if (cachedNode) {
const name = getComponentName(cachedNode.componentOptions)
if (name && !filter(name)) {
pruneCacheEntry(cache, key, keys, _vnode)
}
}
}
}在该函数内对this.cache对象进行遍历，取出每一项的name值，用其与新的缓存规则进行匹配，如果匹配不上，则表示在新的缓存规则下该组件已经不需要被缓存，则调用pruneCacheEntry函数将其从this.cache对象剔除即可
关于keep-alive的最强大缓存功能是在render函数中实现
首先获取组件的key值：
go
const key = vnode.key == null?
componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
: vnode.keyconst key = vnode.key == null?
componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
: vnode.key拿到key值后去this.cache对象中去寻找是否有该值，如果有则表示该组件有缓存，即命中缓存，如下：
go
/* 如果命中缓存，则直接从缓存中拿 vnode 的组件实例 */
if (cache[key]) {
vnode.componentInstance = cache[key].componentInstance
/* 调整该组件key的顺序，将其从原来的地方删掉并重新放在最后一个 */
remove(keys, key)
keys.push(key)
}/* 如果命中缓存，则直接从缓存中拿 vnode 的组件实例 */
if (cache[key]) {
vnode.componentInstance = cache[key].componentInstance
/* 调整该组件key的顺序，将其从原来的地方删掉并重新放在最后一个 */
remove(keys, key)
keys.push(key)
}直接从缓存中拿 vnode 的组件实例，此时重新调整该组件key的顺序，将其从原来的地方删掉并重新放在this.keys中最后一个
this.cache对象中没有该key值的情况，如下：
go
/* 如果没有命中缓存，则将其设置进缓存 */
else {
cache[key] = vnode
keys.push(key)
/* 如果配置了max并且缓存的长度超过了this.max，则从缓存中删除第一个 */
if (this.max && keys.length > parseInt(this.max)) {
pruneCacheEntry(cache, keys[0], keys, this._vnode)
}
}/* 如果没有命中缓存，则将其设置进缓存 */
else {
cache[key] = vnode
keys.push(key)
/* 如果配置了max并且缓存的长度超过了this.max，则从缓存中删除第一个 */
if (this.max && keys.length > parseInt(this.max)) {
pruneCacheEntry(cache, keys[0], keys, this._vnode)
}
}表明该组件还没有被缓存过，则以该组件的key为键，组件vnode为值，将其存入this.cache中，并且把key存入this.keys中
此时再判断this.keys中缓存组件的数量是否超过了设置的最大缓存数量值this.max，如果超过了，则把第一个缓存组件删掉
怎么缓存当前的组件？缓存后怎么更新
缓存组件使用keep-alive组件，这是一个非常常见且有用的优化手段，vue3中keep-alive有比较大的更新，能说的点比较多
思路
- 缓存用
keep-alive，它的作用与用法 - 使用细节，例如缓存指定/排除、结合
router和transition - 组件缓存后更新可以利用
activated或者beforeRouteEnter - 原理阐述
回答范例
- 开发中缓存组件使用
keep-alive组件，keep-alive是vue内置组件，keep-alive包裹动态组件component时，会缓存不活动的组件实例，而不是销毁它们，这样在组件切换过程中将状态保留在内存中，防止重复渲染DOM
html
<keep-alive>
<component :is="view"></component>
</keep-alive><keep-alive>
<component :is="view"></component>
</keep-alive>- 结合属性
include和exclude可以明确指定缓存哪些组件或排除缓存指定组件。vue3中结合vue-router时变化较大，之前是keep-alive包裹router-view，现在需要反过来用router-view包裹keep-alive
html
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component"></component>
</keep-alive>
</router-view><router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component"></component>
</keep-alive>
</router-view>- 缓存后如果要获取数据，解决方案可以有以下两种
beforeRouteEnter：在有vue-router的项目，每次进入路由的时候，都会执行beforeRouteEnter
js
beforeRouteEnter(to, from, next){
next(vm=>{
console.log(vm)
// 每次进入路由执行
vm.getData() // 获取数据
})
},beforeRouteEnter(to, from, next){
next(vm=>{
console.log(vm)
// 每次进入路由执行
vm.getData() // 获取数据
})
},actived：在keep-alive缓存的组件被激活的时候，都会执行actived钩子
js
activated(){
this.getData() // 获取数据
},activated(){
this.getData() // 获取数据
},keep-alive是一个通用组件，它内部定义了一个map，缓存创建过的组件实例，它返回的渲染函数内部会查找内嵌的component组件对应组件的vnode，如果该组件在map中存在就直接返回它。由于component的is属性是个响应式数据，因此只要它变化，keep-alive的render函数就会重新执行