好好学习天天向上

仅执行计算操作，不做其他操作，这类函数通常被称为纯函数。纯函数的特征1.只负责自己的任务，它不会更改在该函数调用前就已存在的对象或变量。2.输入相同，则输出相同，给定相同的输入，纯函数应总是返回相同的结果。React便围绕着这个概念进行设计，假设编写的所有组件都是纯函数。React的渲染过程必须自始至终是纯粹的，不改变在渲染前，就已存在的任何对象或变量。– 这将会使其变得不纯粹，也就是我们说的产生副作用。/*案例1：不纯粹组件的写法该组件正在读写其外部声明的 guest 变量。

本方法与组件形式引用的区别：组件重新渲染其实是执行render方法， 如果子组件采用组件形式引入(可以理解为这里引入的是子组件render方法的执行结果。但有些场景下我们并不希望所有的子组件都重新渲染，比如在一个列表中，我们只希望重新渲染单击受新选择影响的这项。有时无法轻易的把一个组件单独的独立提取出来，此时可以把带状态的组件提取出来，然后把耗时的组件作为。方法是一个高阶函数，参数是一个组件A，返回包装过的新组件B。比如选中的子组件高亮，父组件维护一个选中子组件的。发生变化，才会触发组件重新渲染。

的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形成了所谓的“异步”。按照惯例，通常将待定状态参数命名为状态变量名称的第一个字母，如 age 为 a。明确这里所说的同步和异步指的是 API 调用后更新 DOM 是同步还是异步的。2.当事件被触发后，通过获取事件源对象，查看事件源对象中是否存在。不是同步地一个一个执行，会一个一个加入队列，然后最后。，修改的是组件下一次渲染的。

变量的值，该变量的值就是一个字符串，所以最后显示的是字符串没有解析地址去获取图片。是一个 ESM 的原生功能，会暴露当前模块的 URL。require是在运行时加载，import是编译时加载。中会将图片来当做模块来用，因为是动态加载的，所以。为了能让Webpack返回正确的资源路径，使用。根据结果来看，相对地址没有被解析。这里的错误原因理解的是动态绑定。进行解析，然后返回处理过的。进行解析，然后返回处理过的。解析到的路径都会被解析为。提供的一种加载能力，但是。提供的静态资源载入方法，

AJAX+DOM可以实现网页的局部刷新，但是新数据不能直接在网页中显示，需要通过DOM将数据转换为网页中的节点。react帮助我们根据不同的数据来快速构建用户项目,同时在构建过程中确保其流畅度。react特点1.使用虚拟DOM而不是真正的DOM2.声明式编码(声明式:结果为导向,不关心结果 命令式:一行代码一个命令)3.支持服务器端渲染用来创建React元素(并不是ReactDom，所以这里使用React调用)class属性需要使用className属性代替。type。

的样式节点没有父节点，这种用法是没有意义的。使用deep之后解析的代码为。原因是没有父节点说明本身就是该组件的根元素，那么父组件可以修改其样式。，这样就可以使得组件之间的样式不互相污染。如果一个项目中的所有。标签上有子组件的hash值。，相当于实现了组件的私有化，样式的模块化。是子组件的根元素可以获取到，我们也可以看见。，那么父组件该样式的优先级高一点，所以。的样式可以作用得更深，比如影响子组件。此时，父组件的样式没有生效。,来达到样式隔离的效果。如果在父组件中设置样式。的原理就是在前面添加。

都会导致父组件更新视图，所以会触发父组件的。vue2/vue3行为一致，vue3的生命周期函数。

父组件传子组件父组件在使用子组件时通过设置属性传值，子组件使用props接收子组件传父组件自定义事件 父组件将自定义事件传递给子组件，子组件emit接受什么是单向数据流数据流是指组件之间数据的流向，单向数据流指数据只能从父组件向子组件传递，子组件无法改变父组件的props，如果想修改有其他的方式。为什么不能是双向的父组件的数据发生改变，会通过props来通知子组件自动更新。防止多个子组件都尝试修改父组件状态时，导致数据混乱单向数据流的好处。

1.将可复用功能抽离为外部JS文件2.函数名和文件名以use开头，比如usePlayBar3.引用时将需要的变量或者方法显示解构暴露出来，比如。

了一个新变量，所以解构之后是一个基础数据则会响应式丢失。如果解构之后是一个引用类型，相当于操作的地址还是被Proxy监管，所以响应式不会丢失。reactive内部的实现是创建一个代理对象Proxy，以及进行了一系列处理。reactive失去效应是不在于Vue而在于Proxy对象本身。比如解构之后是基础类型的数据，那么解构相当于copy了一个值。访问时直接访问的这个copy值，跳过了代理，所以不会触发。以数组为例，对象也是一样的操作。，方法2其实就是参考了该方式。解构相当于将该变量重新赋给(

setup的第二个参数context提供了一个上下文对象,context作为上下文取代this，但是context中只有emitattrs,和slots。在非setup钩子中, 我们都是通过this.$refs来获取指定元素。this.$refs如果获取在指定元素时元素还没有挂载完成，使用nextTick延迟获取。

监听reactive定义的属性，会强制开启deep:true深度监听（自动创建一个深层侦听器,deep配置无效)，该响应式对象里面的任何属性发生变化，都会触发监听函数中的回调函数。无法正确的获取oldValue，oldValue和newValue的值一样了。因为对象是引用类型，即使里面的属性发生了变化，但是对象的地址没有发生变化，oldValue和newValue指向了同一个地址。

1.什么是vuex？vuex是在vue中实现集中式数据管理的一个插件，对vue应用中多个组件的共享状态进行集中的管理，适合任意组件间通信vuex的常用配置属性state用于存储数据状态actions进行业务逻辑处理或者数据请求mutations用于操作数据state，更改store中状态的唯一方法。......

由于不能将组件真正的卸载，所以keep-alive是将组件从原容器移动到另外一个假容器中，实现假卸载。$route是当前路由对象,表示本组件的路由规则，每一个路由都会有一个route对象，是一个局部对象。params参数传递的时候，传递了设置占位符接收的参数，地址栏不会显示并且刷新会丢失。在单页面应用中，不同组件之间的切换需要通过前端路由来实现。2.工作过程当浏览器的路径改变时，对应的组件就会显示。可以实现组件缓存，当组件切换时不会对当前组件进行卸载。7.在被激活的组件里调用。进入组件前的调用的顺序。...

计算属性的Watcher会将自己的dirty属性设置为true，组件的Watcher也会收到通知，从而执行render函数进行重新渲染操作，重新读取计算属性的值，此时计算属性的Wather已经把自己的dirty属性设置为true，所以会重新计算计算属性的值。计算属性的结果会被缓存，初始化时调用生成初始值，只有计算所依赖的数据发生变化才会重新计算。当计算属性中的内容发生变化后，计算属性的Watcher与组件的Watcher都会得到通知。计算属性根据已有的属性生成新的属性。遍历watch对象的每一个属性，...

项目中提到的知识点需要熟悉，非常大的概率会被问到为什么使用vuex的模块开发根据不同的业务，将该业务state、mutations、action、getters 的封装在一个js文件中，让多种数据分类更加明确，代码更好维护。 --> 将store大仓库分为一个一个业务(功能) 的小仓库vuex模块化开发的使用1.在store大仓库的modules配置下挂载小仓库,小仓库都开启了命名空间2.获取数据的时候写清楚来自哪个小仓库封装的目的进行了哪些封装？请求拦截器mockjs 生成随机数据，当前端使用mo

vue提供了模板语法，允许我们声明式地描述状态和DOM之间的绑定关系，比如。模板编译指的是模板编译成虚拟DOM的过程,vue会将模板编译成虚拟DOM渲染函数。模板编译的主要目的是生成渲染函数，渲染函数的作用是每次执行时，会根据最新状态生成新的vnode解析器：将模板解析为AST(Abstract Syntax Tree 抽象语法树)优化器：遍历AST标记静态节点,因为静态节点不可变，不需要为打上标签的静态节点创建新的虚拟节点，直接克隆已有的虚拟节点。代码生成器：使用AST生成渲染函数。将AST转换成渲

什么是vue生命周期函数？vue在关键时刻帮我们调用的一些特殊名称的函数，生命周期就是用来描述一个组件从引入到退出的全过程。挂载阶段：父组件 beforeMount -> 子组件 created -> 子组件 mounted -> 父组件 mounted更新阶段：父组件 beforeUpdate -> 子组件 beforeUpdate -> 子组件 updated -> 父组件 updated销毁阶段：父组件 beforeDestroy -> 子组件 beforeDestroy -> 子组件 destr

学习笔记:https://blog.youkuaiyun.com/qq_41370833/article/details/123745232如果一个值依赖多个属性（多对一），用computed肯定是更加方便的。如果一个值变化后会引起一系列操作，或者一个值变化会引起一系列值的变化（一对多），用watch更加方便一些。.................................

懒加载本质是延迟加载或按需加载，即在需要的时候的时候进行加载。首页不用设置懒加载，一个页面加载过后再次访问不会重复加载。为什么要进行路由懒加载路由懒加载所做的事情语法:ES import 常用用户访问组件时，该箭头函数被执行webpack：import动态导入语法能将该文件单独打包语法：...

的这个xxx是在中配置的。package.json中的scripts中的key为xxx，value为实际的命令。npm run xxx的时候，首先会去项目的package.json文件里找scripts 里找对应的xxx，然后执行 xxx的命令，例如启动vue项目 实际上执行了vue-cli 2.0vue-cli 3.0为什么不直接执行而要执行 呢因为操作系统中没有指令，直接执行会报错。为什么执行的时候可以成功在安装依赖的时候，会在目录中创建几个为名的可执行文件。bin目录下的文件表示软连接。

为什么数据修改之后，没有立刻渲染视图？在Vue.js中，当状态发生变化时，watcher会得到通知，触发虚拟DOM的渲染流程，watcher触发渲染这个操作是异步的。更新DOM是通过使用注册到微任务中。异步的原因:为了减少性能消耗数据变化后，组件内的所有状态变化都会通知到同一个watcher，然后虚拟DOM会对整个组件进行Diff并更改DOM。假设在同一轮事件循环中有多个数据发生了变化，那么组件的watcher会收到多份通知，进行多次渲染。为了减少性能消耗，我们可以等所有状态修改完毕后，一次性将整个组件

什么是DIff算法当新旧vnode的子节点都是一组节点时，为了以最小的性能开销完成更新操作，比较新旧的同层节点。用于比较的算法叫作Diff算法。Diff算法的分类DOM-diff的过程Diff算法的特点当数据发生改变，视图如何更新？当数据改变时，会触发，并且通过去通知所有订阅者，订阅者们就会调用方法，给真实DOM打补丁，更新相应的视图。只有三种类型的节点会被创建并插入到DOM中patch方法的作用1.对比两个vnode之间的差异2.修改DOM节点，创建新增的节点、删除已经废弃的节点、修改需要更新

文章目录vue2项目实战尚品汇前台03mockjs 模拟数据 √vue2项目实战尚品汇前台03mockjs 模拟数据 √mockjs 生成随机数据，当前端使用mock模拟的数据接口时，mockjs进行数据返回，并拦截ajax请求不发送给后台安装cnpm install --save mockjs使用步骤1.在项目中src文件中创建mock文件夹2.准备JSON数据 --JSON文件需要格式化，不要留空格3.把mock数据需要的图片放到public文件夹中，public文件夹在打包的时候，

文章目录vue2项目实战尚品汇前台02向服务器请求数据apifox 测试接口axios 二次封装 √API接口统一管理vue2项目实战尚品汇前台02√ 面试时可以提到的点★ 重点向服务器请求数据apifox 测试接口如测试http://gmall-h5-api.atguigu.cn/api/product/getBaseCategoryList1.如果服务器返回的数据code字段200，代表服务器返回数据成功2.整个项目，接口的前缀都有/api字样axios 二次封装 √为

文章目录vue2 组件传值的方式父组件给子组件传值方式1:props方式2:插槽子组件给父组件传值方式3:组件的自定义事件方式4:父组件给子组件传递函数 子组件调用函数传参 props方式5:全局事件总线 全能vue2 组件传值的方式props通过一般属性实现父向子通信通过函数属性实现子向父通信父组件给子组件传值方式1:props通过一般属性实现父向子通信通过函数属性实现子向父通信 – 方式4父组件通过属性传值<Student name="李四"/>子组件通

文章目录vue项目实战尚品汇前台01概述vue-cli 初始化项目项目的其他配置项目路由分析vue-router重置默认样式Header.vue和Footer.vue组件 静态页面路由组件搭建Footer组件的显示和隐藏 路由元信息的使用知识点总结1.路由跳转有几种方式？2.路由传参，传参有几种写法？两种写法的区别是什么？vue项目实战尚品汇前台01概述技术架构:vue + webpack+vuex + vue-router+ axios+less…封装通用组件登录注册token守卫购物车

文章目录Vue 数据响应式原理Vue2.02.Observer类 递归侦测对象全部属性3. 依赖收集Vue 数据响应式原理Vue2.0Object的变化侦测如何追踪变化？如何检测到一个对象的变化? -> 检测数据发生了改变vue2使用了Object.defineProperty vue3会修改成Proxy2.Observer类 递归侦测对象全部属性缺点:只有对象第一层是响应式的Observer类的目的:让object对象的每个层级属性都是响应式的，所有的属性都转化成getter/s

文章目录Vue3.0创建Vue3.0工程使用vue-cli创建Vue3.0创建Vue3.0工程使用vue-cli创建需要@vue/cli版本在4.5.0以上# 查看版本vue --version# 安装或升级@vue/clinpm install -g @vue/cli# 创建vue项目vue create vue-test# 启动cd vue_testnpm run serve...

文章目录Vue学习笔记07 路由概述基本路由注意点嵌套路由路由传参路由的query参数路由命名 name路由的params参数路由的props配置Vue学习笔记07 路由概述1.路由是一组key-value的对应关系2.多个路由，需要经过路由器的管理后端路由1.vauel是function，用于处理客户提交的请求。2.工作工程:服务器接受到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据。前端路由1.key是路径,value是组件，用于展示页面内容2.工作过程:当浏览器的路

文章目录Vue学习笔记06 Vuex理解vuex如何使用？执行的流程DevtoolsVue学习笔记06 Vuex理解vuex是什么？在Vue中实现集中式状态(数据)管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中的管理，适合任意组件间通信。插件import 'vuex'什么时候使用vuex1.多个组件依赖于同一状态2.来自不同组件的行为需要变更同一状态如何使用？1.npm i vuex@3vue2对应vuex3版本vue3对应vuex4版本2.Vue.use(Vu

文章目录Vue学习笔记05组件的自定义事件子组件给父节点传值第一种写法 @或v-on第二种写法：使用ref + $on事件触发解绑 \$emit \$offVue学习笔记05组件的自定义事件内置指令->HTML元素使用自定义指令-> 组件使用子组件给父节点传值第一种写法 @或v-on@或v-on 绑定在子组件的vc上绑定事件：使用@或v-on:将回调函数绑定在子组件的vc上触发事件：在子组件中触发，$emit(‘事件名’,参数1…,参数2…)<!-- 第一种写法，使用

文章目录Vue学习笔记04 Vue-cli使用脚手架创建Vue项目render函数Vue学习笔记04 Vue-cli使用脚手架创建Vue项目全局安装@vue/cli，使用vue命令创建Vue项目需要先安装node，我看的安装教程安装命令:vue-clicnpm install -g @vue/cli切换到要创建项目的目录，然后使用命令创建项目vue create xxx启动项目npm run serverender函数vue.runtime.xxx.js是运行版的Vue，只包含核心功能没

文章目录Vue学习笔记03指令内置指令v-cloak自定义指定生命周期Vue学习笔记03指令内置指令指令描述说明v-bind:xxx单向绑定数据简写 :xxxv-model:value=“”双向数据绑定简写v-model=“”v-for遍历数组/对象/字符串绑定keyv-on:事件绑定事件监听简写@v-if=“”条件渲染动态控制节点是否存在v-show=“”条件渲染动态控制节点是否展示v-text=“”向节点中渲染文

文章目录Vue学习笔记02数据代理Vue中的数据代理事件处理事件修饰符按键别名Vue学习笔记02数据代理什么是数据代理?通过一个对象代理另一个对象中属性的操作(间接的操作)//代理模式let obj ={x:100}let obj2 ={y:200}Object.defineProperty(obj2,'x',{ get(){ return obj.x; }, set(value){ obj.x = value; }})在浏览器控制台查看的时候会显示…，点击只会才可以看

文章目录Vue2.0简介el / datael与data的两种写法模板语法数据绑定 v-bind/v-modelMVVM模型Vue2.0简介vue是什么？构建用户界面的渐进式JavaScropt框架Vue的特点1.采用组件化模式，提高代码复用率，且让代码更好维护2.声明式编码，让编码人员无需直接操作DOM，提高开发效率3.使用虚拟DOM和DIff算法，尽量复用DOM节点原生：更新之后全部重新覆盖？vue:追加式，更新不一样的el / datael:指定当前Vue实例为哪个容器服务，通