掌握这些 Vue 和 JS 知识，前端开发不再迷茫！

new Proxy(data, {  // 拦截读取属性值  get (target, prop) {      return Reflect.get(target, prop)  },  // 拦截设置属性值或添加新属性  set (target, prop, value) {      return Reflect.set(target, prop, value)  },  // 拦截删除属性  deleteProperty (target, prop) {      return Reflect.deleteProperty(target, prop)  }})

beforeDestroy 修改成 beforeUnmountdestroyed 修改成 unmounted   

<template>  <input    :value="props.modelValue"    @input="emit('update:modelValue', $event.target.value)"  /></template><scriptsetup>const props = defineProps(['modelValue'])const emit = defineEmits(['update:modelValue'])</script>

<template>  <objRangev-model="range" /></template><scriptsetup>import { ref } from 'vue'
const range = ref([])    </script>

<!-- objRange --><template></template><scriptsetup>import { defineEmits, defineProps } from 'vue'const props = defineProps({  // v-model 默认绑定到 modelValue 属性  modelValue: {    type: Array,    default: () => []  }})
// 定义事件抛出 update:xxx 中的 xxx 是对应绑定的属性const emits = defineEmits(['update:modelValue'])
// 改变值const changeValue = () => {  const newValue = ['GRP-90843']  // 将 update:xxx 事件抛出，实现数据双向绑定   emits('update:modelValue', newValue)}</script><stylelang="scss"scoped></style>

<template>  <objRangev-model:range="range"v-model:area="area" /></template><scriptsetup>import { ref } from 'vue'
const range = ref([])    const area = ref([])</script>

<!-- objRange --><template></template><scriptsetup>import { defineEmits, defineProps } from 'vue'const props = defineProps({  range: {    type: Array,    default: () => []  },  area: {    type: Array,    default: () => []  }})// 将对应的 update:xxx 抛出即可const emits = defineEmits(['update:range', 'update:area'])</script>

<template> <keep-alive>  <router-view></router-view> </keep-alive></template> 

<template>  <keep-alive>    <component:is="currentComponent"></component>  </keep-alive></template> 

// 定义响应式变量const name1 = ref('name1') // 普通变量const name2 = 'name2'// reactive 定义响应式变量const obj = reactive({ name: 'name3' })
// isRef 是判断变量是否为 refconsole.log(isRef(name1), isRef(name2), isRef(obj)) // true false false
// unref 如果是 ref 返回其内部的值，反之返回参数本身console.log(unref(name1), unref(name2), unref(obj)) // name1 name2 { name: 'name3' }(参数本身)
// toRef 针对响应式数据的单一属性const name3 = toref(obj, 'name')// 此时修改 name3；会影响到 obj.name// 同理修改 obj.name；也会影响到 name3
// toRefs 针对响应式数据的所有属性// 若使用下述代码，解构出来的属性是没有响应式的const { name4: name } = obj// 正确的解构应该是const { name5: name } = toRefs(obj)// 此时修改 name5；会影响到 obj.name// 同理修改 obj.name；也会影响到 name5
// toRefs 也可以用于解构 prop，确保解构出来的属性有响应式const {} = prop

// toRaw 可以返回 reactive、readonly、shallowReactive 创建的代理所对应的原始对象const original = { count: 0 }const reactiveData = reactive(original)
const rawData = toRaw(reactiveData) // 获取原始对象
rawData.count += 10 // ❌ 修改原始对象，不会触发更新

<template>  <div>    <p>原始对象: {{ rawObject }}</p>    <p>响应式对象: {{ reactiveObj }}</p>    <p>只读对象: {{ readonlyObj }}</p>    <p>只读包裹响应式对象: {{ readonlyReactiveObj }}</p>  </div></template>
<scriptsetup>import { reactive, readonly, isProxy, isReactive, isReadonly } from 'vue'
// 原始对象const rawObject = { name: 'Alice' }
// 响应式对象const reactiveObj = reactive(rawObject)
// 只读对象（直接包裹原始对象）const readonlyObj = readonly(rawObject)
// 只读包裹响应式对象const readonlyReactiveObj = readonly(reactive({ age: 25 }))
// 检测函数const check = (obj, name) => {  console.log(`----- ${name} -----`)  console.log('isProxy:', isProxy(obj))  console.log('isReactive:', isReactive(obj))  console.log('isReadonly:', isReadonly(obj))}
// 执行检测check(rawObject, '原始对象')          // 全部返回 falsecheck(reactiveObj, '响应式对象')       // isProxy: true, isReactive: true, isReadonly: falsecheck(readonlyObj, '只读对象')         // isProxy: true, isReactive: false, isReadonly: truecheck(readonlyReactiveObj, '只读包裹响应式对象') // isProxy: true, isReactive: true, isReadonly: true</script>

<template>  <div>    <h3>ref vs shallowRef</h3>    <p>ref: {{ refValue.count }}</p>    <p>shallowRef: {{ shallowRefValue.count }}</p>    <button @click="changeRefInner">修改 ref 内部属性</button>    <button @click="changeShallowRefInner">修改 shallowRef 内部属性</button>    <button @click="changeShallowRefValue">替换 shallowRef 整个值</button>
    <h3>reactive vs shallowReactive</h3>    <p>reactive.nested: {{ reactiveObj.nested.count }}</p>    <p>shallowReactive.nested: {{ shallowReactiveObj.nested.count }}</p>    <button @click="changeReactiveNested">修改 reactive 嵌套属性</button>    <button @click="changeShallowReactiveNested">修改 shallowReactive 嵌套属性</button>    <button @click="changeShallowReactiveValue">替换 shallowReactive 整个值</button>
  </div></template>
<scriptsetup>import { ref, shallowRef, reactive, shallowReactive } from 'vue'
// ----------------------// 1. ref vs shallowRef// ----------------------const refValue = ref({ count: 0 }) // 深层响应式const shallowRefValue = shallowRef({ count: 0 }) // 仅监听 .value 变化
const changeRefInner = () => {  refValue.value.count++ // 触发更新}
const changeShallowRefInner = () => {  shallowRefValue.value.count++ // ❌ 不会触发更新}
const changeShallowRefValue = () => {  shallowRefValue.value = { count: 100 } // ✅ 触发更新}
// ----------------------// 2. reactive vs shallowReactive// ----------------------const reactiveObj = reactive({  nested: { count: 0 } // 深层响应式})
const shallowReactiveObj = shallowReactive({  nested: { count: 0 } // 仅顶层响应式})
const changeReactiveNested = () => {  reactiveObj.nested.count++ // ✅ 触发更新}
const changeShallowReactiveNested = () => {  shallowReactiveObj.nested.count++ // ❌ 不会触发更新}const changeShallowReactiveValue = () => {  shallowReactiveObj.nested = { count: 1 } // ✅ 触发更新}</script>

<template></template><scriptsetup>defineProps({    theme: {        type: String,        default: 'dark',        required: true,        validator: (value) => {            return ['dark', 'light'].includes(value)        }    }})</script>

<template>  <Suspense>    <!-- 默认插槽：显示异步组件 -->    <template #default>      <AsyncComponent />    </template>
    <!-- fallback 插槽：加载中显示的内容 -->    <template #fallback>      <div>加载中...</div>    </template>  </Suspense></template>
<scriptsetup>import { defineAsyncComponent } from 'vue'
// 定义一个异步组件const AsyncComponent = defineAsyncComponent(() =>  import('./AsyncComponent.vue'))</script>

<template>  <divclass="child-component">    <!-- 定义插槽 -->    <slot></slot>  </div></template>
<stylescoped>.child-component {  border: 1px solid #ccc;  padding: 10px;}
/* 选择插槽内带有.container 类的元素 */::v-slotted(.container) {  background-color: lightyellow;  border: 1px solid #ffcc00;  padding: 15px;}</style>

<template>  <div>    <!-- 使用子组件并向插槽传递内容 -->    <ChildComponent>      <divclass="container">        <p>这是插槽内.container 里的内容</p>      </div>      <p>这是插槽内普通的内容</p>    </ChildComponent>  </div></template>
<script>import ChildComponent from './ChildComponent.vue'
export default {  components: {    ChildComponent  }}</script>

// 方法一const arr1 = [...new Set(originalArr)]
// 方法二（缺点 无法过滤 NaN） [NaN].indexOf(NaN) = -1const arr2 = originalArr.fillter((item, index) => originalArr.indexof(item) === index)
// 方法三const arr3 = originalArr.reduce((acc, cur) => acc.includes(cur) ? acc : [...acc, cur], [])

// 浅拷贝
// 方法一 扩展运算符const obj = { ... originalObj }
// 方法二 Object.assignconst obj = Object.assign({}, originalObj)
// 方法三 for in for (let key in originalObj) {    if (originalObj.hasOwnProperty(key)) {        obj[key] = originalObj[key]    }}
// 深拷贝
// 方法一：缺点 无法拷贝函数const obj = JSON.parse(JSON.stringify(originalObj))
// 方法二 递归function deepClone(originalObj) {    if (obj === null || typeof originalObj != 'object') return originalObj
    const clone = Array.isArray(originalObj) ? [] : {}
    for(let key in originalObj) {        if (originalObj.hasOwnProperty(key)) {            clone[key] = deepClone(originalObj[key])        }    }
    return clone}

let arr2 = [1, 2, 3, 4, 5]let arr3 = [3, 4, 1, 2]
// 交集console.log(arr2.filter(item => arr3.includes(item)))
// 并集console.log(Array.from(new Set([...arr2, ...arr3])))
// arr2 差集console.log(arr3.filter(item => !arr2.includes(item)))
// arr3 差集console.log(arr2.filter((item) => !arr3.includes(item)))

function flatter(arr) {  if (!arr.length) return;
  return arr.reduce((pre, cur) => {    return Array.isArray(cur) ? [...pre, ...flatter(cur)] : [...pre, cur]  }, []);}
// 测试let arr = [1, 2, [1, [2, 3, [4, 5, [6]]]]]console.log(flatter(arr));

/* 方法一 flex 布局 */ .container {    display: flex;    justify-content: center;    align-items: center;}

/* 方法二 绝对定位 + transform */ .container {    position: relative;}
.child {    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%)}

/* 方法三 绝对定位 + margin */.container {    position: relative;}
.child {    position: absolute;    left: 0;    right: 0;    top: 0;    bottom: 0;    margin: auto;}
/* 方法四 表格布局 */.container {    disaply: table-cell;    vertical-align: middle;    text-align: center;}
.child {    display: inline-block;}

if (false) {    let value = 1}console.log(value); // Uncaught ReferenceError: value is not defined 

console.log(typeof value); // Uncaught ReferenceError: value is not definedlet value = 1;

var Foo = () => {};console.log(Foo.prototype); // undefined