技术总结 #

// 强制禁止用户修改微信客户端的字体大小
<script>
       (function() {
           if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
               handleFontSize();
           } else {
               if (document.addEventListener) {
                   document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
               } else if (document.attachEvent) {
                   document.attachEvent("WeixinJSBridgeReady", handleFontSize);
                   document.attachEvent("onWeixinJSBridgeReady", handleFontSize);  }
           }
           function handleFontSize() {
               // 设置网页字体为默认大小
               WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
               // 重写设置网页字体大小的事件
               WeixinJSBridge.on('menu:setfont', function() {
                   WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
               });
           }
       })();
</script>

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

ClipboardEvent<T = Element> 剪贴板事件对象

DragEvent<T = Element> 拖拽事件对象

ChangeEvent<T = Element> Change 事件对象

KeyboardEvent<T = Element> 键盘事件对象

MouseEvent<T = Element> 鼠标事件对象

TouchEvent<T = Element> 触摸事件对象

WheelEvent<T = Element> 滚轮事件对象

AnimationEvent<T = Element> 动画事件对象

TransitionEvent<T = Element> 过渡事件对象

const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    double: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    }
  }
})

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function increment() {
    count.value++
  }

  return { count, increment }
})

Vue 3引入了一整套新的API，用于替换Vue 2中的选项和mixins，包括了一些新的Hooks API，可用于处理逻辑和数据的复用。

1. useState

作用：在组件中声明响应式状态。
语法: const [state, setState] = useState(initialState)

示例：

​```javascript
import { defineComponent, onMounted, useState } from 'vue'

export default defineComponent({
  setup() {
    const [count, setCount] = useState(0)

    const increment = () => {
      setCount(count.value + 1)
    }

    onMounted(() => {
      console.log('Mounted')
    })

    return {
      count,
      increment
    }
  }
})
```

2. useEffect

作用：在组件生命周期的特定时间调用副作用，比如API请求、订阅等。
语法: useEffect(callback: () => void, deps?: any[])

示例：

```javascript
import { defineComponent, onMounted, useState, useEffect } from 'vue'
import axios from 'axios'

export default defineComponent({
  setup() {
    const [users, setUsers] = useState([])

    useEffect(() => {
      axios.get('https://jsonplaceholder.typicode.com/users').then(res => {
        setUsers(res.data)
      })
    }, [])

    return {
      users
    }
  }
})
```

3. useRef

作用：在组件之间共享可变值。
语法: const refContainer = useRef(initialValue)

示例：

```javascript
import { defineComponent, onMounted, useRef } from 'vue'
import Child from './Child.vue'

export default defineComponent({
  setup() {
    const nameInput = useRef('')

    const handleFocus = () => {
      nameInput.value.focus()
    }

    return {
      nameInput,
      handleFocus
    }
  },
  components: {
    Child
  }
})
```

```vue
<template>
  <div>
    <input type="text" ref="nameInput" />
    <button @click="handleFocus">Focus</button>
    <Child ref="child" />
  </div>
</template>
```

4. useContext

作用：在组件树中获取全局状态或方法。
语法: const contextValue = useContext(context)

示例：

```javascript
import { createContext, defineComponent, useContext } from 'vue'

const UserContext = createContext()

const Parent = defineComponent({
  setup() {
    return {
      user: {
        name: 'Tom',
        age: 18
      }
    }
  },
  provide() {
    return {
      user: this.user
    }
  },
  components: {
    Child
  }
})

const Child = defineComponent({
  setup() {
    const user = useContext(UserContext)

    return {
      user
    }
  }
})

export default defineComponent({
  setup() {
    return {
      UserContext
    }
  },
  components: {
    Parent
  }
})
```

```vue
<template>
  <UserContext.Provider :value="user">
    <Parent />
  </UserContext.Provider>
</template>
```

5. useWatch

作用：监听变量或prop的变化。
语法: useWatch(source: Ref | () => any | (() => any)[], cb: (newVal: any, oldVal: any) => void, options?: WatchOptions)

示例：

```javascript
import { defineComponent, useWatch } from 'vue'

export default defineComponent({
  props: {
    name: String
  },
  setup(props) {
    useWatch(() => props.name, (newVal, oldVal) => {
      console.log('Name changed:', newVal, oldVal)
    })

    return {
      props
    }
  }
})
```