weixin_49203377的博客

一、如何监听生命周期vue.3.0中把生命周期都抽取出去了，想监听哪一个 就用import导入哪一个，然后在setup里面去调用哪一个，然后给这个生命周期里面传一个回调，然后当执行这个生命周期方法的时候，就会执行这个回调二、如何通过ref来获取到界面上的元素2.1 我们知道在vue2.0中我们可以通过给元素添加ref=“xxx”，然后当组件被创建出来之后通过this.refs.xxx的方式来获取到这个元素，在vue3.0中我们也可以通过ref来获取元素，但是在vue.3.0中是没有refs.xxx的

对于一个中型的项目,文件结构有什么标准呢?有两点需要注意的:1.避免多层嵌套 2.不要过度思考1.帕斯卡命名方式:两个单词都大写2.因为项目是spa(单页面应用:一个html,渲染不同的div,就是只有一张Web页面的应用，或者说一个页面上切换内容,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序),所以自然会有不同的路由,在里面放置不同的路由,我们也可以理解为不同的页面比如home.vue(主页) login.vue(登录页面),所以上面的views也可以成为page

背景：开发过程中，往往需要点击某个按钮或者地方，出现一个弹框进行选择，当用户在下拉列表的范围内进行鼠标点击的时候，关闭已经打开的下拉列表，如下图所示解决思路：在DOM根节点上添加一个click事件，同时下拉列表阻止事件的冒泡，当响应这个点击事件的时候，说明在点击下拉列表范围外的点击（因为下拉列表内组织了事件的冒泡），就可以关闭已经打开的下拉列表（因为在一个完整的应用中，可能会有很多场景需要这种区域外点击关闭的功能，比较合适的做法是把点击事件的具体处理逻辑放到各个组件中去），那么如何让各个子组件响应根组

背景：点击下拉菜单外面，隐藏下拉菜单的功能，这是一个独特的逻辑功能，所以自然可以提取到一个函数中，这个函数的功能就是判断是否点击到了一个Dom元素的外面（里面用到的知识点：vue.3.0中setup中没有法使用this，也就是没法使用$refs对象，其实vue3.0中提供一个更简单的方法来获得一个dom节点，可以新建一个ref对象，然后返回出去，dom上的ref命名要和定义的一样，然后当这个dom真正挂载的时候，我们就可以从setup里定义的dropdownRef.value里面拿到这个dom节点了，set

slot用来传入自定义模板的内容

1.如何知道哪一部分成为一个组件呢，想想在代码编写代码的时候在什么情况下需要新建一个函数或者对象，思考方式是一样的，理想情况下一个组件只做一件事，如果这个组件功能不断丰富，就应该被分成更小的组件2.有了组建的层级和划分，是时候实现应用了，最简单的方式是先创建一个静态的版本，传入数据模型，渲染ui,但是没有任何交互，我们最好把这些过程解耦，因为创建一个静态版本，更多的是码代码 不是需要太多逻辑思考，添加交互更多的是逻辑思考，不是码代码，这个过程就像把积木拼在一起。整个应用是没有大脑的，只是积木的堆叠，这时候

回顾一下vue2.0的写法：从vue中导出了一个全局的对象Vue，然后上面进行一系列的配置一系列方法，然后再新建vue实例，然后再调用$mount方法把它挂载到一个DOM节点上。我们发现vue2.0的全局配置在一定程度上修改了vue对象的一系列属性或者全局状态，比如一系列操作或者配置，都是直接对vue这个对象进行操作，在一定程度上会有一些问题为了解决这个问题，vue3.0就推出了一个新的方法：createApp,第一个参数是你要挂载的根组件，生成一个app的实例，现在再设置任何的配置是在app的.

当函数用async包裹的时候，里面可以采用await的方式来操作 异步请求，返回结果会用promise进行自动的包裹

背景:当有很多需要用到请求的地方,每个地方都写一遍请求会很麻烦,所以可以写一个方法然后导出,供这些地方使用在使用的地方引入方法:然后return出去之后 页面上可以测试一下:页面上

1.ref和computed把javascript原始类型转换成响应式的对象2.ref一般传入的是原始类型，都是一个个分散的变量，分散在各处3.有什么办法把分散的变量包裹在一个对象中呢？一个新的API—reactive 和ref非常相似，也是一个函数，只不过里面的参数不是一个原始类型了，而是一个对象，reactive生成的响应式的对象 修改里面的值得时候，不用.value 了，直接当成对象的一项操作就好了，直接修改里面的值就可以了上面得图上发现了一个可以优化的点-----上面写了好多data,我

1.setup意思是准备的意思，在props、data, methods，和生命周期函数之前运行的，这个方法中没法访问到this,至于怎样访问，之后探讨2.setup中使用vue3.0中提供的api（ref）来提供一个响应式的对象（和data中一样的响应式对象，data中直接返回一个对象）,需要先引进，然后再使用，ref是一个函数，接收一个参数返回一个响应式的对象：在未来可以检测到改变，并且做出响应3.vue3.0的return 有意设计成这样，要精确控制哪些属性和方法被导出使用，可以更好的追踪引用

1.性能提升：打包大小减少41%；初次渲染快55%，更新快133%；内存使用减少54%2.Composition API（新推出的一系列的API的和集）:在2.0中遇到的问题，复杂组件的代码变的越来越难以维护，缺少在多个组件之间提取和复用逻辑的机制，现在的重用机制存在一些弊端，这些新的API包括ref和reactivecomputed和watch新的生命周期函数自定义函数-Hooks函数3.其他新增特性和内置组件Teleport-瞬移组件的位置Suspense-异步加载组件的新福音全局A

背景父组件页面上有一个按钮需要唤起antdesign的modal组件打开，modal组件关闭的时候，也要通知父组件思路1.父组件通过给子组件传值，子组件通过props接收，同时使用watch监听父组件传值的变化，然后动态的修改弹窗组件中visible的值 ，当子组件关闭弹窗的时候 通过emit发布通知父组件父组件：<mode-type :modalopen="modalopen" @modeClose="modeClose" ></mode-type> setup()

背景在使用vue3.0做后台管理系统的过程中，需要实现兄弟组件间的通信，一个组件触发事件，另一个组件接收到事件后执行某操作Vue3.0集成BusVue到3.0之后的Bus的方式变成了使用mitt。2.0是通过创建一个空的Vue来作为总线Vue3.0中使用emit来注册 bus.emit(‘事件’,参数)Vue3.0中使用on来监听，bus.on(‘taskLrowClick’, (e)=>{ console.log(e)；其他的逻辑操作 })emit和on是成对出现的，一个发起，一个接收