闭包
函数里边嵌套函数,内部函数访问外部函数的变量,这个过程就会形成闭包。会造成内存泄漏,使用完成后需要及时释放
传参的方式:
- 父子传参:props/$emit
- 兄弟传参:bus.on(接收)
- 祖孙传参:prpvide/inject
节流和防抖
- 节流: 在单位时间内频繁触发事件,只生效一次(也只有第一次生效,类似验证码)
- 防抖: 在单位时间内频繁触发事件,只有最后一次生效(类似回城)
vue中solt的使用方式,以及solt作用域插槽的用法
- 插槽:就是子组件中用solt标签定义的预留位置,有name属性叫具名插槽,不设置name属性的叫不具名插槽,使用插槽主要是为了在父组件中使用子组件标签的时候可以往子组件内写入html代码
- 使用方式:当组件当做标签进行使用的时候,用solt可以用来接收组件标签包裹的内容,当给solt标签添加name属性的时候,可以调换响应的位置
- 插槽作用域:允许父组件访问子组件的数据,并在插槽中使用这些数据。
为什么在组件内部data是一个函数而不是一个对象
因为每次调用组件的时候都会重新生成一个对象,如果是一个对象的情况下,data数据会进行复用(因为对象是引用数据类型),而当data是一个函数的时候每次调用的时候就会返回一个新的对象
vue封装注意事项
- 1.可读性。命名语义化,组件要有一个清晰明了的注释
- 2.逻辑合理性。能在组件内完成的功能,尽量不要暴露给父组件处理
- 3.数据设计的合理性。组件自身除了必要的数据,一般不携带大量私有数据,尽量由父组件输入,处理完后根据业务场景决定是否需要输出
- 4.样式的一致性。
- 5.可扩展性。可在原有组件的基础上加功能
vue.js核心
数据驱动视图
- 数据变化会自动更新到对应元素中,无需手动操作DOM,可称为单项数据绑定
- 对于输入框可输入元素,可设置双向数据绑定
- 双向数据绑定是在数据绑定的,可以自动将元素输入内容更新给数据
- 基于MVVM模型实现的数据驱动视图大大解放了DOM操作
- View与Model处理分离,降低了代码的耦合度
- 但是双向绑定时的bug调试会难度增加
组件化开发
- 允许将网页功能封装为自定义的HTML标签,复用时书写自定义标签名即可
- 组件不仅可以封装结构,还可以封装样式与逻辑代码,大大提高了开发效率与可维护性
hash和history的区别
- hash支持低版本的浏览器,而history就没有那么友好了
- hash模式下,它指# 号之后的所有字符,但是他虽然包含在url中,但是不包含在http请求中。所以改变hash值不会重新加载页面,对传给后端的url没有任何影响,因此不会重新加载页面。它每次改变都会触发hashchange事件,可以通过window加上hashchange事件进行监听。他是单页面的标配。
- history模式,利用了HTML5新增的pushState()和replaceState()方法,在原有的back、forwar、go的基础上,添加对历史记录修改的功能。他虽然改变了url,但是浏览器不会立即向后端发送请求。
- history模式下有一个问题,就是当页面刷新时,他会实实在在的发送请求,把url给传送过去,因此,如果后端没有做处理的话,就会因找不到资源而报404错误,因此使用history模式时可以跟后端进行配合
什么是异步组件
就是通过import或者require导入的vue组件 好处:可以避免页面一加载时就去加载全部的组件,从而导致页面访问时间变长的问题。使用异步加载组件后,只有当需要某个组件时才会去加载需要的组件