MCong’s Blog 👋🏼

useID—组件内唯一的id(个人感觉没什么卵用) 使用方法： // app.vue import { useId } from "vue"; const id = useId() console.log('useId======>',id) // 子组件-Hello World import { useId } from 'vue' const id = useId() console.log('useId子组件======>',id) ​ 注意事项 当前实例下的组件唯一的ID，如果有多个实例，则全部都是从0开始 // 当有两个createApp的实例，则每一个useId都会从0开始 createApp({ setup() { onMounted(() => { console.log(useId(),'app-setup中的id') }) return () => h('div','hello World') } }).mount('#app') ​ const app1 = createApp({ setup() { onMounted(() =....

Vue2 和 Vue3 中监视数据的区别 Vue2 Object.defineProperty 劫持数据针对于每个属性去劫持, 如果数据复杂, 需要递归劫持, 成本高, 效率低对于数组数据的劫持/监视, 有问题 ==>> $set Vue3 Proxyproxy对于整个对象数据的劫持 对象内部的任意属性发生变化 都会经过外层的proxy, 无需递归, 效率高proxy对于数组数据的更新也没问题 底层代码实现： let data = { name: "lis", age: 20, sex: "男" } // vue2.0实现 使用Object.defineProperty进行数据劫持 for(let key in data){ let temp = data[key] Object.defineProperty(data, data[key], { get(){ return temp }, set(value){ temp = value } }) } // vue3.0实现 使用Proxy 进行数据的代理 let newData = new Proxy(data, {....