10 2022 档案
摘要：computed 计算属性 计算属性就是当依赖的属性的值发生变化的时候，才会触发他的更改，如果依赖的值，不发生变化的时候，使用的是缓存中的属性值。 Vue3中有两种写法 如果计算属性不需要修改，可以直接使用函数形式 如果计算属性有被修改的情况，则使用对象包括getter和setter方法，get为读
阅读全文
摘要：一、watch 如果定义了reactive的数据（或者用ref包裹了引用类型等同开启reactive），想去使用watch监听数据改变，则无法正确获取旧值，并且deep属性配置无效，自动强制开启了深层次监听 watch 的三个参数 watch第一个参数,监听源 watch第二个参数,回调函数cb（n
阅读全文
摘要：<template> <div ref="myChartsRef" :class="className" :style="{ height: height, width: width }" :option="option"></div> </template> <script setup lang=
阅读全文
摘要：ref 的实现 ref实现响应式(基本类型)也是采用Object.definedProperty()来实现的 getter和setter ref实现响应式(对象类型)也是采用Proxy来实现（底层调用reactive方法） reactive 的实现 reactive是采用Proxy来实现 只能对引用
阅读全文
摘要：provide与inject 依赖注入 vue3中使用setup语法糖与vue2的provide与inject的区别还是挺大的，这里不讨论vue3的配置项写法。 vue2的可以参考学习之前的vue2的provide与inject文章。 :triangular_flag_on_post: 【Vue2】
阅读全文
摘要：Pinia Vue3中使用Pinia替代vuex 更改如下： 支持ts 体积小，压缩后1KB 去除 mutations，只有 state，getters，actions； 去除mutations后，actions 直接进行同步和异步操作修改数据 去除modules概念，只有store概念，每个sto
阅读全文
摘要：Vue3 hooks vue2里的mixins相似，但是mixins会组件的配置项覆盖。vue3使用了自定义hooks替代mixnins，hooks本质上是函数，引入调用。 封装自定义的hooks 将图片转化成base64 import { onMounted } from "vue"; inter
阅读全文
摘要：自定义指令directive 不同于vue2指令 bind inserted update componentUpdated unbind 1.vue3指令中的钩子函数 created 元素初始化的时候 beforeMount 指令绑定到元素后调用 只调用一次 mounted 元素插入父级dom调用
阅读全文
摘要：Vue3 model v-model 其实是一个语法糖 通过props 和 emit组合而成的 破坏性的变动，相较于vue2的变动(具体写法改变请看下面)： prop：value -> modelValue； 事件：input -> update:modelValue； v-bind 的 .sync
阅读全文
摘要：vue3自动引入 配置完成之后使用ref reactive watch 等 无须import 导入 可以直接使用 npm i unplugin-auto-import -D 注意不要安装最新版本。。。不然因为这个插件会提示其他报错。亲测0.6.0版本可以正常运行npm i unplugin-auto
阅读全文
摘要：父子组件间的传值 vue2的父子的传值和vue2的是基本一样的，只是在当我们在使用组合式api式，只是在子组件的写法不同。 defineProps 和 defineEmits 都是只能在 <script setup> 中使用的编译器宏。他们不需要导入，且会随着 <script setup> 的处理过
阅读全文
摘要：全局组件 没啥讲的，和vue2一样，常规是src下components文件夹下新建全局组件，然后去入口文件main.ts里注册全局组件。然后就能在全局使用了 import { createApp } from 'vue' import App from './App.vue' import rout
阅读全文
摘要：动态组件 <component>,一个用于渲染动态组件或元素的载体。 <component> 是vue内置特殊元素，和<slot>一样属于模板语法。但它们并非真正的组件，同时在模板编译期间会被编译掉。因此，它们通常在模板中用小写字母书写。 <component>要完成动态组件，要配合is一起完成。要
阅读全文
摘要：Vue3 组合式api 的生命周期 beforeCreate created，setup语法糖模式(组合式api)是没有这两个生命周期的，用setup去代替 onBeforeMount 获取不到DOM， onMounted可以获取DOM onBeforeUpdate获取的是更新之前的DOM，onUp
阅读全文
摘要：Mitt库 vue3取消了全局实例的$on,$off，所以可以借助轻量Mitt库实现 200bytes轻量库，进行组件通信，可以跨平台使用，支持批量监听和批量移除。 以下为vue3+ts项目中使用Mitt的方法 import { createApp } from 'vue' import App f
阅读全文
