Vue的一些笔记_beforemount改变data无法触发update-CSDN博客

本文链接：https://blog.csdn.net/xiaobangsky/article/details/115323059

Vue的两大核心概念

Vue的数据驱动
1. 当创建 Vue 实例时,vue 会遍历 data 选项的属性,利用 Object.defineProperty 为属性添加 getter 和 setter 对数据的读取进行劫持（getter 用来依赖收集,setter 用来派发更新）,并且在内部追踪依赖,在属性被访问和修改时通知变化
2. 每个组件实例会有相应的 watcher 实例,会在组件渲染的过程中记录依赖的所有数据属性（进行依赖收集,还有 computed watcher,user watcher 实例）,之后依赖项被改动时,setter 方法会通知依赖与此 data 的 watcher 实例重新计算（派发更新）,从而使它关联的组件重新渲染
Vue的组件系统
1. 模板（template）：模板声明了数据和最终展现给用户的DOM之间的映射关系
2. 初始数据（data）：一个组件的初始数据状态。对于可复用的组件来说，这通常是私有的状态。
3. 接受的外部参数(props)：组件之间通过参数来进行数据的传递和共享
4. 方法（methods）：对数据的改动操作一般都在组件的方法内进行
5. 生命周期钩子函数（lifecycle hooks）：一个组件会触发多个生命周期钩子函数，最新2.0版本对于生命周期函数名称改动很大
6. 私有资源（assets）：Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用

Vue是MVVM框架

MVVM:Model-View-ViewModel缩写
Model:代表数据模型
View:UI组件
ViewModel:View和Model层的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据

Vue2.x响应式数据原理

Vue在初始化数据时，会使用Object.defineProperty重新定义data中的所有属性，当页面使用对应属性时，首先会进行依赖收集（收集当前组件的watcher）
如果属性发生变化会通知相关依赖进行跟踪操作（发布订阅）

Vue3.x响应式数据原理

Vue3.x改用Proxy替代Object.defineProperty。因为Proxy可以直接监听对象和数据的变化，并且多达13种拦截方法
并且作为新标准将受到浏览器厂商重点持续的性能优化
Proxy只会代理对象的第一层：判断当前Reflect.get的返回值是否为Object,如果是则再通过reactive方法做代理，这样就实现了深度观测
监测数组的时候可能触发多次get/set，阻止方法：判断key是否为当前被代理对象target自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件之一时，才可能触发

Vue2.x中如何监测数组变化

使用了函数劫持的方式，重写了数组的方法，Vue将data中的数组进行了原型链重写，指向了自己定义的数组原型方法
当调用数组api时，可以通知依赖更新。如果数组中包含着引用类型，会数组中的引用类型再次递归遍历进行监控，这样就实现了监测数组变化

nextTick的实现原理

在下次DOM更新循环结束之后执行延迟回调。nextTick主要使用了宏任务和微任务。根据执行环境分别尝试采用Promise\MutationObserver\setImmediate,如果以上都不行则采用setTimeout
定义了一个异步方法，多次调用nextTick会将方法存入队列中，通过这个异步方法清空当前队列

Vue的生命周期

beforeCreate:new Vue()之后触发的第一个钩子，在当前阶段data\methods\computed以及watch上的数据和方法都不能被访问
created:完成了数据观测，可以使用数据，更改数据，在这里更改数据不会触发updated函数
beforeMount:虚拟Dom已经完成，开始渲染，更改数据，在这里更改数据不会触发updated函数
mounted:挂载完成
beforeUpdate:发生更新之前，也就是响应式数据发生更新，虚拟dom重新渲染之前被触发，你可以在当前阶段进行更改数据，不会造成重渲染
updated:发生在更新完成之后，当前阶段组件Dom已完成更新
beforeDestroy：在当前阶段实例完全可以被使用
destroyed:实例销毁之后

请求接口放在生命周期的位置

一般放在mounted中，但需要注意的是服务器端渲染时不支持mounted，需要放到created中。

v-model的原理

v-model本质就是一个语法糖，可以看成是value+input方法的语法糖。可以通过model属性的prop和event属性来进行自定义。
原生的v-model，会根据标签的不同生成不同的事件和属性

v-model是什么

v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值

为什么使用v-model

v-model作为双向绑定指令也是vue两大核心功能之一，使用非常方便，提高前端开发效率。在view层，model层相互需要数据交互，即可使用v-model

v-model的原理简单描述

view层输入值影响data的属性值
data属性值发生改变会更新view层的数值变化
input 输入值后更新data
1. 如果遍历到v-model这个属性，则会为这个节点添加一个input事件，当监听从页面输入值的时候，来更新vue实例中的data想对应的属性值
data的属性赋值后更新input的值
1. 同样初始化vue实例时候，会递归遍历data的每一个属性，并且通过defineProperty来监听每一个属性的get，set方法，从而一旦某个属性重新赋值，则能监听到变化来操作相应的页面控制

Vue事件绑定原理

原生事件绑定是通过addEventListener绑定给真实元素的，组件事件绑定是通过Vue自定义的$on实现的

Vue模板编译原理

在这里插入图片描述

Vue的编译过程就是将template转化为render函数的过程
经历阶段：
1. 生成AST树：解析模板，生成AST语法树（一种用JavaScript对象的形式来描述整个模板）。使用大量的正则表达式对模板进行解析，遇到标签、文本的时候都会执行对应的钩子进行相关处理。
  Vue的数据时响应式的，但其实模板中并不是所有的数据都是响应式的。有一些数据首次渲染后就不会再变化，对应的DOM也不会变化。
2. 优化过程就是深度遍历AST树，按照相关条件对树节点进行标记。这些被标记的节点（静态节点）我们就可以跳过对它们的比对，对运行时的模板起到很大的优化作用。[每次重新渲染的时候不需要为静态节点创建新节点:用递归的方式将所有节点添加 static 属性，标识是不是静态节点;在 Virtual DOM 中 patching 的过程可以被跳过:标记所有静态根节点]
3. codegen:编译的最后一步就是将优化后的AST树转换为可执行的代码。

Vue2.x和Vue3.x渲染器的diff算法比较

简单来说，diff算法有一下过程
1.同级比较，再比较子节点
先判断一方有子节点一方没有子节点的情况（如果新的children没有子节点，将旧的节点移除）
2.比较都有子节点的情况（核心 diff）
递归比较子节点
正常Diff两个树的时间复杂度是O(n^{3),但实际情况下我们很少会进行跨层级的移动DOM,所以Vue将Diff进行了优化，从O(n}3)->O(n),只有当新旧children都为多个子节点时才需要用核心的Diff算法进行同层级比较。
Vue2的核心Diff算法采用了双端比较的算法，同时从新旧children的两端开始进行比较，借助key值找到可复用的节点，再进行相关操作。相比React的Diff算法，同样情况下可以减少移动节点次数，减少不必要的性能损耗，更加的优雅
Vue3借鉴了ivi算法和inferno算法
在创建Vnode时就确定其类型，以及在mount/patch的过程中采用位运算来判断一个VNode的类型，在这个基础之上再配合核心的Diff算法，使得性能上较Vue2.x有了提升，该算法中还运用了动态规划的思想求解最长递归子序列

虚拟DOM以及key属性的作用

虚拟dom产生原因：由于浏览器中操作DOM是很昂贵的，频繁的操作DOM,会产生一定的性能问题。
Vue2的Virtual DOM借鉴了开源库snabbdom的实现
Virtual DOM本质就是用一个原生的JS对象去描述一个DOM节点。是对真实DOM的一层抽象。（也就是源码中的VNode类，它定义在src/core/vdom/vnode.js中）
VirtualDOM映射到真实DOM要经历VNode的create、diff、patch等阶段
key的作用是尽可能的复用DOM元素
新旧children中的节点只有顺序是不同的时候，最佳的操作应该是通过移动元素的位置来达到更新的目的。
需要在新旧children的节点中保存映射关系，以便能够在旧children的节点中找到可复用的节点。key也就是children中节点的唯一标识。

keep-alive

keep-alive可实现组件缓存，当组件切换时不会对当前组件进行卸载。
常用的两个属性include/exclude，允许组件有条件的进行缓存
两个生命周期activated/deactivated，用来得知当前组件是否处于活跃状态。
keep-alive的中还运用了LRU(Least Recently Used)算法

Vue中组件生命周期调用顺序

组件的调用顺序都是先父后子，渲染完成的顺序是先子后父
组件的销毁操作是先父后子，销毁完成的顺序是先子后父
加载渲染过程
父beforeCreated->父-created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
子组件更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated
父组件更新过程
父beforeUpdate->父updated
销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

SSR

SSR：服务端渲染，将Vue在客户端把标签渲染成HTML的工作放在服务端完成，然后再把html直接返回给客户端。
SSR有着更好的SEO、并且首屏加载速度更快等优点。缺点：开发条件会受到限制
服务器端渲染只支持beforeCreate和created两个钩子，当我们需要一些外部扩展库时需要特殊处理
服务端渲染应用程序也需要处于Node.js的运行环境。还有就是服务器会有更大的负载需求。

Vue方面的性能优化

编码阶段
1. 尽量减少data中的数据，data中的数据都会增加getter和setter,会收集对应的watcher
2. v-if和v-for不能连用
3. SPA页面采用keep-alive缓存组件
4. 在更多的情况下，使用v-if替代v-show
5. key保证唯一
6. 使用路由懒加载、异步组件
7. 长列表滚动到可视区域动态加载
SEO优化：预渲染、服务器端渲染 SSR
打包压缩：压缩代码、Tree Shaking、多线程打包（happypack）、抽离公共文件（splitChunks）、sourceMap优化
用户体验：骨架屏、PWA等

Vue当中scope局部样式的实现原理

当你在单个组件的style标签的内部加上了scoped,在编译的时候就会给当前组件的html标签加上一个data-v-hash的属性并且属性的值是哈希值,我们的样式中用选择器去选到对应的哈希值,从而达到但组件样式的局部化

Vue和React的区别

Vue和React都是用来处理UI层的框架

Vue是一个渐进式的UI框架，React不是的
语法写法很大，Vue推崇模板的写法，类似于HTML标签的写法，React把所有东西写在js，更推崇JSX的写法，但是Vue支持JSX的写法，React不支持模板的写法
React 18推出了Hooks，Vue2不支持Hooks，Vue3支持，推出了Composition API
UI更新策略不一样，React用新的数据去代替旧的数据，通过diff算法去更新UI,Vue是数据响应式的方式进行UI更新。
社区文化不一样，Vue有很多自己支持的库，React更推荐使用第三方库。

Vue中组件的全局注册和局部注册有什么区别？如何局部注册组件？

全局注册组件为 Vue.component()方法
局部注册组件为 components 属性，它的属性值是一个对象
在用脚手架时，在单文件组件中局部注册组件

对于组件来说非prop的attribute怎么处理？

一个非 prop 的 attribute 是指传向一个组件，但是该组件并没有相应 props 或 emits 定义的 attribute。常见的示例包括 class、style 和 id 属性。
当组件返回单个根节点时，非 prop attribute 将自动添加到根节点的 attribute 中。如果不希望组件的根元素继承 attribute，可以在组件的选项中设置 inheritAttrs: false。

{
  inheritAttrs: false,
  template: `
    <div class="date-picker">
      <input type="datetime" v-bind="$attrs" />
    </div>
  `
}

Vue中的插槽是什么?

插槽就是Vue实现的一套内容分发的API，将元素作为承载分发内容的出口
没有插槽的情况下在组件标签内些一些内容是不起任何作用的，当我在组件中声明了slot元素后，在组件元素内写的内容就会跑到它这里了

具名插槽

具名插槽，就是给这个插槽起个名字

作用域插槽

我在组件上的属性，可以在组件元素内使用！