m0_56713342的博客

/指令所在的dom元素插入到dom树中执行这个函数。//focus(el){ //el指令所在的dom。Vue.directive('自定义指令名',{// //el就是指令所在元素即文本框。const 自定义指令名={

腾讯云：产品--->存储--->对象存储--->开始使用--->存储桶列表--->创建存储桶---->配置管理--->基础配置---->基本信息--->存储桶信息，所属地域，安全管理，跨域访问CORS设置，访问管理，新建一个密钥，并保存该密钥的信息，SecretId，SecretKey。上传头像，首先要有一个可以存储头像的服务器，在腾讯云上注册账号，建一个可以上传头像的存储桶，将头像上传到此即可。将以上4个信息填上即可完成头上上传。

语法不同（组合式api)、体积更小、按需引入、proxy实现响应式、diff优化，Vue3与ts配合等。Vue3 Vue基础语法 +Vue-router+vuex(pinia)+组件库。Vue2 响应式原理：Object.defineProperty。

ts有强大的类型系统，我们可以在编译期间发现错误，减少运行时的隐患，js能在浏览器中执行，浏览器只能执行js，ts要编译成js才能执行。js 是弱类型，ts是强类型，ts是js的超级。

【代码】pinia实现todos。

权限有3类：主页鉴权，访问权限，操作权限RBAC-Role Based Access Control基于角色的权限控制。

shallowReactive：浅层响应->第一层属性变化会触发更新，不是第一层属性不会触发更新。shallowRef：浅层响应->整体重新赋新值才会触发更新，只改变单个属性不会触发更新。

注意：toRefs将多个数据转成响应式，只是确保第一层数据为响应式，如果是不同层的数据，仅第一层数据为响应式。toRefs:将多个数据转成响应式。toRef:将数据转成响应式。

局部组件，就是vue的导入注册使用，只不过再setup()语法糖下，不需要注册组件。全局组件是在main.js中注册的，通过app实例.component创建。使用 App.vue。

Store 是用定义的，它的第一个参数要求是一个独一无二的名字定义store仓库，其中只有state，getters，actions三个模块，并导出store实例，返回值是创建store实例的方法第一个参数，store的唯一标识， 类似于模块第二个参数， 对象描述仓库可以提供state，getters，actions返回值 是创建store实例的方法规范 userXXXXStore//1.定义用户仓库//defineStore() 创建store实例的函数。

watch 会明确监听某一个响应数据，而 watchEffect 则是隐式的监听回调函数中响应数据。watch 在响应数据初始化时是不会执行回调函数的， watchEffect在响应数据初始化时就会立即执行回调函数。watch 和 watchEffect 都能监听响应式数据的变化，不同的是它们监听数据变化的方式不同。2、 不同点 ：watchEffect回调函数立即调用、对回调函数依赖的数据隐式监控、默认深度监控。1、 相同点 ：都可以对数据进行侦听。2 回调函数依赖的数据都会被监控。

watch监控ref数据，深层次监控属性 ，必须手动开启deep:true，不能省略，省略相当于默认 false。watch监控reactive数据，假如需要深层次监控属性需要手动开启deep:true或省略。3.立刻调用 (第三个参数位一个对象，里面可放immediate:true)4.深度监听 (第三个参数位一个对象，里面可放 deep:true)第一个参数监听的数据构成的数组 ​ 第二个参数回调函数。第一个参数：监听的数据 第二个回调函数。基于现有的数据计算出新的数据。1 . 侦听一个数据。

不同点 : reactive只支持引用数据类型,ref支持基本和引用数据类型。ref通过.value获取数据，reactive不需要.value。2、想获取谁，就再谁的标签上添加ref，其ref=‘ref对象’使用reactive响应式数据的时候，不需要.value。reactive函数创建响应式数据，只支持引用数据类型。ref创建响应式引用数据类型低层依赖reactive。ref函数创建响应式数据，返回值是一个对象。1、创建ref对象，将该对象作为ref的值。获取ref创建数据的值要加上.value。

script标签上写setup属性，不需要export default {} setup() 都可以省。setup() 组合式api的入口，执行的时机比beforCreate还早。创建每个属性或方法时也不需要return。创建多个数据就要return多个数据。导入某个组件时也不需要注册。

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、 交互等改进和追加功能达到更好的用户体验。一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

/消除行内块元素三像素问题。margin-left:-（自身宽度的一半）;margin-top:-(自身高度的一半）;将父元素设置为display:flex;来设置元素的垂直水平居中。将父元素设置为相对定位。将父元素设置为相对定位。将父元素设置为相对定位。子元素的宽高自己设置。

【代码】手写promise。

this.$router.push('/路径?参数1=值 & 参数2=值')组件中获取：this.$route.params.名字（id）组件中获取：this.$route.query.名字(id)组件中获取参数：this.$route.params.id。this.$router.push('/路径/ 参数')组件中获取参数：this.$route.query.id。完整写法：this.$router.push({参数1=值 & 参数2=值。规则： path：/路径/:名字（id）导航：1.声明式导航。

组件通信方式有：vuex，ref，父子通信（父传子、子传父），兄弟通信(eventBus)， 祖先后代通信（依赖注入）子组件：子组件内通过：$emit('自定义事件名‘，参数1，参数2')父组件内：在子组件标签上设置自定义事件 @自定义事件名=" 函数"祖先组件：通过provide提供数据，导入 注册父组件。：父组件内：在子组件标签上设置自定义属性传递数据，子组件内：子组件通过props接收数据。子组件标签绑定单击事件触发父组件的方法。接受数据（使用数据）方，通过$on事件。父组件 导入 注册孙子组件。