8.31.2022

1、Vue特点：

(1) 组件化开发，提高代码复用率，且让代码更好维护。

(2) 声明式编码，无需直接操作DOM，提高开发效率。

(3) 虚拟DOM+Diff算法，尽量复用DOM节点。

2、Vue中模板的作用：提供模板；知道在解析后往哪里放。Vue解析完模板之后对整个模板进行重新替换。

3、容器实例1v1。若多容器，则只解析第一个；若多实例，则只由第一个实例控制。

4、data中的重复内容，以最新的为准，即后面的会覆盖前面的。如何避免：多级写法。

5、v-model只能应用在表单元素上。v-model默认收集的就是value值。

6、data中的东西最终会出现在vm上，模板解析时能看到vm上存在的所有东西，所以模板在引用时也不需要在前面加vm.  而是直接使用。

 

9.1.2022

1、通过defineProperty添加的属性不可被枚举（其enumerable属性值默认为false）；属性值不可被更改（其writeable属性值默认为false）；属性不可被删除（其configureable属性值默认为false）。

2、通过defineProperty添加的属性，可通过get获取，现用现取，保证数据的最新，get的整个函数叫做getter。

3、vue中数据代理的应用：data与_data。只有在data中的内容才会做数据劫持。不用数据代理的话，模板中用的时候需要加_data.。基本原理：通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性都指定一个getter和setter。在getter和setter内部去操作data中对应的属性。

4、方法函数传参时通过$event占位获得event。当不带参时默认第一个参数是event。但是传参的话就需要占位，否则获取不到event。

5、tab键能够取消当前选中的元素的选中状态，所以tab按键别名只能配合keydown使用。

6、系统修饰符：ctrl、alt、shift、meta。可以在后面再加一个，表示二者同时按下时触发。

7、常用按键别名：enter、delete、esc、tab、space、up、down、left、right

8、方法在用插值语法显示的时候一定要加小括号噢！表示显示返回值。

9、data中内容的改变就会引起整个模板的重新解析，这时用到的函数就会重新调用执行。

10、Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！deep:true。

11、计算属性vs监听

(1) 计算属性在调用时需要在模板中渲染，修改计算所依赖元数据；watch在调用时只需修改元数据。

(2) 计算属性默认深度依赖，watch默认浅度观测。

(3) 计算属性适合做筛选，不可异步；watch适合做执行异步或开销较大的操作。

如果一个数据需要经过复杂计算就用 computed，如果一个数据需要被监听并且对数据做一些操作就用 watch。

12、动态设定class样式：

(1) 字符串写法：样式的类名不确定，通过动态指定；

(2) 数组写法：要绑定的样式个数不确定、名字也不确定，即通过对数组的操作添加样式，同时具有数组内的样式；参考利用数组进行操作的便利之处

(3) 对象写法：要绑定的样式个数确定，但是不知道用不用这个样式，通过true/false控制。

13、动态通过style设定样式：

(1) 对象式写法：和class差不多，但不通过true/false，就直接在对象里写需要的样式

(2) 数组写法：比较少见，类似class

14、template不能与v-show一起使用！template不会影响结构，某些情况下和v-if配合使用可以提高效率。

15、v-for中

(1) 遍历数组：第一个参数是值，第二个参数是索引；

(2) 遍历对象：第一个参数是value，第二个参数是key；

(3) 遍历字符串：第一个参数是值，第二个参数是索引；

(4) 遍历指定次数：第一个参数是值（1开始），第二个参数是索引（0开始）。

16、折叠注释： #region  #endregin

 

9.4.2022

1、获取对象中不存在的属性返回undefined。

2、不能在Vue实例的根数据对象上添加响应属性，但是可以在里面属性对象上加，可通过set或$set。就是不能在data下直接加吧，但是可以在data下的子对象里加

3、修改数组：push，pop，shift，unshift，splice，reverse，sort（这几个方法会使原数组也发生改变）也可以用set修改。

4、对于filter、contact、slice等非变更数组，可通过新数组替换旧数组完成响应式。

5、过滤器的第一个参数是过滤的数据，第二个开始才是自定义的参数，可以不写参数，默认会把过滤的数据作为第一个参数传入。

6、全局配置要写在创建vue实例之前。

7、过滤器不仅可以用在插值语法上，还可以用在v-bind: 属性 = “ xxx | 过滤器名 ”上。

8、自定义指令函数式执行：①指令与元素成功绑定时；②指令所在的模板被重新解析时。

9、自定义指令对象式：bind()；inserted()；update()。

10、自定义指令的指向都是windows，不是Vue实例！

11、销毁后自定义事件会失效，但原生DOM事件依然有效。

12、生命周期

9.6.2022

1、el在组件中不能写，因为最终所有的组件都要经过一个vm管理，由vm中的el决定服务于哪个容器。

2、组件的本质就是一个构造函数，当创建组件的时候，会自动new一个实例。

3、组件配置中，this指向的VueComponent实例对象。new Vue()中的this指向Vue的实例对象vm。vm管理着一个一个vc。$children查看。

4、data必须是一个函数，这样才可以确保每次调用都返回一份独立拷贝。

9.7.2022

1、脚手架中用的是精简版的vue，其中少的是模板解析器，所以在new实例配置时不能使用template配置项，需要用render函数接收到的createElement函数去指定具体。

2、用ref打标识，相当于是id的替代者。获取就是$refs.xxx，加在组件标签上获取的是组件实例对象，加在真实DOM元素上获取的就是DOM元素。

3、子组件接收到的props不建议修改！可以改，但是不建议修改，修改的话会发出警告。data中的和props中的重复了以props接收到的为准。在内部中，props的优先级比data高，会优先放在vc上，所以即使是在data中也可以访问到props。不推荐子组件修改父组件的参数是为了避免这个参数被多个子组件引用，从而避免应用的数据流向难以理解。

4、混合是作为补充的，如果自己配置有写，优先使用自己的。但是对生命周期来说，不以谁为主，都要，但是mixin的先执行。

5、插件的本质：包含install方法的一个对象，install的第一个参数是Vue，第二个参数及之后的参数是插件使用者传递的数据。

6、(18条消息) Vue中的scoped实现原理和样式穿透方法及原理_cc°　　淡忘的博客-CSDN博客_scoped的原理

7、style标签使用了scoped属性之后，编译之后每个组件标签都添加了一个data-v-xxxx的属性，其中，data-v-xxx是scopedId，每个vue文件都会对应一个唯一的id。该id是根据文件内容和路径hash生成的，通过组合形成scopedId，所以scopedId也是唯一的。在应用样式时，会筛选带有应用组件的scopedId属性，从而保证样式不被污染。

8、与alert相类似的还有个confirm不要忘记咯。

9、reduce函数。

10、TODOList案例。

11、xxxxStorage.getItem(a)中，如果a对应的值获取不到，那么getItem的返回值是null，此时若a为对象，则JSON.parse(null)返回结果也是null。

12、子给父传递数据：

(1) 通过父组件给子组件传递函数类型的props实现。传递函数，同时这个函数的回调是写在父组件中的，通过子组件去触发调用。

(2) 通过父组件给子组件绑定一个自定义事件实现。$on和$emit。

(3) 父组件通过ref获取子组件，通过$on添加自定义事件（在mounted中完成，灵活性比较强，可以进行延迟。如果是$once表示只执行一次。）

13、自定义事件解绑：

(1) this.$off( ‘okok’ )：解绑okok事件，只解绑一个事件。

(2) this.$off( [ ‘okok’, ‘nono’ ] )：解绑okok事件和nono事件，解绑多个事件。

(3) this.$off()：所有的自定义事件全部解绑。

14、自定义事件的this指向：谁触发，指向谁。

 

9.8.2022

1、自定义事件传参的话在模板中不要写括号，这样会导致后面收不到参数。

2、原来全局事件总线是这样的，也是vc，只是挂在vm上。

3、消息订阅与发布pubsub-js库

 

9.9.2022

1、Vue中的动画，把动画的内容用transaction标签包起来，动画类名为v-enter-active / v-leave-active。加入给动画取名为hello，则动画类型名 hello-enter-active / hello-leave-active。如果需要页面一显示就播放进入的动画，则在transaction标签上添加appear属性。值得注意的是，在模板解析后，transaction标签不会呈现在页面上，就像template标签那样。

2、动画的样式名，v-enter表示动画的起点，v-enter-to表示动画的终点，v-enter-active表示动画的过程。

3、多个元素的过渡，使用transaction-group标签，同时每个内容要加上key值。

4、animate.css动画库。

5、同源策略规定了三个东西必须一致：协议名、主机名、端口号。

6、跨域情况下，请求发送了，服务器收了，服务器也返回了，但是客户端收不到。

7、解决跨域：

(1) cors：服务器返回时添加了部分响应请求头

(2) jsonp，只能解决get请求

(3) 配置代理服务器：nginx

 

9.11.2022

1、用import引入资源时会进行严格检查。避免这个的方法是：在public文件夹下创建css文件夹，在index.html文件中通过link方式引入样式。

2、this.info = {...this.info, ...this.dataObj}表示以字面量将二者合并，相同的变量名以后面dataObj里的为主，没说的原来info中是什么就还是什么。

3、vue-resource插件：多了$http属性。与axios类似。但是现在已经用得少了。仅了解。

4、插槽只会放入结构，对于 ；这些不会放入子组件中进行解析。

5、template中使用插槽可以使用新写法：<template v-slot:footer> 注意是冒号噢！footer也不用加””。slot=”footer”也通用。

6、作用域插槽在插槽的使用者一方必须使用template套住整个框，使用属性scope，注意不是scoped！通过scope就可以接受到slot传过来的额数据，接收到的类型是对象。作用域插槽中，scope中的名字不必与slot中定义的名字相同。template中scope等同于slot-scope，用哪个属性名都可以，在属性值里也可以使用解构。

7、mapState的用法详解-112集。为什么要用mapState？为什么在使用mapState的时候前面要加 ... ？函数中用对象写法和数组写法的区别？

(1) 为什么要用mapState？

因为mapState就相当于是一个便捷入口，你只需要传入命名、所要取的key，就可以便捷取到值，省了很多重复的代码。

(2) 为什么在使用mapState前要加三个点？

因为mapState是写在computed中的，对象中不能直接包含对象，但是可以通过前 面加三个点的方式，让子对象中的每一组key-value被放到外面的对象中。

(3) 函数中用对象写法和数组写法的区别？

对象写法可是将key进行重命名，注意：在这里对象写法不能简写！

数组写法key和命名得相同，正因为如此，就可以通过只写一个的简便写法。

例如： ...mapState( [‘sum’, ‘school’, ‘subject’] )

8、采用mapMutation时参数要自己配好，要么在模板中直接传递参数（推荐），要么重新写个方法，在方法中调用的时候传递参数。

9、路由跳转的时候，若使用to的对象写法，query参数中，router-link可以通过path/name，但是params参数只能用name。params接收参数时需要占位。

10、路由props的三种写法：

(1) 布尔值写法：若布尔值为真，就会把该路由收到的所有params参数，以props的形式传给配置的组件。

(2) 对象写法：该对象中所有的key-value都会以props的形式传给配置的组件。

(3) 函数写法：该函数返回的对象中每一组key-value都会通过props传给配置的组件。

 

9.12.2022

1、$router.go(参数a)：若a为正数，则表示前进a步；若a为负数，则表示后退a步。

2、keep-alive标签表示，在当前路由下点了其他路由之后，让不展示的路由组件保持挂载，不被销毁。添加属性include=”News”表示只缓存News的路由组件，其中News是组件名。缓存多个的写法include=" [ ‘News’, ‘Message’ ] "。不写include的话就所有的都缓存。注意，是在router-link的外侧包裹keep-alive噢！

3、路由组件专有的两个生命周期：activated和deactivated。激活和失活。当你使用keep-alive的时候，对于mounted和beforeDestory生命周期里的内容不能够完成相关业务时，就通过activated和deactivated去操作。

4、全局前置路由守卫：初始化的时候被调用；每次路由切换之前被调用。

5、hash模式和history模式的区别：

(1) 路径不同，hash：/#/  history：/

(2) hash的兼容性好，history的兼容性略差

(3) 在部署之后，history会有问题，当刷新的时候资源会把整个路径当做资源路径访问。而hash不会，hash在/#之后的都不会当做资源路径。即hash值不会包含在Http请求中，hash值不会带给服务器。（用history也可以，但是需要和后端去调整 connect-history-api-fallback中间件可以解决）

6、饿了么按需引入的时候，在babel文件下，官方说的加数组可能会报错，改成@babel/preset-env

7、计算属性与methods：计算属性是基于它的依赖缓存的。一个计算属性所依赖的数据发生变化时，它才会重新取值，所以当所依赖的值不发生变化，计算属性也就不更新。但是methods不同，只要重新渲染，它就会被调用，因此函数也会被执行。当遍历大数组和做大量计算时，应当使用计算属性，除非并不希望它缓存。

8、v-if和v-show：v-if会根据表达式适当地销毁或重建元素，及绑定的事件或子组件，若表达式初始值为false，则一开始元素/组件并不会渲染，只有当条件第一次变为真时才开始编译。而v-show只是简单的CSS属性切换，无论条件真与否，都会被编译。相比之下，v-if更适合条件不经常改变的场景，而v-show适用于频繁切换条件。

9、slot 与 props 的区别：通过props属性，父组件可以向子组件传递属性、方法，可是父组件不能通过属性传递带标签的内容、甚至是组件，而插槽可以。

10、Vue中异步更新DOM的原理：Vue在观察到数据变化时并不是直接更新DOM，而是开启一个队列，并缓冲在同一事件循环中发生的所有数据改变，在缓冲时会去除重复数据，从而避免不必要的计算和DOM操作。然后，在下一个事件循环tick中，Vue刷新队列并执行实际（已去重的）工作。

11、防抖与节流

正常：事件触发非常频繁，而且每一次的触发，回调函数都要去执行（如果时间很短，而回调函数内部有计算，那么很可能出现浏览器卡顿）

防抖：前面的所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发,只会执行最后一次。

节流：在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发。

12、关于组件间传值的区别。

11.15.2022

1、@click.native中的native可以把自定义事件变为原生DOM事件。

<Event @click.native="handle"></Event>  # 其实是给Event组件的根节点绑定了自定义事件，用到了事件委派。

2、在Vue2中，可以通过value与原生的oninput实现双向绑定（注意oninput与onchange的区别）

<input type="text" :value="msg"  @input="msg = $event.target.value" />

3、使用sync修饰符：属于组件通信的一种，可以实现数据同步

<Child :money="money" @update:money="money = $event" />
<Child :money.sync="money" />
# 第一、父组件给子组件传递了money的props
# 第二、给当前的子组件绑定了一个名为"update:money"的自定义事件

4、补充

$attrs：子组件可以用$attrs获取父组件传递过来的props，但是接收不到已经通过props接收的属性
$listener：组件自身的一个属性，子组件可以通过$listener获取到父组件给子组件传递的自定义事件