1、vue父子组件传值方式
1、props
2、v-model
3、.sync 父组件向子组件传的值,子组件可以直接修改父组件的值
4、ref
父组件通过ref直接拿到子组件的属性或方法
5、$emit
父组件给子组件定义事件,子组件中emit触发,参数(事件名,参数)
6、$children&$parent
获取到一个包含所有子组件的对象数组,直接拿到父子组件的属性和方法
7、provide&inject
provide: 想要提供给后代组件的数据或方法
inject: 想要加在此组件上的数据或方法,层级再深都能找到
缺点:非响应式的数据,inject接受后修改,provide里的值也将变化,后代组件里的值不会改变
8、eventbus
全局事件总线 config.js中加入 Vue.prototype.$bus() = new Vue()
9、vuex
可以定义共享的数据源,配置使用,随时都可以取
mutations。 同步数据处理
getters。 vue的计算属性
actions。 异步数据处理
state。vuex的数据
modules。模块
10、插槽
具名插槽。 父传子
作用域插槽。子传父组件v-slot传值
11、$root
可以拿到app.vue里的数据以及方法
12、$attrs&$listeners
attrs: 除了css,style,props的属性以及集合
listeners:除了.native的监听事件合集
2、get&post的区别
- 安全性
- 传值方式 get(cookie中), post(request body中)
- 数据大小
- get获取,post传送
- 数据完整性: 网络条件差点(post两次,get一次)
3、ajax
1、创建核心对象
var xhr = new XMLHttpRequest()
2、调用open方法
xhr.open('方式','地址', '同步异步')
3、设置请求头post
4、send方法
xhr.send('账号密码')
5、onreadystate
3、Es6
- es6新增特性
- require和import区别
- require: module当前模块
- require是commonjs的语法,import是es6语法
- 位置require任意,import只能在顶部,非条件语句或函数作用域
- require运行时引入性能较低,import编译时引入性能高
- 箭头函数
- 箭头函数没有prototype,没有自己的this,指向外层的函数的this,
- 不能用call(),apply(),bind()改变this指向
- function省略,return也可以
- let const var 区别
- var变量提升 undefined
- 可以多次声明,后面的覆盖前面的
- 作用域:函数内部跟全局
- let暂时性死区,会计作用域内有效{ }
- let,const 相同作用域下不能重复声明
- const 常量
- map 和 foreach区别
- 三个参数:item,index,arr
- map有新的返回值,新的数组
- promise
- 主要用于解决异步,回调地狱问题
- 自己的方法:all,reject,resolve, race, 原型上的then,catch方法
- 异步操作队列化,按照期望的顺序执行
- 状态:pending,fulfilled,rejected
- 链式操作:then会返回一个新的promise,
- async 和 await
- 同步跟异步的写法,配合一块使用
- async表明会有异步操作,立即返回一个promise,await等待promise的返回结果,接普通函数直接链式调用
- 如果变成reject状态,async函数中断,后面的程序不会继续执行
- 项目中:执行第一步,将第一步的结果给第二步。ajax中先拿到一个借口的返回值,结果调用第二个操作的接口,达到异步操作。
- 解构赋值
- 对象或数组中提取值,
- for in 和 for of
- for in 对象 for of 数组
- in索引 of 元素值
- generator
- 异步编程解决方案,内部有许多状态
- 分段执行的,yield暂停,next启动下一步,
- 三者的区别
- 都是为解决异步提出的
- promise、async/await为了异步
- generator为了控制输出,对象迭代,部署interator接口
- 异步最终的解决方案是async和await
- set map
- set的数据唯一,自动去重
- NAN的处理,不想等但是也会去重
- map传入的key不受类型限制
- proxy
- 创建一个对象的代理,实现基本操作的拦截
- symbol,assign 合并对象
- 模块化开发
- 一个模块实现一个特定功能的一组方法,起初只是简单的功能,没有模块的概念,程序复杂化后模块化更加重要
- 对象的写法会暴露所有的成员,外部修改内部属性
- 立即执行函数,利用模块私有作用域建立,闭包不会造成全局作用域污染
- js模块规范
- commonjs,require引入模块
- amd 异步
3、vue
1、mvvm
model -view-viewmodel 视图跟业务分开 model跟view之间没有联系,而是通过viewmodel交互,view的变化会同步到model中,model的变化会同步到view中,viewmodel会用双向数据绑定把view和model链接起来,开发者关注业务逻辑,数据状态的同步以及dom的更新都有mvvm管理
优点
双向绑定数据一致性,耦合度低,一个viewmodel可以给多个view用
缺点
双向绑定使用binding,内存开销增加,编译时间增加,bug调试时间难度增加
2、mvc
model-view-controller controller 负责从视图读取数据,控制用户输入,向模型发送数据,讲model用view显示出来
优点:耦合度低 分工协作
缺点:项目架构变得复杂
3、底层原理
采用数据劫持+发布订阅者模式
利用es5的Object.defineProperty()来劫持各个属性的getter和setter,在数据发生改变时发布消息给订阅者,触发相应的回调
数据监听器:observer
数据变化触发setter,通知订阅者watcher
订阅者:watcher
作为桥梁,调用自身的update()方法触发compile里面的回调
指令解析器:compile
解析模版指令,将变量换成数据,初始化渲染页面,将每个指令对应的节点绑定更新函数,添加函数的订阅者,一旦数据变动,收到通知更新视图
4、 vue模板编译原理
vue不认识template模板,不是浏览器的标准html语法,转成js的render函数然后执行并渲染
1、模板字符串 => elementASTs(解析器)
2、ast静态节点标记,做虚拟dom优化渲染(优化器)
3、elementASTs生成render函数代码字符串(代码生成器)
5、虚拟dom
用对象的方式取代真实的dom操作,讲真实的dom放在内存中,在内存的对象里做模拟操作。
操作完成后生成dom树,两个dom树做比较,只渲染不同的地方
优点:
快速渲染跟高效更新提高性能
6、diff算法
data发生改变,根据新的数据生成新的虚拟dom,和久的虚拟dom进行对比,对比的过程就是diff算法
创建真实的dom成本高,js对象描述dom成本低,频繁操作dom开销大
7、响应式原理
vue的响应式原理?
什么是响应式,“响应式”,是指当数据改变后,Vue 会通知到使用该数据的代码。例如,视图渲染中使用了数据,数据改变后,视图也会自动更新。
Vue 的响应式原理是核心是通过 ES5 的保护对象的 Object.defindeProperty 中的访问器属性中的 get 和 set 方法,data 中声明的属性都被添加了访问器属性,当读取 data 中的数据时自动调用 get 方法,当修改 data 中的数据时,自动调用 set 方法,检测到数据的变化,会通知观察者 Wacher,观察者 Wacher自动触发重新render 当前组件(子组件不会重新渲染),生成新的虚拟 DOM 树,Vue 框架会遍历并对比新虚拟 DOM 树和旧虚拟 DOM 树中每个节点的差别,并记录下来,最后,加载操作,将所有记录的不同点,局部修改到真实 DOM 树上。
8、vue数组中的某个对象的属性发生变化,视图没有更新
object.definepropery无法监听到数组下标的变化,直接拿数组下标改变值
this.$set(this.obj,key,val)
object.assign({},this.obj)
object.assign([],this.obj)
9、react跟vue
1、同
- 虚拟dom
- 组件话开发
- 父子之间单向数据流
- 服务端渲染
10、生命周期
- beforecreate(). data未定义
- created(). data和methods中数据的钩子函数
- boforemount(). 指令解析完为挂载到页面上
- created(). 创建后
- beforemounte().
- mounted().
- beforeupdate().
- updated().
- beforedestroy().
- destroyed().
- activated(). keep-alive组件激活调用
- deactivated(). keep-alive失活使用
父子生命周期
加载渲染过程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
代码更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated
代码销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
代码常用钩子简易版
父create->子created->子mounted->父mounted
去重
1、原生js
新数组中没有旧数组中相同的元素
2、对象的属性名不能相同
3、es6的set方法
判断数组
constructor属性
instanceof
array.isarray
object.prototype.tostring.call()==='[object array]' true
webpack配置
打包工具
压缩代码,压缩图片,解析es6,scss
构成:
入口、出口、插件、loader、devserver