vue杂货铺

dom&bom

摘要：

• DOM 是为了操作文档出现的 API，document 是其的一个对象；BOM 是为了操作浏览器出现的 API，window 是其的一个对象。
• BOM是浏览器对象模型，DOM是文档对象模型，前者是对浏览器本身进行操作，而后者是对浏览器（可看成容器）内的内容进行操作
• BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。
• 从window.document已然可以看出，DOM的最根本的对象是BOM的window对象的子对象。

变量赋值，页面没有更新或者更新不对应

也有可能是data里没有注册变量

v-if & v-show

v-show：通过display判断元素显示or隐藏，频繁切换的选择，减少渲染以及销毁带来的性能消耗

v-if：元素的渲染以及销毁，变化频率不高的选择，这样不会频繁的去对 DOM 进行增删操作；

v-for为什么要用key

diff算法通过key来判断是否是需要更新的节点，减少渲染次数，提升渲染性能

为什么data必须是一个函数

export出去的是一个对象，一旦多个实例共用该对象，就会形成共享数据的情况，修改其中一个属性的时候，另外一个实例也会跟着变，

只有函数构成作用域，当data是函数的时候，每个组件实例都有自己的作用域，每个实例相互独立，data属性都是独立的，才不会相互影响，

路由的 hash & history 模式

hash

• hash 改变 url (hash 模式下，仅hash符号之前的内容会被包含在请求中)，不会触发页面重新加载（hash的改变是记录在 window.history 中），不会刷新页面。
• 也就是说，所有页面的跳转都是在客户端进行操作，无刷新跳转，不请求跳转。hash 永远不会提交到 server 端（可以理解为只在前端自生自灭）。

history

• history - 利用了HTML5 History Interface中新增的pushState()和replaceState（）方法。
• history模式下，前端的URL必须和实际向后端发起请求的URL一致。如htttp://www.abc.com/book/id。如果后端缺少对/book/id 的路由处理，将返回404错误

调用history.pushState()相比于直接修改hash ，存在以下优势：

• pushState()设置的新URL可以是与当前URL同源的任意URL；而hash只可修改#后面的部分，因此只能设置与当前URL同文档的URL；
• pushState()设置的新URL可以与当前URL一模一样，这样也会把记录添加到栈中；而hash设置的新值必须与原来不一样才会触发动作将记录添加到栈中；
• pushState()通过stateObject参数可以添加任意类型的数据到记录中；而hash只可添加短字符串；
• pushState()可额外设置title属性供后续使用。

Vue3中ref、reactive、 toRef 和 toRefs最佳使用方式

• 用 reactive 做对象的响应式，用 ref 做值类型的响应式。
• setup 中返回 toRefs(state) ，对 ref声明的对象类的响应式解构，
• toRef(state, 'xxx')（只单独要对响应式对象里面的某一个属性进行响应式） 。
• 为了防止误会产生， ref 的变量命名尽量都用 xxxRef ，这样在使用的时候会更清楚明了。
• 合成函数返回响应式对象时，使用 toRefs
• 与 ref 不一样的是， toRef 和 toRefs 这两个兄弟，它们不创造响应式，而是延续响应式。创造响应式一般由 ref 或者 reactive 来解决，而 toRef 和 toRefs 则是把对象的数据进行分解和扩散，其这个对象针对的是响应式对象而非普通对象。

参考摘自：Javascript之BOM与DOM讲解

从基础到进阶原理，从vue2到vue3，48个知识点保姆级带你巩固vuejs知识体系

vue-router的两种模式（hash和history）及区别