前端-CV全粘工程师

在Vue 2时代，选项式API（Options API）通过data、methods、computed等固定区块组织代码，但随着组件复杂度上升，同一功能的逻辑往往分散在不同区块，形成难以维护的“面条代码”。Vue 3的组合式API（Composition API）通过逻辑关注点组织代码，彻底改变了这一局面。组合式API不是对选项式API的否定，而是提供了更强大的代码组织能力。优势：同一功能的响应式数据、计算属性和方法聚合在一起，支持逻辑复用。Vue 3组合式API：告别“面条代码”的响应式编程实践。

因为vant中的弹窗组件都会有个默认参数，打开弹窗时禁止页面滚动，这个可以解决滚动穿透的问题，但是像我们这种弹窗中有地址选择的就会出现地址无法选择的bug。H5页面直接在浏览器打开是没有任何问题的，但是内嵌到小程序中就会出现，目前已出现在抖音，快手，小程序中，其他的没有试。这个bug出现得同时具备几大要素：1.内嵌H5，2，地址选择之前有使用过弹窗,设置lock-scroll为false。设置lockScroll为false。1.Overlay 遮罩层。2.Dialog 弹出框。

对数组和对象进行不当的修改：对于数组和对象，只有使用 Vue 提供的一些方法（如 push()、pop()、splice()、set() 等）进行修改才会触发响应式更新。使用非响应式对象或属性：在 Vue 中，只有使用 Vue 实例的 data 对象中的属性或使用 Vue.set() 方法添加的属性才是响应式的。在使用 Vue 的异步更新机制（如 nextTick()）时，应该避免在回调函数中对数据进行修改，否则可能会出现响应式丢失的问题。对数组和对象只使用 Vue 提供的一些方法进行修改。

方法中通过判断浏览器类型，使用不同的下载方式。对于IE浏览器，使用。方法，生成一个不同于原始文件URL的URL，然后调用。方法打开一个新窗口下载；对于其他浏览器，使用。方法用于创建一个下载链接并模拟点击下载，

类的源码是最为关键的部分，它使用了Vue 3的响应式系统来实现了状态的管理和更新。同时，它还提供了一些方便的API来处理常见的状态管理需求，例如模块化、订阅等。Vuex采用了全局单例模式，通过一个store对象来管理所有的状态，组件通过store对象来获取和修改状态。Pinia则采用了分离模式，即每个组件都拥有自己的store实例，通过在组件中创建store实例来管理状态。Pinia的源码相对较为简单，主要是通过Vue的provide/inject实现store实例的分发和共享。方法来实现数据的传递。

如果 obj 尚未被代理，则使用 Proxy 对象创建一个新的代理对象 observed，并缓存该代理对象到原始对象 obj 的 __v_proxy 属性中，并返回 observed。模板语言的改进：Vue3中提供了更加灵活的模板语法，并增加了一些新特性，例如：v-model的多个绑定值、v-model修饰符的增加、el和ref的区别等。这可以通过 Proxy 来实现。在原理上，Vue3 会为数据对象中的每个属性创建一个 Proxy 对象，并通过该对象的 get 和 set 方法来实现数据对象的双向绑定。

以上就是在 Vue 3.0 中使用 vue-router 的详细步骤。

在开始创建vue3.0 + vite + pinia + router项目之前，请确保您已安装了npm。在安装过程中，您将被要求选择所需的特性集。确保选择Vue作为框架选项，并将管理状态的选项设置为Pinia。现在，您已经成功创建了一个使用Vue3.0和Vite的项目，并且集成了Pinia和路由。

在 Pinia 中，我们通过actions: {},},},})在这个例子中，我们定义了一个名为的 store，其中包含一个状态属性count和两个 action 方法increment和decrement。以上就是如何引入和使用 Pinia 的详细介绍。相比 Vuex 和其他类似的状态管理库，Pinia 更加轻量化且易于使用，适合中小型 Vue 项目的状态管理。

这个属性允许我们在应用的实例上注册全局方法或属性。总之，Vue 3 中注册全局方法相当简单，只需使用。的全局方法，然后在应用实例上挂载了我们的根组件。方法来创建一个应用实例，并使用该实例的。在我们的应用中的任何组件中，都可以使用。在 Vue 3.0 中，你可以使用。方法来注册全局组件。这样就可以成功注册并使用全局组件了。在 Vue 3 中，我们可以使用。在组件的方法中，我们可以使用。在应用入口文件中（一般为。在上面的代码中，我们使用。在组件代码文件中，使用。在模板中使用注册的组件。方法来注册全局组件。

可以使用Vue的自定义指令来实现监听滑动方向与距离。});// 横向滑动// 右滑} else {// 左滑} else {// 纵向滑动// 下滑} else {// 上滑})})然后，在需要监听滑动事件的元素上使用v-swipe指令，并传入一个函数作为参数，该函数接收两个参数，分别为滑动方向和距离。console . log(` 滑动方向： ${ direction } ，滑动距离： ${ distance } `);

在mounted钩子函数中创建IntersectionObserver实例，并监听容器底部的元素。在handleObserve回调函数中判断当前元素是否可见，如果可见则触发加载更多数据的逻辑。是一个可以异步观察目标元素与其祖先或视窗交叉状态的API。当目标元素进入或退出视口时，会触发IntersectionObserver的回调函数。在 Vue 中监听触底可以通过使用。// TODO: 加载更多数据。

uniapp 如何优化

【代码】【JS 阻止滑动穿透】

项目场景：uniapp套壳APP内嵌H5。

返回顶部一般可以用a标签得锚点和html元素的api我这里主要用到scrollIntoView。