2024暑假学习日记8.30-8.31

8.30

1.学习mixin混入，

局部混入是在组件里用import引入

全局混入是在main,js文件中引入

2.学习插件

3.学习scoped

Scoped作用：让样式在局部生效，防止冲突

语法：<style scoped>

注意：App组件一般不写scoped

通过在标签中添加一个随机属性来解决冲突

拓展了less的使用，在style中添加lang=”less”,同时需要在项目中安装less-loader,安装过程需要考虑版本兼容问题。

可以通过yarn info less-loader versions命令，查看包版本

按以上方法尝试使用less语法可行。

4.学习TodoList案例，组件化编程初体验，组件化编程通用流程

*首先按功能点拆分模块，将功能点相同的模块归为一个组件，并给组件取名，如果发现取名很困难，就要思考自己拆分的方式是否有问题。

*然后实现静态组件，公司的项目一般是已经开发了一部分的，需要阅读理解旧代码，分析其结构，将每部分的结构抽离成组件，再抽离样式，在子组件的style中加上scoped防止冲突。可通过折叠方式一步步查看，也可以借助开发者工具查看。

*实现数据的绑定，

拓展了用nanoid（唯一id生成器）生成唯一id，用命令yarn add nanoid安装

在组件中import { nanoid } from 'nanoid'

组件通信：指的就是组件间的数据传递

讲了组件间通信，初级方法是：父组件给子组件1传了一个函数，在子组件1中调用这个函数，由于函数本身在父组件中，传回的值可供父组件使用，再由父组件将该值传递给子组件2，从而实现子组件1和子组件2的通信。

尝试了获取和传递，勉强能实现。

注意:添加props配置时，记得加双引号

*考虑数据存放位置前要考虑数据是一个组件使用还是一些组件使用，如果是一些组件使用，需要把数据存放在共用数据的组件的父组件。

8.31

1.学习浏览器本地存储，以唯品会官网为例，打开开发者工具的Application选项，可以看到

有localstorage和sessionstorage

不小心把onclick写成了@click,浏览器控制台出现404报错

还有saveData后面要加（）,调用函数

• onclick 只能触发 js的原生方法，不能触发vue的封装方法
• @click 只能触发vue的封装方法，不能触发js的原生方法

学习sessionStorage时 直接将localStorage的内容复制，用快捷键ctrl+F,在文件中搜索localStorage并全部替换为sessionStorage

手动清除localStorage的内容，调用API或者清除浏览器缓存

2.讲了todolist案例的本地存储，需要开启watch中的deep属性来深度监测数据，实现数据在缓存中的变化；需要注意的是JSON.parse(null)的值为null，考虑到用户首次使用时清单是没有东西的，可以加上要是为null则设置为空数组[]

3.学习组件自定义事件绑定，解绑

拓展:传的参数比较多是可以用‘...params’代替参数，将参数封装为一个数组，那么写形参就不用写太多

自定义事件解绑：调用$off这个API

给组件绑定原生事件时，需要加上native修饰符，原因是Vue默认给组件绑定的事件都是自定义事件

4.学习全局事件总线：任意组件间通信

Student是传数据的组件，在Student中触发getStudentName事件，并传入要传输的数据

School是接收数据的组件，在School中用$on给$bus绑定自定义事件，事件的回调可以用箭头函数编写（因为箭头函数没有this,箭头函数的this指向外部）

5.学习消息订阅与发布

安装第三方库pubsub-js(有很多这种库，这里只是推荐使用)

使用pubsub.subscribe订阅消息，订阅时用this.pubId存放订阅消息的ID，方便销毁

传入两个形参，第一个形参是消息的名称，第二个形参才是消息的内容。

使用pubsub.publish发布消息

6.$nextTick还没学，等到讲完todolist案例，再把所有功能逐一实现