摘要：vue3中的生命周期和vue2的生命周期不一样。主要差异就是多了一个setup钩子，取代了之前的creat相关的钩子。而且不再有destroy相关的生命周期了，取而代之的是unmount相关的生命周期。 生命周期如图所示： setup setup是vue3新出来的概念，是组合函数里面的一个生命周期钩 阅读全文

摘要：计算属性 我们一般使用计算属性来描述依赖响应式状态的复杂逻辑。 计算属性的用法 在vue3中计算属性的用法和在vue2中的不一样。 <template> <div>姓名:{{ fullname }}</div> </template> <script lang="ts"> //👀:需要什么导入什么 阅读全文

摘要：前面在介绍vue2的响应式原理中，我们已经介绍过vue数据响应式原理是通过数据劫持结合发布订阅者模式来实现的。其中在vue2中数据劫持是通过Object.defineProperty()来实现的，其中存在的问题是： 1. 新增、删除对象属性，视图不会更新2. 通过下标修改数组，视图不会更新 vue2 阅读全文

摘要：前面我们介绍过ref和reactive，toRef和toRefs。说白了toRef和toRefs可以看成是浅拷贝reactive对象的，那么我们这篇要介绍的shallowReactive和shallowRef就是浅层的reactive和ref。 回顾ref和reactive的区别 ref和react 阅读全文

摘要：toRaw和markRaw用来处理响应式对象和普通对象之间的转换的，其中toRaw是将响应式对象转成普通的原生对象，而markRaw是直接定义一个普通的原生对象，并且这个对象永远不能被转成响应式。 toRaw toRaw是返回reactive或readonly proxy的原始对象。也就是说将一个由 阅读全文

摘要：ref和reactive它们在用法上区别还是蛮大的，一个针对基本数据类型，一个针对复杂数据类型。而toRef和toRefs它们其实在用法上是很类似的，都是用来复制reactive里面的属性然后转成ref。因此既保留了响应式也保留了引用，也就是说它的复制其实是响应式ref和引用。要说区别的话那就是to 阅读全文

摘要：在vue2中定义数据在模板中使用的时候，只要不是那几种特殊情况，正常定义数据都是响应式的，但是在vue3中是不一样的，如果直接用=定义数据变量是不具有响应式的。 定义响应式数据 在使用ref和reactive定义响应式数据的时候，它们的使用场景是不一样的。 1. ref 使用方法 ⏰ 定义基本类型数 阅读全文

摘要：Vue 3.0中的setup函数是一个全新的选项，它是在组件创建时执行的一个函数，用于替代Vue2.x中的beforeCreate和created钩子函数。setup函数的作用是将组件的状态和行为进行分离，使得组件更加清晰和易于维护。 一、初识setup 1. 概念 setup函数是Vue 3.0新 阅读全文

摘要：一、安装 在创建vue项目之前，我们需要安装一些环境，比如：node, vue脚手架， npm等 1. 安装node 去官网下载：nodejs.org/en/ 下载最近版本，直接在首页下载就好 也可以下载之前的原始版本 nodejs.org/en/download… 如果之前已经安装过node, 可 阅读全文

摘要：vue.config.js文件 vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。 vue.config.js其实主要目的就是导出一个对象，这个对象里面有很多配置。 / 阅读全文

摘要：辅助函数 首先我们先来介绍几个辅助函数: mapState, mapGetters, mapMutations, mapActions。可以发现它们有一个共同点，就是map+组成部分，这些辅助函数的主要目的就是帮助我们快速获取对应部分的属性，这样在开发中就能省去很多重复代码，使用上更加简单。 map 阅读全文

摘要：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 状态管理模式 在普通组件中，一般是单向状态管理，也就是下图这种情况 但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏： 阅读全文

摘要：我们在实际开发的时候，需要和后端人员联调接口，这时候需要连接它们本地或环境上的服务器，如果直接访问服务器的时候，是会发生跨域问题的。配置代理是可以解决这种跨域问题的。 vue配置代理 vue配置代理都是在vue.config.js中配置的。有两种方式配置，这里我们假设服务器地址为http://loc 阅读全文

摘要：路由的使用就是根据匹配的路径信息将正确的组件渲染到模板中定义的的位置。其中使用路由有两种方式：第一种是声明式, 另外一种就是编程式路由。 路由使用的方式 1. router-link声明式路由 这种方式主要是通过router-link组件，配置to属性就可以实现路由的切换，router-link默认 阅读全文

摘要：路由其实就是一组映射关系（key-value）。其中key为路径，value可能就是function或组件。 路由的分类 路由分为前端路由和后端路由 1. 前端路由 前端路由中value是component，用于展示页面内容。 🐝 主要过程就是当浏览器的路径改变时，对应的组件就会展示。我们这里讲的 阅读全文

摘要：在vue中动画分为两种，一种是过渡效果，一种是动画效果。这些动画效果都可以通过transition标签来实现。 进入/离开 & 列表过渡 1. 单元素/组件的过渡 对于这类过渡效果，我们主要是通过transition来实现的。 <template> <div id="app"> <button @c 阅读全文

摘要：根据vue官方介绍，$nextTick的定义如下： 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 可以简单地理解成vue会在渲染完DOM节点之后再执行$nextTick里面的回调函数。 案例介绍 看完上面的介绍，你可能还不能理解$next到底是 阅读全文

摘要：1. 什么是插槽 插槽通俗地讲就是在封装组件的时候，对不确定部分的内容的一种占位。这个展位用slot标签表示，然后在具体使用过程中根据实际内容将其放在这个slot标签的位置。 <template> <div class="slot-wrapper"> <div class="titler-wrapp 阅读全文

摘要：插件其实就是vue的增强功能。通常用来为 Vue 添加全局功能。 常见功能 一般有下面几种功能 添加全局方法或者 property。如: vue-custom-element 添加全局资源: 指令/过滤器/过渡等。如 vue-touch 通过全局混入来添加一些组件选项。如 vue-router 添加 阅读全文

摘要：混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。 功能 混入可以将多个组件中的公共配置提取成一个混入对象。这样就可以实现代码的复用。 语法 混入和过滤器等配 阅读全文