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讲解