【送书】前端系列16集-vue3范型，vue-i18n-next，watch，watchEffect
送书活动：挑选1名粉丝同学哦 免费包邮送。
截止时间：2023/5/26号 19 : 00
参与底部评论区说说：请在评论中分享你的阅读收获。
中台落地手记——业务服务化与数据资产化
vue-i18n-next
vue3 中使用 i18n 需要安装的是 [vue-i18n v9] 的版本
npm install vue-i18n@9
创建 src\lang\index.ts，使用 createI18n 创建 i18n 实例：
// src\lang\index.ts
import { createI18n } from 'vue-i18n'
import { LANG_VALUE } from '@/common/enum'
import ch from './ch'
import en from './en'
const i18n = createI18n({
legacy: false,
locale: getLanguage(),
messages: {
[LANG_VALUE.ch]: ch,
[LANG_VALUE.En]: en
}
})
export default i18n如果使用的是 Composition API 则需要定义为 false
locale：当前要展示的语言。值为之前用户的语言选择，从浏览器缓存中读取。如果缓存中没有数据，则通过
navigator.language获取浏览器使用的语言：
// src\lang\index.ts
import { localCache } from '@/utils'
export function getLanguage() {
const chooseLanguage = localCache.getItem(LANGUAGE)
if (chooseLanguage) return chooseLanguage
// 如果没有选择语言
const language = navigator.language.toLowerCase()
const locales = [LANG_VALUE.En, LANG_VALUE.Zh]
for (const locale of locales) {
if (language.indexOf(locale) > -1) {
return locale
}
}
return LANG_VALUE.Zh
}// src\common\enum.ts
export enum LANG_VALUE {
En = 'en',
Zh = 'zh-Hans'
}messages：不同语言对应的翻译文件：
// src\lang\zh-Hans.ts
export default {
baoguochuku: '包裹出库',
sousuo: '搜索'
}// src\lang\en.ts
export default {
baoguochuku: 'Outbound',
sousuo: 'Search'
}// src\main.ts，省略其它代码
import i18n from './lang/index'
app.use(i18n)从 vue-i18n 中导入 useI18n，然后进行调用生成 i18n 实例，再从里面解构得到 t 方法
在
中使用
{{ $t('xxx') }}
直接使用 $t 是因为有个叫做 globalInjection 的配置项默认为 true，帮我们全局注入了 $t 方法，如果设置为 false：
// src\lang\index.ts
const i18n = createI18n({
globalInjection: false
})在 ts 文件中，在 src\lang\index.ts 配置生成的 i18n 实例
// src\service\request\index.ts
import i18n from '@/lang'
if (!axios.isCancel(error)) {
dialog.error({
title: i18n.global.t('biaoti'),
// ...
})
}import { watch, ref } from 'vue'
setup() {
let mes = ref('会好的')
//第一种情况 监听ref定义的一个响应式数据
watch(mes, (qian, hou) => {
console.log('变化----', qian, hou)
}, {immediate: true})
}
setup() {
let mes = ref('会好的')
let mess = ref('我是谁')
//第二种情况 监听ref定义的多个响应式数据
watch([mes,mess], (qian, hou) => {
console.log('变化----', qian, hou)
},{immediate:true})
}
setup() {
let rea=reactive({
name:'我是谁',
obj:{
salary:20
}
})
//第三种情况 监听reactive定义的属性
watch(rea,(qian,hou)=>{
console.log('rea变化了',qian,hou)
})
}停止监听
const stop = watchEffect(() => {
/* ... */
})
// later
stop()const data = ref(null)
watchEffect(async onInvalidate => {
onInvalidate(() => {
/* ... */
}) // 我们在Promise解析之前注册清除函数
data.value = await fetchData(props.id)
})watch可以访问新值和旧值，watchEffect不能访问。
watchEffect有副作用，DOM挂载或者更新之前就会触发，需要我们自己去清除副作用。
watch是惰性执行，也就是只有监听的值发生变化的时候才会执行，但是watchEffect不同，每次代码加载watchEffect都会执行。
watch需要指明监听的对象，也需要指明监听的回调。watchEffect不用指明监视哪一个属性,监视的回调函数中用到哪个属性,就监视哪个属性。
推荐使用vscode，并且安装volar插件辅助开发
{{ numberRef }}
import { ref } from 'vue';
const numberRef = ref(0) // ===> Ref
const stringRef = ref("") // ===> Ref
interface IFoo {
bar: string
}
const fooRef = ref() // ===> Ref
{{ book1.bar }}
import { reactive } from 'vue';
interface IFoo {
bar: string
}
// 第一种
const book1 = reactive({ bar: 'bar' })
// 第二种
const book2: IFoo = reactive({ bar: 'bar' })
// 第三种
const book3 = reactive({ bar: 'bar' }) as IFoo
{{ fooComputed?.bar }}
import { computed, ref } from 'vue';
const numberRef = ref(0) // ===> Ref
const numberComputed = computed(() => numberRef.value) // ===> ComputedRef
interface IFoo {
bar: string
}
const fooRef = ref() // ===> Ref
const fooComputed = computed(() => {
return fooRef.value
}) // ===> ComputedRef
{{ fooComputedWritable?.bar }}
import { computed, ref } from 'vue';
interface IFoo {
bar: string
}
const fooRef = ref() // ===> Ref
const fooComputedWritable = computed({
get: () => {
return fooRef.value
},
set: (value) => {
fooRef.value = value
}
}) // ===> WritableComputedRef
{{ numberRef }}
import { ref, watch, watchEffect } from 'vue';
const numberRef = ref(0) // ===> Ref
interface IFoo {
bar: string
}
const fooRef = ref() // ===> Ref
watchEffect(() => console.log(fooRef.value?.bar))
watch(numberRef, () => {
console.log(`numberRef变化了`)
})
const stop = watch(fooRef, () => {
console.log(`fooRef变化了`)
}, {
deep: true
}) // 检查深度嵌套的对象或数组
stop(); // 停止侦听
import { nextTick } from 'vue';
nextTick(() => {
// ...
})
// 还可以使用 async/await
async () => {
await nextTick()
// ....
}
import Foo from "./Foo.vue"
import FooItem from "./FooItem.vue"
const someCondition = false
{{ foo }}
import { toRefs } from 'vue';
interface ICustomType {
foo: string,
bar: string
}
const props = defineProps({
foo: String, // 使用构造函数声明类型
fooMultiTypes: [String, Number], // 多个类型
fooCustomType: Object as () => ICustomType, // 自定义类型
fooCustomTypeWithRequire: {
type: Object as () => ICustomType,
required: true
}, // 自定义类型，必选
fooCustomTypeWithDefault: {
type: Object as () => ICustomType,
default: () => {
return {
foo: "foo",
bar: "bar"
}
}
}, // 自定义类型，带默认值
})
// 1. 可以在模板中使用声明的props，不需要用toRefs转换
// 2. 如果某一个值需要在setup中使用，则需要用toRefs转换下，然后把它解构出来
const {
foo, // ===> Ref | undefined
fooMultiTypes, // ===> Ref | undefined
fooCustomType, // ===> Ref | undefined
fooCustomTypeWithRequire, // ===> Ref
} = toRefs(props)
{{ foo }}
import { toRefs } from 'vue';
interface ICustomType {
foo: string,
bar: string
}
const props = defineProps<{
foo?: string,
fooWithRequire: string,
fooMultiTypes: string | number,
fooCustomType?: ICustomType,
fooCustomTypeWithRequire: ICustomType
}>()
// 泛型方式声明默认值，需要使用withDefaults 编译器宏
const propsWithDefault = withDefaults(
defineProps<{
fooCustomTypeWithDefault: ICustomType
}>(),
{
fooCustomTypeWithDefault: () => {
return {
foo: "foo",
bar: "bar"
}
}
})
// 1. 可以在模板中使用声明的props，不需要用toRefs转换
// 2. 如果某一个值需要在setup中使用，则需要用toRefs转换下，然后把它解构出来
const {
foo, // ===> Ref | undefined
fooWithRequire, // ===> Ref
fooMultiTypes, // ===> Ref
fooCustomType, // ===> Ref | undefined
fooCustomTypeWithRequire, // ===> Ref
} = toRefs(props)
const {
fooCustomTypeWithDefault, // ===> Ref
} = toRefs(propsWithDefault)
// FooBar.vue
// 使用 import 别名导入避免冲突
import { default as FooBarOther } from './others/FooBar.vue'
import {
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted,
onErrorCaptured,
onRenderTracked,
onRenderTriggered,
onActivated,
onDeactivated
} from "vue"
// 直接使用就好了
onMounted(() => {
// ...
})
import { provide } from 'vue';
export interface IUser {
name: string,
age: number
}
provide("name", "foo")
provide("user", {
name: "foo",
age: 23
})
import { inject } from 'vue';
import { IUser } from './Foo.vue';
const name = inject("name") // ===> string | undefined
const user = inject("user") // ===> IUser | undefined
import { createApp } from 'vue';
import App from './App.vue'
createApp(App).mount('#app')利用了 import 和 export 的导入导出语法，实现了按需打包模块的功能，项目打包后的文件体积明显小了很多
{{ number }}
增加
setup 函数还有两个参数，分别是 props 、context，前者存储着定义当前组件允许外界传递过来的参数名称以及对应的值；后者是一个上下文对象，能从中访问到 attr 、emit 、slots
reactive 方法是用来创建一个响应式的数据对象，该API也很好地解决了Vue2通过 defineProperty 实现数据响应式的缺陷
{{ state.count }}
.value 是在 setup 函数中访问 ref 包装后的对象时才需要加的，在 template 模板中访问时是不需要的，因为在编译时，会自动识别其是否为 ref 包装过的
{{ state1 }}
增加
{{ state2 }}
增加
ref 是对原数据的一个拷贝，不会影响到原始值，同时响应式数据对象值改变后会同步更新视图
视图未发生改变，原始值改变了，响应式数据对象的值也改变了，这说明 toRef 是对原数据的一个引用，会影响到原始值，但是响应式数据对象值改变后不会更新视图
ref是对传入数据的拷贝；toRef是对传入数据的引用ref的值改变会更新视图；toRef的值改变不会更新视图
toRefs ，其作用就是将传入的对象里所有的属性的值都转化为响应式数据对象，该函数支持一个参数，即 obj 对象
将 obj 作为参数传递给 reactive 生成响应式数据对象时，若 obj 的层级不止一层，那么会将每一层都用 Proxy 包装一次
shallowReactive
一个浅层的 reactive
{{ state.a }}
{{ state.first.b }}
{{ state.first.second.c }}
改变1
改变2
改变了第二层的 b 和第三层的 c，虽然值发生了改变，但是视图却没有进行更新；改变了第一层的 a 时，整个视图进行了更新；shallowReactive 监听了第一层属性的值，一旦发生改变，则更新视图
shallowRef
一个浅层的 ref，与 shallowReactive 一样是拿来做性能优化的
shallowReactive 是监听对象第一层的数据变化用于驱动视图更新，那么 shallowRef 则是监听 .value 的值的变化来更新视图的
{{ state.a }}
{{ state.first.b }}
{{ state.first.second.c }}
改变1
改变2
triggerRef ，调用它就可以立马更新视图，其接收一个参数 state ，即需要更新的 ref 对象
{{ state.a }}
{{ state.first.b }}
{{ state.first.second.c }}
改变
toRaw 方法是用于获取 ref 或 reactive 对象的原始数据的
{{ state.name }}
{{ state.age }}
改变
toRaw 方法从 reactive 对象中获取到的是原始数据
可以很方便的通过修改原始数据的值而不更新视图来做一些性能优化了
markRaw 方法可以将原始数据标记为非响应式的，即使用 ref 或 reactive 将其包装，仍无法实现数据响应式，其接收一个参数，即原始数据，并返回被标记后的数据
{{ state.name }}
{{ state.age }}
改变
被 markRaw 方法处理过后的数据是否还能被 reactive 包装成响应式数据
watch 和 watchEffect 都是用来监视某项数据变化从而执行指定的操作的
watch方法会返回一个stop方法，若想要停止监听，便可直接执行该stop函数
watchEffect
不需要手动传入依赖
每次初始化时会执行一次回调函数来自动获取依赖
无法获取到原值，只能得到变化后的值
const store = useStore()
Vue3的 getCurrentInstance().ctx
div元素
加群联系作者vx：xiaoda0423
仓库地址：https://github.com/webVueBlog/WebGuideInterview