千禧年无敌优香大王的博客

与之前Vue2的选项式API格式不同，这里学习Vue3的组合式API这样的组合式的好处是，对于一些比较复杂的逻辑，把负责同一部分逻辑的功能写在一起，便于后续维护管理；前面的写法对于一些中小型项目，会更加简洁，也便于编写</</</</// 引入vueimportfrom'vue'exportdefault// 第一步setup// 上面需要显示的数据或事件都定义在此处let1;constadd=>++return// 上面使用到的需要在return中暴露</

如果html中，某个div的class属性名定为common，那么如果此时less文件中有一个公共样式包装也叫common，那么会直接作用在同名的div标签上，这样就是有污染，所以可以采取命名空间的写法来解决。传统的css就是在style标签中单个添加，像上面这样有嵌套的还要不断的通过.来逐级添加样式，这样不太方便。在项目开发过程中，可能会有这样的场景:ul列表下有几个li标签，li标签有默认的样式。想要公共的less文件作用在所有的less文件中，要在当前使用的less文件中导入。

官方文档 https://router.vuejs.org/zh/guide/migration/index.html。4、使用router-view用于承载页面。2、编写路由配置，全局注入router。1、下载vue-router依赖。3、在vue实例上进行挂载。创建router实例。

路由懒加载可以实现在访问的时候去加载对应的组件，并且通过懒加载的方式，结合webpack可以实现代码的分包。

第二种带查询参数的方式，对象中是path属性与query属性，其中path属性与name属性只能二选一，path直接对应的是跳转的路径。以上这种就是命名的路由，它属于隐式的传参，因为路径上不会把id漏出来，相比显式的更安全。由于声明式路由的方式不够灵活，它必须要在页面中使用才能触发，但是实际开发中不是所有的功能都要在页面触发的，比如实现一个延迟跳转的功能，就需要放在定时器中，所以就需要有编程式路由。在下面的script中编写的相关路由的代码，可以通过传入对应的实例名来完成跳转的功能(如上述的user)

Router官方文档查看相关API在之前的学习中，我们可以使用vue来创建单页应用，那么如何根据不同的 url 地址展示不同的内容或页面？Vue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。嵌套路由映射模块化的、基于组件的路由配置路由参数、查询、通配符基于 Vue.js 过渡系统的视图过渡效果细致的导航控制带有自动激活的 CSS class 的链接。

可以使用render对页面进行编程式的修改。字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode(虚拟节点)。如果组件是一个函数组件，渲染函数还会接收一个额外的 context 参数。虚拟节点（dom）本质上就是一个普通的JS对象，用于描述视图的界面结构，使用渲染函数如何实现？

在项目开发中，mixin可能会有多个，比如定义form时，会有相关的方法，可以提取出来，同样的对于用户也有相关的数据，所以在这个文件夹中定义两个文件form.js编写form相关的方法与数据，user.js编写用户相关的方法与数据。的操作，所混入的对象包含任意组件的选项（data，生命周期，methods，watch，computed）data | computed：数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。在文件中新建一个mixin文件夹，在其中新建一个index.js文件。

只渲染基本的页面，对于一些需要通过触发某个事件而出现的页面或内容，在触发时才会发出请求，然后再进行渲染，这些都是针对首次加载来说。在使用动态组件时写上component标签，添加is属性，传入的内容就是想要渲染的内容"currentTabComponent"注意，这个 attribute 可以用于常规 HTML 元素，但这些元素将被视为组件，这意味着所有的 attribute。使用异步组件的方式把各种包分拆成多个小包，当使用时才请求获取资源，相比一次性获取完整的包，效率上要更高效。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。可以完成跨级组件和兄弟组件的通信状态，驱动应用的数据源；视图，以声明方式将状态映射到视图；操作，响应在视图上的用户输入导致的状态变化。用户的操作使状态发生变化，状态变化导致视图发生不同的改变，又使用户可以执行不同的操作如果多个视图依赖于同一状态。来自不同视图的行为需要变更同一状态。

有时，会修改计算属性，进行赋值，需要给计算属性设置setter方法，表示给当前计算属性设置值的时候会被调用。计算属性的setter。

比如监听时，数据发生改变时可以做异步请求，假设现在在做一个仓库系统，当仓库数据发生变化时可能要重新请求仓库下的商品，这种场景下，可以在当前仓库发生变化时重新调用这个仓库下的商品接口，然后重新请求商品数据。watch是一个对象，把data中需要监听的属性放到watch对象中设置为函数，表示当监听的属性发生变化会执行什么操作。在数据发生改变时，想要做一些处理，就可以用watch。示例3：需要修改的属性的数据类型是引用数据类型。示例4：监听到数据后要完成多件事情，可以使用。示例5：指定监听的属性。

关于插槽的api，封装高阶组件时，想要获取插槽中的内容，比如在父组件中获取子组件插槽的内容(插槽中的虚拟dom)，通过$slots获取的都是插槽中的虚拟dom，然后从虚拟dom中提取出内容，然后进行包装、逻辑的增加或者渲染函数进行渲染。如果在父组件中使用子组件时不传任何内容，在子组件的slot标签中可以写入一些标签内容作为“后备内容”，也就是父组件不传内容时显示的默认内容，当父组件有内容时，就显示父组件传入的内容。可以在slot中提前设置一段内容作为默认值，当父组件提供插槽内容时将会被。

在mounted生命周期中获取ref属性，能够把它所在的标签在解析后输出，也就是能拿到这个dom。emit传递)，但是使用$refs，操作子组件响应的逻辑，也在父组件中操作，那么后续如果要维护子组件的内容，就要在父组件中寻找，这样就比较麻烦，尽量避免用ref来实现。来实现，存在弊端：当前的业务与通信方式比较混乱，正常来说，父组件的数据应该在父组件中操作。// 调用子组件的方法,把当前的message进行传递。// 1、把获取到的数据赋值给msg。// 获取到子组件的实例。，子组件的在子组件中操作。

v-slot：可以实现父子组件单向通信（父向子传值），在实现可复用组件，向组件中传入DOM节点、html等内容以及某些组件库的表格值二次处理等情况时，可以优先考虑v-slot。props/$emit 可以实现父子组件的双向通信，父组件通过props的方式向子组件传递数据，而通过$emit 子组件可以向父组件通信。父子组件间的通信，父子组件中都定义了一个输入框与显示内容，需要子组件输入的内容能够在父组件中显示，父组件中输入的内容能够在子组件中显示。下一步完成在子组件中输入，在父组件中显示。

​ 对于一个项目，可以将整体进行拆分为几个部分，每个人负责不同的部分(协同开发)组件的拆分思想：将复杂的页面进行功能拆分，形成功能单一的模块，有利于后期的维护；对于复用性而言，把重复的功能封装成一个组件，在需要使用时进行引用即可联系上一篇生成的vue项目。

完成后可以在左边的目录中看到有一个文件夹，node_modules文件装置相关的依赖，public表示当前的入口，项目通过打包后，会把页面内容挂载到public的index.html文件中，src文件是具体的项目文件：静态资源、组件和入口文件main.js、页面的入口文件App.vue。，这个可以理解为本地的服务器，App.vue以及后面引入的一些样式文件，会在运行前，通过打包形成静态资源，静态资源的访问就要通过服务器，所以就是通过这个service创建了一个本地的服务器，然后把静态资源放到了服务器上，

npm是node环境下的包管理器，有一个npm服务器，npm可以给开发人员提供别人放在npm服务器中的代码包，通过使用npm命令将这些包或库从服务器中拉取到本地进行使用，也可以把自己写的代码包推到服务器中给别人用。2、在系统变量中新建一个，变量名“NODE_HOME”用来指定node的安装目录，找到刚才下载的node根目录的地址复制一份，作为变量值，然后确定。全部安装包，找到适合的版本(最好不要最新版本)，然后点击下载，找到合适的安装路径。3、在系统变量中的path中，新建3个环境变量。

在挂载前，在当前的生命周期中，完成了data与虚拟dom数据初始化，已经可以拿到虚拟节点了，这里还没有把虚拟节点转换为真实的节点挂载到页面，所以说，在当前的生命周期中，还可以渲染数据，这是渲染前最后可以修改数据的地方，也就是说在这个生命周期中，我们还可以对数据进行处理。在生命周期中，没有数据，页面就是空白的，没有methods也没有挂载，整个Vue页面处于一个初始化阶段、这时要给用户一个友好的提示，所以可以添加loading效果。vue生命周期表示在组件创建后的一系列变化，其中钩子函数会在。

在html上绑定的事件在vue内部已经做了处理，在ViewModel被销毁的时候，所有监听的事件会被解绑。当点击时，需要获取到当前的事件对象，比如在进行拖拽、进行点击位置的动画效果处理时，就需要使用这点。针对于一些特殊场景，我们还需要获取事件对象，在原生js中，点击时，第一个参数就是默认事件对象。点击商品时，输出的信息中除了商品的信息，还有一个叫PointEvent的对象，这就是事件对象。对于获取点击项的数据，可以用上面这种写法。// click事件的行为。需要在事件中传入参数。

基本语法遍历items，item表示列表的每一项元素需要显示的是对象的message属性{{ item.message }}:key是v-bind:key的缩写key的作用是vue内部虚拟 DOM 在更新过程中辨别新旧节点，在数据顺序发生变化的时候，能够快速找到可以复用的dom节点思考下，这里添加点击对应项高亮的功能，如何实现？在li标签中给元素添加click事件，当点击时给元素添加标识，通过标识进行比对，就可以找到我们选中的那一项，然后就给它加上一个class样式或style样式dat

把js中的判断条件移到了模板，在页面中判断是否渲染某些数据或样式。

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。效果是：当点击按钮时，修改classObj这个对象中的一个属性，点击按钮，class由item改为isaAtive item，实际就是修改对象中isaActive的值，使其显示与否，每一次点击都能够使其值发生变化，从而有显示与关闭的效果。前面的代码，我们在v-bind中传入对象，但是在实际项目中，一般是把这个对象定义在data数据中，没有设置class时，在控制台代码中的div里面没有内容。

打开控制台可以观察到，点击时，是先触发了点击事件，再发生页面跳转。有的时候，我们并不想让这个默认跳转的事件发生，就可以在click事件后面使用prevent修饰符，阻止这个默认事件发生。由原生js可知，事件触发是先有捕获阶段的，如当我们点击这个box，会先触发container再触发box。用lazy修饰后，在input(在输入框输入)，msg不显示，只有不选中输入框，点击空白处，msg才会刷新。一个事件嵌套在另一个事件中，当触发内层事件时，内外两层事件都被触发，这叫做事件冒泡。

引用的网址：https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js。3、动态参数里面尽量不用大写字符，因为浏览器会把 attributeName全部强制转为小写。2、动态参数的表达式由于语法约束，不能有空格和引号，可以使用计算属性来解决。1、动态参数的值要求是一个。script引用vue。

Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。Vue是声明式框架，

对于声明式框架，vue有一套自己的模板语法规范。

在理论中声明式框架的性能应该是不会超过命令式代码，但是在实际中，我们很难开发出绝对优化的命令式代码。所以声明式的找出差异的性能消耗可以忽略不记，但是从写法上可以大大简化，让开发者更多的专注于数据层的修改。两种方式都是有原生js来实现的，所以声明式不会优于命令式，而且声明时书写的方式在编译时要解析为html时，这个解析的流程会消耗性能。当找出差异的性能消耗为0时，声明式代码与命令式代码的性能相同，但是无法做到超越。我们知道声明式框架的更新性能消耗 = 找出差异的性能消耗 + 直接修改的性能消耗。