XunLin233的博客

如果我们在Vue3中要使用setup的语法糖，就需要使用两个script标签，一个用于设置组件的name属性，一个用于编写setup中的代码。因此我们可以使用插件来进行简化，将name作为script标签的属性来设置组件名。但是我们有觉得光是因为一个name属性就多写一个script标签有点麻烦了。

如果需要修改样式，直接查找到该HTML元素上的class类进行修改样式，修改的时候要使用!important 进行覆盖。使用ly-tab插件可以实现如下效果。1.安装ly-tab。

项目打包过后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。有了map文件就可以像未加密压缩那样，准确的输出是哪一行哪一列有错。再次npm run build进行打包，就不会打包map文件了。其实大部分情况下项目上线了，也不会再去管哪一行报错的问题了。所以该文件如果项目不需要是库去除掉的。

npm i vue-lazyload@1.3.3 // 如果是vue2就需要安装1.3.3版本。可以在使用该插件的时候传入一个配置对象，其中就可以配置loading配置项，其为图片还没返回时的加载图。我们一般会将这类图片放在assets文件夹下，图片是默认暴露的，所以使用require就可以获取。配置完成后，在服务器还未返回数据的时候，会显示我们配置的loading图片。实现图片懒加载可以使用vue-laz。1. 安装vue-lazyload。vue-lazyload并使用。

所以我们就可以使用watch 来监视是否改变从而达到判断数据是否已经请求回来了，使用$nextTick 等到DOM已经放到页面上后再执行new Swiper。也就是说，在new Swiper的时候，数据还没从服务器返回回来new Swiper操作就已经执行完了！比如我们在下面的Swiper例子中，我们需要new Swiper 才能让这个这个轮播图运行起来。如果我们想要在这些结构中传入自己从服务器请求中获取的数据就会出现无法显示的问题。我们在new Swiper对象的时候必须要保证DOM元素是完整的。

我们在上面使用了事件委派后，改标签下的所有元素都拥有了该事件，那我们接下来要做的就是判断我们点的到底是不是a标签，只有我们点击了a标签才会实现路由跳转，点击h3，dt，div啥的都不会跳转。我们可以使用自定义属性来标识该标签是否为a标签。:data-属性名 = "属性值"我们给每一级菜单都加上一个categoryName和categoryId属性，其值为就是我们要传参的菜单名和该标签的id号。categoryName属性用来判断点击对象是否为a标签和传参，categoryId用来传参。

我们输出一下引入的VueRouter构造函数，会发现在其prototype下的push方法和replace方法。既然push方法是我们引入的vue-router中的方法，那么我们就去找创建$router 的实例对象。但是使用这种方法治标不治本，难道我们每一次调用push和replace都要额外写两个回调函数吗？我们都知道，我们在使用一个Promise对象是时候需要配置成功执行函数和失败回调函数，所以我们只需要在使用push方法的时候额外传入一个成功回到函数和一个失败回调函数即可。

找到文件找到配置项在配置项最后加上。

Vue2 的template 模板中必须要有一个根标签，而我们在Vue3 的模板中不需要使用根标签就能渲染，因为Vue3 在内部会将多个标签包含在一个Fragment 虚拟元素中。好处就在于可以减少标签的层级，减小内存占用。

isProxy -- 检查一个对象是否是由 reactive 或者readonly 方法创建的代理。响应式数据类型常用的有ref、reactive、readonly 这三种数据类型。isReadonly -- 检查一个对象是否是由readonly |创建的只读代理。isReactive -- 检查一个对象是否是由reactive创建的响应式代理。isRef -- 检查一个值是否为一个ref对象。

provide 和 inject 能够实现祖组件和其任意的后代组件之间通信： 我们在祖组件中使用provide 将数据提供出去。使用provide 之前需要先进行引入：语法格式如下：例如：我们将祖组件中的person 使用provide提供出去我们在后代组件中使用inject 来使用数据。使用inject之前需要在该组件中对其进行引入：使用语法：我们在后代组件中接受上面祖组件提供的person 数据

当我们在模板中读取使用自定义ref 定义的数据时就会调用get 函数，修改数据时就会调用set 函数。而set 函数中，参数newValue为value修改后的值，我们需要将新的值赋值给传入的value值，才能实现页面的响应式。原因就在于我们改变value值后触发get 函数后并没有去重新解析模板，set 也没有收到解析模板的命令。因此customRef 函数中又有两个参数，track 函数和trigger 函数。在这个函数中，我们有一个返回值，这个返回值是customRef 函数。

我们可以使用ref 和 reactive 将普通对象类型的数据变为响应式的数据。我们可以使用toRaw 将reactive 对象的数据变为一般对象类型的数据。使用toRaw 需要先进行引入：语法格式：const xxx = toRaw(数据)注意：toRaw不能用在ref 对象上，如果用在ref 对象上将不起作用。

使用readonly 可以将数据变为只读的，不管这个数据是ref对象类型的数据还是Proxy对象类型的数据。使用readonly 需要先进行引入：语法格式：const xxx = readonly(数据);只读表示数据只能被读取而不能被改变，不能和数据可以改变但是没有响应式混淆！

使用shallowRef之前需要进行引入：使用方法和ref 的使用方法一致，以下是二者的区别：如果ref 和 shallowRef 都传入的是普通数据类型的数据，那么他们的效果是一样的，数据都能实现响应式。如果ref 和 shallowRef 传入的是对象数据类型的数据，那么ref 中的数据能够实现响应式，而shallowRef 中的数据无法实现响应。因为很简单，如果ref中传入的是对象数据类型的数据，那么就会调用reactive 形成拥有对象响应式的Proxy 对象。

为什么呢？因为我们返回的数据有问题，例如我们返回了 name: person.name，我们其实返回的并不是person的name 属性，而是返回的这个属性的属性值。也就是说，你返回的是 name: "张三"。他并不是一个ref 对象，所以无法拥有响应式。

我们将usepoint.js 文件编写完成后，需要在组件中进行引入和使用。直接使用一个变量接收函数的返回值，然后return 出去即可。setup() {// 点击页面输出坐标return {num,point},

如下是Vue3的生命周期函数图： 1. Vue2 中，只要创建Vue实例对象而不需要挂载就可以实现beforeCreate 和 created 生命周期函数。Vue3中必须要将Vue实例对象挂载完成，所有的准备工作做完，才可以开始实现beforeCreate 和 created 生命周期函数。2. Vue2 我们销毁组件，触发的是beforeDestroy 和 destroyed 函数。在Vue3中，我们销毁组件变为了卸载组件，实现的功能是一致的，不过只是称呼变了，触发的生命周期函数为beforeUnm

Vue3 中的watch使用效果和Vue2 中配置watch配置项的使用效果是一致的。使用watch监视之前，需要先对watch进行引入。

set (value) { // 对修改值value进行操作 }计算属性 = computed( ()=> { return 计算属性值 })这种写法用于计算属性需要修改的场景，能够自定义get和set来对值进行操作。get () { retrun 读取值 },计算属性 = computed({

我们在setup函数中导出的属性和方法虽然能够在模板上展示出来，但是并没有给属性添加响应式，因此，我们需要使用ref函数来为我们的数据提供响应式。

我们在Vue2中使用的是Object.defineProperty方法来实现数据响应式的，可以通过get和set方法来监听对象的访问和修改。但是并不能响应对象中属性的增加和删除，只能使用Vue.$set 和Vue.$delete 来对对象中的属性进行增加和删除。数组也不能直接通过下标来对数组进行修改，只能使用Vue封装过的数组方法来实现数组的响应式。以上问题在Vue3中就不会存在，因为其使用的是Proxy代理。

setup函数是Vue3中全新的一个配置项，值为一个函数，是所有 Composition API 中“表演的舞台”。我们在Vue2中用到的所有数据、方法，都需要配置在setup中。

安装完成后输入如下命令就可以查看到Vue的版本：vue -V版本尽量在4.5及以上。

我们能够在路由组件中配置meta配置项，便于我们存储组件的相关信息（如：该组件展示时的标题名，访问该组件时是否需要权限校验）

Vue的编程式导航就是不使用router-link进行页面的跳转，能够让页面的跳转更加地灵活。

router-link to="/路径?参数名1=参数值1&参数名2=参数值2">内容

router-link to="完整路径">内容component : 子组件。path : "子路径",component : 父组件,path : "/父路径",注意：子路径不能带 ' / '

Vue-router是一个Vue的插件库，专门用于实现SPA应用，也就是整个应用是一个完整的页面，点击页面上的导航不会跳转和刷新页面。

当我们的项目很大的时候，VueX中的代码会越来越多，会有处理数据的，处理人员列表的，处理订单的...如果我们将这些东西都写在一个state、actions和mutations中的话，就非常不方便后期的维护。所以我们引入了VueX的模块化的概念，每一个模块存储对应操作的数据和方法，方便后期的维护。

如果我们想要读取VueX中的State数据的Getters数据时，需要使用$store.state.数据名 和 $store.getters.数据名。当我们State和getters中的数据多了以后，书写会很麻烦：如果我们想要使用方便可以配置计算属性来简化书写：但是这样配置计算属性过于繁琐，为了便于书写，VueX为我们提供了mapState和mapGetters来方便我们书写。

当我们想对VueX中的state中的数据进行处理，我们就可以使用getter配置项。就像是组件中的数据和计算属性之间的关系。属性名 (state) {return 处理结果;我们能够直接拿到state进行操作，并返回操作结果。如：实现将sum数据放大10倍。

我们在store文件下将index.js文件基本的配置配置完成过后就可以进行正式的使用了。我们现在要实现以下场景：在VueX中有一个值sum，在组件中可以进行自定义加减的操作。

npm i vuex // Vue3安装该版本npm i vuex@3 // Vue2安装该版本因为我使用的是Vue2，所以安装的是3版本。

VueX就是在Vue中专门集中地管理数据的一个Vue插件。在VueX中的数据不属于任何一个组件，所有的组价都可以访问和修改这个数据。因此，当我们的多个组件依赖同一个状态（如用户信息）时，就可以使用VueX。

插槽的作用就是在组件中的指定位置传入指定的内容比如我们有两个相同样式的分类栏，但是里面的内容不同，一个是展示图片，一个是展示ul列表：这样的情况我们就可以使用插槽来实现。

vue-resource是Vue用于发送数据请求的一个插件库，在Vue1.0版本时使用比较频繁，现在Vue作者更支持使用axios进行数据发送。

我们在发送数据请求的时候经常会遇到跨域的情况。如：我们使用axios向http://localhost:5000/test端口发送请求，结果跨域了：解决跨域请求有如下几种方式：后端设置cors，jsonp，vue-cil配置代理。配置代理可以理解为Vue为你开了一台和你端口号相同的服务器，将浏览器和服务器之间的通话转化为服务器与服务器之间进行通话。

v-enter-active { animation: 配置项 } // 显示动画.v-leave-active { animation: 配置项 } // 隐藏动画from{to{

this.showIpt=true执行过后接着就是执行this.$refs.ipt.focus() ，所有的代码执行完毕后将解析好的DOM放到页面上去。当数据改变后，要对更新后的DOM进行一些操作时，就可以在$nextTick() 的回调函数中执行。我们用一个变量showIpt来控制input框的显示和隐藏，默认是隐藏。我们点击一个按钮后显示这个输入框的同时，input还要自动获取焦点。也就是说，focus() 的时候DOM还没解析呢！this.$nextTick( // 执行函数 )