笔记 - js - vue

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的区别

1. 安全性
2. 传值方式 get(cookie中)， post（request body中）
3. 数据大小
4. get获取，post传送
5. 数据完整性： 网络条件差点（post两次，get一次）

3、ajax

1、创建核心对象
var xhr = new XMLHttpRequest()
2、调用open方法
xhr.open('方式'，'地址'， '同步异步')
3、设置请求头post
4、send方法
xhr.send('账号密码')
5、onreadystate

3、Es6

1. es6新增特性
2. require和import区别
   1. require: module当前模块
   2. require是commonjs的语法，import是es6语法
   3. 位置require任意，import只能在顶部，非条件语句或函数作用域
   4. require运行时引入性能较低，import编译时引入性能高
3. 箭头函数
   1. 箭头函数没有prototype，没有自己的this，指向外层的函数的this，
   2. 不能用call（），apply（），bind（）改变this指向
   3. function省略，return也可以
4. let const var 区别
   1. var变量提升 undefined
   2. 可以多次声明，后面的覆盖前面的
   3. 作用域：函数内部跟全局
   4. let暂时性死区，会计作用域内有效{ }
   5. let，const 相同作用域下不能重复声明
   6. const 常量
5. map 和 foreach区别
   1. 三个参数：item，index，arr
   2. map有新的返回值，新的数组
6. promise
   1. 主要用于解决异步，回调地狱问题
   2. 自己的方法：all，reject，resolve， race， 原型上的then，catch方法
   3. 异步操作队列化，按照期望的顺序执行
   4. 状态：pending，fulfilled，rejected
   5. 链式操作：then会返回一个新的promise，
7. async 和 await
   1. 同步跟异步的写法，配合一块使用
   2. async表明会有异步操作，立即返回一个promise，await等待promise的返回结果，接普通函数直接链式调用
   3. 如果变成reject状态，async函数中断，后面的程序不会继续执行
   4. 项目中：执行第一步，将第一步的结果给第二步。ajax中先拿到一个借口的返回值，结果调用第二个操作的接口，达到异步操作。
8. 解构赋值
   1. 对象或数组中提取值，
9. for in 和 for of 
   1. for in 对象 for of 数组
   2. in索引 of 元素值
10. generator
    1. 异步编程解决方案，内部有许多状态
    2. 分段执行的，yield暂停，next启动下一步，
11. 三者的区别
    1. 都是为解决异步提出的
    2. promise、async/await为了异步
    3. generator为了控制输出，对象迭代，部署interator接口
    4. 异步最终的解决方案是async和await
12. set map
    1. set的数据唯一，自动去重
    2. NAN的处理，不想等但是也会去重
    3. map传入的key不受类型限制
13. proxy
    1. 创建一个对象的代理，实现基本操作的拦截
14. symbol，assign 合并对象
15. 模块化开发
    1. 一个模块实现一个特定功能的一组方法，起初只是简单的功能，没有模块的概念，程序复杂化后模块化更加重要
    2. 对象的写法会暴露所有的成员，外部修改内部属性
    3. 立即执行函数，利用模块私有作用域建立，闭包不会造成全局作用域污染
16. js模块规范
    1. commonjs，require引入模块
    2. 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、生命周期

1. beforecreate().     data未定义
2. created().  data和methods中数据的钩子函数
3. boforemount().  指令解析完为挂载到页面上
4. created().  创建后
5. beforemounte().  
6. mounted().  
7. beforeupdate().  
8. updated().  
9. beforedestroy().  
10. destroyed(). 
11. activated().  keep-alive组件激活调用
12. 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