重读Vue文档

Ref & Reactive

Ref Unwrapping in Reactive Objects

参考Vue文档
reactive包含ref，直接修改ref，都会变化

1
2
3
4
5
6
const counter = ref(0)
const searchParams = ref({
	count: counter // 不解构直接用ref
})

counter.value++ // counter: 1  searchParams.count: 1

Conditional Rendering

参考Vue文档

v-if on <template>

控制包含多个元素时，可以用 <template> 包裹（渲染出来时不包含template元素），∴不需要再套一层div

1
2
3
4
5
<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>
FE

阅读全文>>

笔记 - VueUse 作者 Anthony Fu 分享可组合的 Vue

Ref & Reactive

能用 Ref 就尽量用

  • Ref：
    • Pros： 显示调用 + 类型检查
    • Cons：.value
  • Reactive：
    • Pros：自动 Unwrap
    • Cons：在类型上和一般对象没有区别 + ES6解构会失去响应性(toRefs) + 使用watch需要用箭头函数包装

Ref 自动解包

  • watch 直接接受 Ref 作为监听对象，回调中为解包后的值

    1
    2
    3
    4
    const counter = ref(0)
    watch(counter, count => {
    	console.log(count); // same as `counter.value`
    })
FE

阅读全文>>

【问题】watch 数组变化

watch ref的值 / 地址

问题现象

  • watch 的 ref 值不加 .value 只是地址，加 .value 可以watch到值的变化。

解决方案

1
2
3
4
5
6
const timeRange = ref([])
watch(() => timeRange.value, () => {
  [searchParams.createStartTime, searchParams.createEndTime] = timeRange.value
  resetPageSetting()
  debounceChange()
})
FE

【问题】node版本切换

nvm 切换版本

解决方案

1
2
3
4
5
6
arch -x86_64 zsh
source $(brew --prefix nvm)/nvm.sh
nvm use v12

// 查看现在node版本
nvm current node -v

终端每次重新打开都找不到nvm

解决方案

1
2
# 因为使用了oh-my-zsh，所以需要将以下配置添加到.zshrc文件中
source $(brew --prefix nvm)/nvm.sh

nvm 切换默认版本

解决方案

1
2
nvm ls
nvm alias default v14.18.3
FE

LocalStorage & SessionStorage 比较

LocalStorage & SessionStorage

  • 刷新当前页面，或者通过location.href、window.open、或者通过带target="_blank"的a标签打开新标签，会把旧窗口（或标签）的sessionStorage数据带过去.
    • 但从此之后，新窗口（或标签）的sessionStorage的增删改和旧窗口已经没有关系了。
    • 如果只是在当前标签内跳转新页面（或者刷新），数据还会保留（前提当然是同域）。
  • 但是如果是主动打开一个新窗口或者新标签，那就没有sessionStorage。

∴ sessionStorage的session仅限当前标签页或者当前标签页打开的新标签页。通过其它方式新开的窗口或标签不认为是同一个session

FE