学习一些内容

vue相关面试题（持续更新中）_前端面试vue监听器-CSDN博客

1.父子组件传值

vue2传值方式总结 （十一种方法）_vue2父子组件传值-CSDN博客

• props
• $emits
• bus总线
• ref/refs
• vuex
• $parent
• sessionStorage
• 路由传值
• 祖传孙$attrs
• 孙传祖$listeners
• promise传参

2.$refs在通信的弊端

• 增加组件间的耦合度：导致组件间的依赖关系变得紧密，降低组件的复用性和维护性
• 扩展性差：在组件数量增加或者组件结构变得复杂的时候会变得难以管理，组件层次的不断变化就需要更改$refs来适应，增加代码的复杂性
• 依赖组件的生命周期：使用$refs必须在组件渲染完成之后才能访问，如果需要组件渲染之前进行事务处理是不可行的
• 难以进行跨级通信：refs属性只能访问直接子组件的或原生Dom元素，如果需要更深层次的跨组件通信，refs实现起来不友好

3.常见的修饰符

• .stop阻止冒泡
• .capture事件捕获
• .prevent阻止默认事件
• .once只执行一次
• .native监听组件根元素的原生事件
• .self当事件在该元素本身触发时触发回调
• .sync(怎么实现属性之间的双向绑定? )
  • 可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值
  • 一般，父组件通过props将值传递给子组件，子组件在通过$emit将值传给父组件，父组件通过事件监听获取子组件传过来的值，如果想要简化这里的代码，可以使用.sync修饰符，实际上就是一个语法糖。
  • <Child :money="dataApp" v-on:update:money="dataApp = $event"/> 就相当于 <Child :money.sync="dataApp"/> 

4.父子组件嵌套的生命周期执行顺序

• 挂载阶段：父组件先创建，子组件创建，子组件挂载，父组件挂载：父beforeCreate——created——beforeMount——子beforeCreate——created——beforeMount——mounted——父mounted
• 更新阶段：父beforeUpdate——子beforeUpdate——updated——父updated
• 销毁阶段：父beforeDestroy——子beforeDestroy——destroyed——父destroyed

5.计算属性和watch的区别

• 计算属性有缓存，当缓存的依赖发生变化时，重新计算，返回一个返回值
• 计算属性有getter和setter,默认getter,监听属性不分set和get
• 计算属性用来同步执行计算数据，监听属性可以有异步事件
• 计算属性主要解决模版中放入过多的逻辑导致不好维护的问题

计算属性里面可以写异步逻辑吗（不可以，因为里面有return）

6.vue里首屏加载的优化?框架的角度实现

• 路由懒加载、图片懒加载：只有在路由被使用到的时候才进行懒加载，提升页面的加载的速度
• 异步组件：使用import+组件名+回调函数的形式加载你需要进行异步加载的组件
• 打包时使用代码分割：该方法可以减少打包的体积，尤其是js文件的代码；主要是针对首屏需要用户主动去触发之后才会产生回调的js代码进行代码分割，这样就能极大的减少打包的体积，提升页面渲染的速度；将按需加载的功能单独拆分到一个文件中进行管理，在需要按需加载的位置使用function+return+import的方式进行引入即可
• 服务端渲染、静态站点生成：服务-将浏览器需要渲染的HTML代码在服务器端直接预先渲染成html字符串，然后再作为服务端响应数据返回给浏览器，最后在浏览器将静态html激活渲染即可；静态-可能服务端渲染的页面数据是重复的，所以不需要每次都重新进行渲染，所以可以将其预先渲染为静态的html文件交给服务器托管，然后需要的时候直接拿去即可，就减少了再次进行服务端渲染的时间。

7.页面刷新后，store里的state是否存在

不存在，如何持久化：使用本地存储，但是要考虑到本地存储大小的限制，并确保保存的数据不包含敏感信息，也可能会导致一些性能方面的影响。

8.自定义组件v-model用来干什么

对于 自定义组件，v-model的使用方法和普通html元素稍有不同，在父组件中，我们可以用v-model指令将子组件的一个属性与父组件的数据进行绑定。同时，子组件需要通过$emit方法来触发一个名为input的自定义事件，将子组件的数据更新给父组件。

9.vue2和vue3的区别，优势

• 数据双向绑定原理发生了改变：vue2是利用Object.defineProperty()对数据进行劫持结合发布者订阅者的模式实现。Vue3使用Proxy API对数据代理
• Vue3支持碎片（Fragment）：组件可以拥有多个根节点
• Vue3使用Composition API：相比原来的Options API分割了不同的属性：data,methods,等；代码会更加简便整洁
• 生命周期钩子不同：setup开始创建组件之前，在beforeCreate和created之前执行，创建的是data和method；onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,若组件被keep-alive标签包含，则会多出下面的两个钩子函数：onActivated,onDeactivated
• 父子传参不同：setup函数特性，不能使用this，
• Teleport:vue3提供Teleport组件可将部分DOM移动到Vue app之外的位置，比如常见的dialog弹窗，
• diff算法优化
• 打包优化
• TypeScript支持

10.组合式api? ref和reactive 区别

是一些列api的集合，使我们可以使用函数而不是声明选项的方式书写vue组件，主要包含三类api：

• 响应式api:例如ref()和reactive()，使我们可以直接创建响应式状态、计算属性和侦听器
• 生命周期钩子：例如onMounted(）和 onUNmounted()
• 依赖注入：例如provide()和inject()

ref和reactive区别

都是响应式数据绑定方式，ref适用于简单的响应式数据，而reactive则适用于复杂对象或数组的响应式数据。

• 数据类型不同：ref用于基本数据类型的包装，reactive可以用于包装对象或数组等复杂类型数据
• 访问方式不同：ref可以通过.value属性来访问其实际值，reactive可以直接访问其属性或调用其方法
• 内部实现不同：ref通过Object.defineProperty()的get和set实现数据代理，reactive使用Proxy实现数据代理，并且通过Reflect操作源对象内部的数据，如果要让对象的某个元素实现响应需要用到toRefs

11.微信小程序实现对数据的监听？实现对父子组件的通信

【微信小程序】基础篇 -- 自定义组件 - 数据监听器 - 案例 （三十五）_微信小程序数据监听-CSDN博客

微信小程序父子组件之间通信的 3 种方式_微信小程序父子组件通信-CSDN博客

属性绑定properties,事件绑定triggerEvent，获取组件实例selectComponent

项目：

项目描述：

主要负责：

如何实现用户的鉴权？微信授权登录？如何实现支付？

mpVue 微信小程序授权登录流程（即登录鉴权流程）及获取手机号一键登录教程（getPhoneNumber使用）——新增源码地址_微信小程序手机号一键登录-CSDN博客

1.登录：调用login()方法，获取临时凭证code，将此临时凭证发送到后端，后端通过临时凭证code，调用微信接口服务获取当前微信用户的唯一标识openid,可以凭借此openid知道哪一个用户在进行登录操作。

2.获取用户信息：uni.getuserInfo()和uni.getuserProfile目前两个接口都无法获取用户信息，只能获取到默认用户信息，名称为‘微信用户’，头像为灰色用户头像。解决方案：让用户自行上传修改信息。

代码管理？git？svn？git管理分支？出现线上问题如何操作分支

后端如何提供接口文档

项目中遇到问题

如何保证多端显示效果的一致性

项目的迭代周期