VUE相关--给给好看得很卡换卡喝咖灰啊就看客户和回去后去

• 数据观测和初始化事件还没有开始,访问不到data,computed,watch,methods上的方法和数据

• 实例创建完成,实例上配置的options包括data,computed,watch,methods等都配置完成,但组件还没有挂载即渲染的节点还未挂载到DOM,所以不能访问到$el属性也看不到.

• 在挂载开始之前被调用,相关的render函数首次被调用.已经完成了模板编译,但还没有挂载到html到页面上, 简言之在这步创建虚拟DOM

• 实例挂载完成,模板中的html渲染到html页面中,即虚拟DOM渲染成为真实的DOM
• 组件中如果有子组件的话，会递归挂载子组件，只有当所有子组件全部挂载完毕，才会执行根组件的挂载钩子。

• 响应式数据更新前调用,此时虽然数据更新了,但是真实DOM还没有渲染

• 数据更新后,且DOM已经渲染了

• 实例销毁前调用beforeDestroy, 然后进行一系列销毁操作时,如果有子组件的话，也会递归销毁子组件，所有子组件都销毁完毕后才会执行根组件的 destroyed 钩子函数。

• 用keep-alive包裹的组件在切换时不会进行销毁,而是缓存到内存中并执行deactivated钩子函数, 命中缓存渲染后会执行activated钩子函数.
• keep-alive是vue提供的一个内置组件,用来对组件进行缓存--在组件切换过程中将状态保留在内存中,防止重复渲染DOM
• 如果一个组件包裹了keep-alive,那么它会多出两个生命周期:activated/deactivated. 同时beforeDestroy 和 destroyed 就不会再被触发了，因为组件不会被真正销毁。
• 当组件被切换掉的时候,会被缓存到内存中, 触发deactivated生命周期;当组件被切换回来的时候,再去缓存里找这个组件,触发activated钩子函数

• created在模板渲染成html前调用, 即通常初始化某些属性值, 然后再去渲染成为视图
• mounted在模板渲染成html后调用, 通常是初始化页面完成后, 再对html的dom节点进行一些需要的操作

• 我们可以在钩子函数created,beforeMount,mounted中进行,因为在这三个钩子函数中,data已经创建,可以将服务端返回的数据进行赋值
• 推荐在created钩子函数中调用异步请求,因为在created钩子函数中调用异步能更快获取到服务端数据,减少页面加载时间,用户体验更好

• props/$emit：子组件通过props属性来接收父组件的数据，然后父组件在子组件上注册监听事件，子组件通过$emit触发这个监听事件来向父组件发送数据。
• 依赖注入provide/inject，用于父子或者祖孙等，无需一层一层的传递。provide/inject是vue提供的两个钩子，和data，methods是同级的，并且provide的书写形式和data一样。provide钩子用来发送数据和方法。inject用来接收
  1. 在父组件中： provide(){ return { num: this.num } }
  2. 在子组件中 inject: 【'num'】
• ref/$refs, ref这个熟悉用在子组件上，它的引用就指向了子组件的实例。可以通过实例来访问组件的数据和方法。 0. 子组件中：data(){name:'aaa'}
  1. 父组件中：
  2. 父组件中：this.$refs.child.name //aaa

• 使用eventBus（$emit/$on）
  1. 创建事件中心管理组件之间的通信 const EventBus = new Vue()
  2. 发送事件，假设有两个组件A和B，在A中发送事件 add(){ EventBus.$emit('addition',{ num:this.num++ }) }
  3. 接收事件，在B中接收事件 mounted(){ EventBus.$on('addition',param => { console.log(param.num) }) }
  4. 相当于将num值存储值事件总线中，在其他组件中可以直接访问，事件总线就相当于一个桥梁，不用组件通过它来通信。
• $parent/$children
  1. （在子组件中）使用$parent可以让组件访问父组件的实例（访问的上上一级父组件的属性和方法）
  2. （在父组件中）使用$children可以让组件访问子组件的实例，但不能保证顺序

• 使用eventBus

• 概念： 用js对象模拟的dom
• 存在必要性：
  1. 操作dom的开销很大而且很慢，相较于dom来说，操作js对象会快很多，我们可以通过js来模拟dom，
  2. 虚拟dom还能渲染到其他平台，比如实现ssr，跨端开发等
  3. 实现组件的高度抽象化

• 虚拟dom的对比更新是利用的diff算法，找到最小差异部分DOM，通过差异去局部更新真实dom，实现性能的最优化
• diff算法的判断步骤：
  1. diff算法的过程
     • 首先, 对比节点本身, 判断是否为同一节点, 如果不为相同节点, 则删除该节点重新创建节点进行替换.
     • 如果为相同节点, 再处理子节点. 先判断一方有子节点一方没有子节点的情况, 如果新的children没有子节点, 将旧的子节点删除
     • 都有子节点, 则判断如何对这些新老节点的子节点进行操作(diff核心)
     • 匹配时, 找到相同的子节点, 递归比较子节点
  2. diff核心比较的内核是节点复用，为了在（同层级的）新旧节点中找到相同的节点。比较处理流程如下：
     • 先找到不需要移动的相同节点(可复用)，消耗最小
     • 再找到相同但是需要移动的节点(可复用)，消耗第二小
     • 最后找不到，才会去新建删除节点，保底处理
  3. 比较时候具体还是依靠key值来判断(引出为什么不能用index作为key值)， 最好是使用唯一标识作为key值
     • 举例：现在页面上有张三，李四两个人，突然插入了王五到最前面，导致张三，李四绑定的key发生了变化，从而使得页面三个人都必须要重新渲染，这就是key值的错误使用，原本不绑定index绑定其他值，在插入王五的时候是可以节省掉张三李四的渲染的。
     • 总结：
       1. 用index作为key时，在对数据进行，逆序添加，逆序删除等破坏顺序的操作时，会产生没必要的真实 DOM更新，从而导致效率低
       2. 在开发中最好每条数据使用唯一标识固定的数据作为 key，比如后台返回的 ID，手机号，身份证号等唯一值

• 一般来说需要依赖别的属性来动态获得值的时候可以使用 computed, 利用其缓存特性避免每次获取值都要重新计算,对于监听到值的变化需要做一些复杂业务逻辑的情况可以使用 watch, 能支持在数据变化时执行异步或者开销较大的操作,这是computed无法做到的.

• immediate: 组件加载立即触发回调函数
• deep:深度监听,发现数据内部的变化, 在复杂数据类型中使用, 例如数组中的对象发生变化. 需要注意的是, deep无法监听到数组和对象内部的变化.

路由hash模式和history模式

• 背景总结: 单页面应用是在移动互联时代诞生的, 它的目标是不刷新浏览器, 而通过感知地址栏中的变化来决定内容区域显示什么内容.要达成这个目标就用到前端路由计数, 具体来说有两种方式来实现.
• 原理不同: hash模式的实现原理是通过监听onhashchange事件来实现的, 前端js把当前hash地址对应的组件渲染到浏览器中. history模式是通过调用history.pushState(或者replaceState)并且监听popstate事件来实现的. history.pushState会追加历史记录, 并更换地址栏地址信息, 但是页面不会刷新, 需要手动调用地址变化之后的处理函数,并在处理函数内部决定跳转逻辑; 监听popstate是为了响应浏览器的前进后退(back(),forward(),go())功能.
• 表现不同: hash模式会在地址栏有#号, 而history没有; 同事由于history模式的实现原理用到HT的新特性,所以它对浏览器的兼容性有要求(IE>=10).
• history模式特点: history模式开发的spa项目, 需要服务端做额外的配置, 否则会出现刷新白屏(链接分享失效). 原因是页面刷新时, 浏览器真的发出对这个地址的请求,而这个文件资源又不存在, 所以就报404.处理方式就由后端做一个保底映射, 所有的请求全部拦截到index.html(路由重定向)

    window.onhashchange = function(event){
        console.log(event.oldURL, event.newURL);
    let hash = location.hash.slice(1)
    }
    ---------
    const router = new VueRouter({ mode: 'history', routes: [...] })

• v-if会调用addifCondition的方法,生成vnode的时候会忽略对应节点,render的时候就不会渲染.
• v-show会生成vnode,render的时候也会渲染成为真实节点,只是在render的过程中会在节点的属性中修改show属性值,也就是常说的display.
• v-html会先移除节点下的所有节点,调用html方法,通过addProp添加innerHTML属性,归根结底还是设置innerHTML为v-html的值

• 手段: v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样式属性控制显隐.
• 编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换.
• 编译条件:v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译;v-show是在任何条件下,无论首次条件是否为真,都被编译,然后被缓存,而且DOM元素保留.
• 性能消耗:v-if有更高的切换消耗;v-show有更高的初始渲染消耗.
• 使用场景:v-if适合运营条件不大可能改变;v-show适合频繁切换.

• 尽量减少data中的数据,data中的数据都会增加getter和setter,会收集对应的watcher.
• v-if和v-for不能连用
• 如果需要使用v-for给每项元素绑定事件时使用事件代理.
• SPA页面采用keep-alive缓存组件
• 在更多的情况下,使用v-if代替v-show
• key保证唯一
• 使用路由懒加载,异步组件
• 防抖,节流
• 第三方模块按需导入
• 长列表滚动到可视区域动态加载
• 图片懒加载
• 预渲染或服务端渲染SSR

• 压缩代码和图片
• 提取公共代码
• Tree shaking/Scope hoisting
• 使用cdn加载第三方模块
• 多线程打包happypack
• splitChunks抽离公共文件
• sourceMap优化

• 服务端开启gzip压缩
• 浏览器缓存,服务端缓存
• 利用chrome performance查找性能瓶颈

• 概念：M即Model（数据），V即View（视图），VM即ViewModel，连接视图View和数据Model。Model更新触发View更新必须通过ViewModel，例如Vue实例中，set时触发依赖异步更新模板。而View变更后触发Model也必须通过ViewModel，例如利用v-model指令，input中用户手动输入监听@input世界，更改数据。
• Vue是按照这样设计的，但是Vue中添加了一个属性ref，通过ref可以拿到dom对象直接去操作视图（而不是通过修改数据去更新视图），这一点上违背了MVVM