看视频笔记

唐超 2021/12/12

# vue 性能优化

1 路由懒加载通过 webpack import 异步加载组件 2 keeplive 缓存页面 v-show 复用 dom，避免重复创建组件 v-once v-momo 不再变化的数据使用长列表优化，可才用虚拟滚动，只渲染可视化的区域 -开源库事件的销毁-vue 组件销毁时会自动解绑自己的全部指令和事件监听器吗自定义的事件需要自己销毁，定时器图片懒加载 v-lazy vue-lazyload 图片过多，未出现在可视区域的图片先不做加载，滚动到可视区域再加载按需加载子组件分割策略-较重的状态组件适合拆分。有状态的有改变

# vuex module

state 是分模块访问，getters,mutations,actions,是全局的，设置 namespace 选项后，会单独拆分，访问需要添加命名控件前缀

# vue2 组件只有一个根节点，vue3 是多节点

vodm 是单根树形结构，patch 方法在遍历的时候从根节点开始遍历，要求只有一个根节点
vue3 多节点是因为引入 fragment 的概念，发现组件是多根的，就创建一个 fragment 节点，把多个根节点作为他的 childred。patch 的时候遍历 fragment，遍历 chlidren 创建或更新。

# 组件渲染顺序，生命周期合并

遇到父组件先渲染父组件，遇到子组件就渲染子组件，子组件渲染完之后再渲染父组件父 befautcreat-子 befaultcreat-子 mount-父 mount

vue 生命周期生命周期是按顺序调用的，同步的，请求是异步的，同步执行之后再执行异步。最终获取到的数据是在 mounted 之后的

# 为什么 v-show 使用 display:none 不使用其他的 css

v-if="false"和 v-show="false"以及 display:none 都是网页中不占任何的位置。

visibility: hidden;只是单纯的隐藏元素，占据位置 -不响应事件 opacity 透明度-占位，并且响应事件 v-if 在编译时会变成三元表达式，v-show 会变成一个指令

# v-model 在组件上的应用

if (isDef(data.model)) {
    transformModel(Ctor.options, data)
  }
  function transformModel (options, data: any) {
  const prop = (options.model && options.model.prop) || 'value'
  const event = (options.model && options.model.event) || 'input'

}

prop:{ xxx:{} }

model:{ //获取的值可以自定义。默认是源码里面的 value 和 input prop:'xxx', enent:'aaa' }

# 插件使用 use 时，传入 vue，目的是保证所有插件使用的 vue 版本是一致的

# vue 源码

1 h 函数如何产生虚拟 DOM
2 新旧虚拟 dom 如何 DIFF
3 虚拟 dom 变为真实 DOM （上树）

# vue 初始化

vue 构造函数初始化过程
vue 实例化过程
vue 实例首次渲染的过程

 setTimeout(() => {},0)
 目的==
0把任务放到宏任务队列，同步代码执行完之后，再执行宏任务，后执行

/**
 * Create a cached version of a pure function.
 */
export function cached<F: Function> (fn: F): F {
  const cache = Object.create(null)
  return (function cachedFn (str: string) {
    const hit = cache[str]
    return hit || (cache[str] = fn(str))
  }: any)
}

思考 1.这样的数据劫持方式对数组有什么影响？

这样递归的方式其实无论是对象还是数组都进行了观测 但是我们想一下此时如果 data 包含数组比如 a:[1,2,3,4,5] 那么我们根据下标可以直接修改数据也能触发 set 但是如果一个数组里面有上千上万个元素 每一个元素下标都添加 get 和 set 方法 这样对于性能来说是承担不起的 所以此方法只用来劫持对象

思考 2.Object.defineProperty 缺点？

对象新增或者删除的属性无法被 set 监听到 只有对象本身存在的属性修改才会被劫持

vue2源码生命周期合并策略梳理 call apply bind 笔记

唐超笔记

Choose mode