created跟mounted生命周期方法有什么区别
- created的时候dom未进行渲染，不能做dom相关的操作
- mounted的时候dom已经渲染完成了
vue的 nextTick是如何实现的
1、执行时机会在dom更新完成之后调用
2、先把所有的回调任务都加到callbacks数组中，然后定义一个flushCallbacks方法遍历数组执行回调函数，最后判断浏览器支持Promise -> new MutationObserver(flushCallbacks) -> setImmediate -> setTimeout 找出一个方法来执行flushCallbacks函数，
3、MutationObserver是一个监听到DOM更新后，调用回调函数的API,主要目的是在当前同步代码执行完毕之后，执行我们传入的回调函数
父子组件挂载生命周期顺序
先执行最内层的生命周期，后执行最外面的生命周期
vue2中数组和对象 数据观察时有什么特殊处理
对象是递归遍历每一个key加数据劫持， 数组是通过重写其中会改变原数组内容的一些函数，例如push pop splice等等操作函数
vue2和3中数据观察的区别
- vue2用的是Object.defineProperty定义每一个key的get以及set方法，在get中收集依赖
- 在set中通知Watcher更新
- vue3则是通过系统自带的Proxy做一个拦截，实现同样的效果，也是定义get跟set方法
const dinner = ["test1", "test2"];
const handler = {
get(target, prop, receiver) {
// track(target, prop)
return Reflect.get(...arguments);
},
set(target, key, value, receiver) {
// trigger(target, key)
return Reflect.set(...arguments);
},
};
const proxy = new Proxy(dinner, handler);
console.log(proxy[0]);
proxy[1] = "test3";
console.log(proxy[1]);
vue兄弟节点通信
- eventbus
产生事件：
this.$root.$emit('change-color')
接受事件：
this.$root.$on('change-color', () => {
this.colored = !this.colored
})
import Vue from 'vue'
export default new Vue()
import bus from './eventBus'; //这里bus != this.$root,但是都可以用来传递事件两者事件不通
虚拟dom解决了什么问题
- 首先是正常的一个真实dom拥有的属性非常多，还拥有很多dom操作的方法
- 其次数据更新的时候如果整个画面重新渲染会带来很大的性能开销，非常慢，而且很多没变化的部分都属于无用功，还不能保存数据更新前的状态
- 用新数据生成的虚拟dom跟上次旧的虚拟dom做对比，只更新发生变化的部分
- diff算法也是消耗性能的，所以如果我们知道要修改那个dom，直接手动操作应该是最快的，这样做是为了让我们更关注数据的变化，而不需要关心dom操作
vue的diff和react的diff
- 相同点：
都不做跨层比较，只做同层比较,如果某一节点不同就会销毁当前的，创建一个新的
- 不同点：
-
Vue进行diff算法的时候一边比较，一边用新的虚拟dom去更新真实dom
-
Vue认定相同节点，判断key、标签、data都要相同
3.Vue对比是从两端到中间做对比，两两进行比较，每次对比完指针往中间移动 -
React是从左往右进行对比，如果同样把集合最后一个节点移动到第一个，react会把前面节点依次后移，vue会把最后一个节点放在最前面
通过key值查找新旧节点中相同可以复用的节点，因此当同类型节点内容不同但是key前后之后可能导致更新失败的问题
- 对于同样的abcd -> dabc ,vue会直接把d拿到第一个， react会把a,b,c摞到最后一个，d不动；（拿节点旧Index与当前处理到的index进行对比，小于的进行移动，大于index不操作）
两篇参考文章：
Vue跟react对比
两者的模板渲染、两者的虚拟 dom、diff 差异（vue2、vue3、react 16）、react fiber 能解决什么问题、vue2 的响应式原理和 vue3 的响应式原理；vue 关于 Proxy 与 Object.defineProperty 的区别；两者的批量更新，还有路由差异、常用的优化手段、怎么进行数据通信、讲点新鲜的内容：新发布的 vue3 有什么特性、最后总结，谈谈两者的如今的生态
computed怎么实现的
computed引入其他computed的属性是怎么实现的
watch怎么实现的
- 初始化了一个Watcher,读取了一遍数据，这个时候观察者就会记录自己依赖了哪些变量，变化的时候回调用回调函数
- 假如传入deep,表示深度观察，get的时候如果deep是true,就会读一遍所有的属性，调用get方法的时候就会将Watcher添加到每一个变量的dep中去
Vue.prototype.$watch = function (expOrFn,cb,options) {
const vm: Component = this
if (isPlainObject(cb)) {
return createWatcher(vm, expOrFn, cb, options)
}
options = options || {}
options.user = true
const watcher = new Watcher(vm, expOrFn, cb, options)
if (options.immediate) {
cb.call(vm, watcher.value)
}
return function unwatchFn () {
watcher.teardown()
}
}
$on跟$emit原理
用vm._events[event] = [fn1,fn2],然后$emit去查找vm._events
有没有这个事件，有就遍历调用同时绑定this
handler.apply(context, args)
$off: vm._events[event] = null
$once: 调用完一次就调用$off关闭事件
Vue.directive自定义指令
1、用法
//定义
Vue.directive('color', {
// el 被绑定元素的元素
// obj 传递的参数
bind: function (el, obj) {
// el.style.color = 'blue'
el.style.color = obj.value
}
})
//使用
<div v-color="'red'">11111111111</div>
- 作用，比如可以用来自动聚焦，定义按钮防连点等
- 存储如下：
this.options.directives ={
color: {bind: ƒ}
}
{
'v-focus':{
name : 'focus' , // 指令的名称
value : '', // 指令的值
arg:'', // 指令的参数
modifiers:{}, // 指令的修饰符
def:{
inserted:fn
}
}
}
keep-alive
- 用法：
- <keep-alive>组件可接收三个属性：
- include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
- exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
- max - 数字。最多可以缓存多少组件实例。
- 原理：实际上是把满足规则的组件缓存下来
- 如果命中缓存就在移除之后放到最后一个
- 如果没有命中缓存就将当前vnode缓存下来
- 如果超过max就把第一个移除
- 为什么要删除第一个缓存组件并且为什么命中缓存了还要调整组件key的顺序？
LRU策略，最近最少使用，把最常用的放在最后，超过限制移除第一个
this.cache = Object.create(null)
this.cache = {
'key1':'组件1',
'key2':'组件2',
// ...
}
- 经验总结：
-
keep-alive包裹的组件只会执行一次created、mounted，再次激活就是调用activated
-
总结用起来很麻烦，有很多缓存不刷新的坑，还不如用强缓存
网友评论