vue，react，webpack相关学习

vue

vue是一套用于构建用户界面的渐进式框架（渐进式框架的大概意思就是你可以只用我的一部分，而不是用了我这一点就必须用我的所有部分）

1. v-if和v-show的区别

v-show=false,元素存是display:none
v-if=false，元素不存在

image.png

2.v-for使用key

key是为了添加唯一标识，让Diff算法可以正确识别节点并把它插入正确的位置，提高Vue对虚拟DOM的更新效率。
比如：

image.png

无key，逐条更新值

image.png

有key，只需要增加个F节点，插入到B和C之间

有key

3.v-if不能和v-for不能放在同一标签上

v-for优先级高于v-if，当v-for和v-if放在同一标签上时，会先执行v-for，再执行v-if，这样会导致不符合v-if条件的元素也会被v-for
如：

<div id="app">
    <ul>
        <li v-for="value in testData">
            <div id="test" v-if="Array.isArray(value)" v-for="item in value">{{item}}</div>
            <div id="test1" v-else>{{value}}</div>
        </li>
    </ul>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            testData:  {
                name: 'TESTOBJECT', 
                id: 5,
                data: [1.67, 1.33, 0.98, 2.21]
            }
        }
    })
</script>

打印结果：TEST，TEST，TEST，TEST，3，3，3，1.67，1.33，0.98，2.21
TEST打印4次，是因为字符大小是4；3显示3次，是数字大小
上例是这个结果的原因：

value为TEST时，v-for先遍历TEST，结果为T，E，S，T（4次）；执行Array.isArray(TEST) == false，执行v-else，所以显示4次TEST
value为3时，v-for遍布3，结果为：1，2，3（3次）；执行Array.isArray(3) == false；执行v-else，结果为3
value为 [1.67, 1.33, 0.98, 2.21]，遍历数组，Array.isArray([1.67, 1.33, 0.98, 2.21]) == true；结果是每一次的值

4.命令注意

vue组件名和prop都可以用驼峰命名和短横线命名，

但html里面只能使用短横线。
（js中的驼峰命名会自动转换成短横线命名。）

字符串模板只能用驼峰。

5.组件之间通信

(1)父子组件之间通信

父组件：通过v-bind动态绑定父组件传来的内容(count-val，html里要用短横线分隔命名法)
<Count :count-val="count" @change="changeFn"/>
子组件：通过props接收父组件传过来的值
props: ['countVal']
父组件prop变化，子组件prop会跟着变，但是子组件变化，不会影响到父组件
子组件通过$emit（事件名，传递参数）触发父组件的自定义事件
<Count :count-val="count" @change="changeFn"/> 此处change就是自定义事件
this.$emit('change',this.count);合作$emit触发自定义事件change
App.vue
(2)通过ref通信，
ref在子组件上使用，相当于子组件的索引，通过$refs可以调用子组件的属性和方法
ref在普通的 DOM 元素上使用，通过$refs可以获取DOM元素的集体，作用与jquery选择器类似
(3)非父子组件间的通信
main.js中

new Vue({
  render: h => h(App),
  data: {
    eventHub: new Vue()  // 给data加个vue实例
  }
}).$mount('#app')

组件1

methods: {
    changeFn(count) {
      console.log('count', count);
      this.count = count;
    }
},
mounted: function() {
    // 绑定
    this.$root.eventHub.$on('changeEvent', (count) => {
      this.changeFn(count);
    });
},
beforeDestory: function() {
    // 解除绑定，避免内存泄漏
    this.$root.eventHub.$off('changeEvent');
}

组件2
this.$root.eventHub.$emit('changeEvent', this.count);

6.vue双向绑定

采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。就必须要实现以下几点：
1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数

image.png

3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
4、mvvm入口函数，整合以上三者

image.png

Vue2.0双向绑定原理

7.diff算法

虚拟dom就是用js模拟dom结构
diff算法
patch

oldVnode是真实dom,创建空的vnode,关联dom元素
新不存在，旧存在，删除旧
新存在，旧不存在，新增vnode
新旧都存在，且是相同节点，调用patchVnode
patchVnode
新旧相同，return
新旧不同，但都是文本节点，替换文本
新有子节点，旧没有，新增子节点
旧有子节点，新没有，删除子节点
新旧都有子节点，且子节点不同，执行updateChildren
updateChildren
开始是递增，结束是递减
新开始->旧开始
新结束->旧结束
新开始->旧结束
新结束->旧结束
有key就根据key，更新到指定位置
没有key就直接更新
如果旧开始>旧结束，说明旧先遍历完，新增vnode中新开始->新结束之间的节点
如果新开始>新结束，说明新先遍历完，移除oldVnode中旧开始->旧结束之间的节点

8.computed和watch

computed有缓存，值不变不重新计算
watch
watch不支持缓存，有数据变化直接触发
watch监听引用类型，拿不到oldVal

9.vue样式穿透

在组件作用域内的 CSS中，修改外部引入插件样式，需要用到样式穿透

scss 使用 ::v-deep
stylus使用>>>
sass和less使用/deep/

<style lang="scss" scoped>
// scss
.wrapper::v-deep .el-input__inner{
    padding-right: 5px!important;
}
// stylus
.wrapper >>> .el-input__inner{
    padding-right: 5px!important;
}
// sass和less
.wrapper /deep/.el-input__inner{
    padding-right: 5px!important;
}
<style>

10. vue生命周期

beforecreate ->created
初始化事件，进行数据的观测
created
data和method已经初始化好了，如果调用method和data最早可以在这里调用
created -> beforeMount
el选项（el: '#app'）
没有el选项，则停止编译，也就意味着停止了生命周期，直到在该vue实例上调用vm.$mount(el)。此时生命周期到created就停止了
有的话就继续向下编译
beforeMount
模板已经常在内存中编译好了，还未挂载到页面，页面还是模板语法
beforeMount -> mounted
添加 $el，并将其挂载到DOM元素，在beforeMount之前，打印this.$ el是undefined
mounted
页面渲染完成，最早操作dom，DOM中的模板语法替换成真实数据
beforeupdate
数据变化触发
updated
页面数据已经被更新
beforeDestory
vue实例进入销毁阶段，data,methods还都可用，还没有被销毁
destoryed
组件已经被销毁了
父子组件生命周期执行顺序（加载渲染过各）
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated
销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

11. data为什么用函数

每个组件形成私有的作用域，不影响其他组件

React

React 是一个用于构建用户界面的 JavaScript 库

vue和react的区别

相同点：

数据驱动视图
都有Virtual DOM，通过differ算法减少dom操作
组件化开发，实现webComponents规范(自定义组件，template)。
都有内部状态管理（react的state，vue的data）和外部参数传入（props）
都支持服务器端渲染
4.都有支持native的方案,React的React native,Vue的weex
5.都有管理状态，React有redux,Vue有自己的Vuex（自适应vue，量身定做）
不同点：
1.React严格上只针对MVC的view层,Vue则是MVVM模式
2.virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.
而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制
3.组件写法不一样, React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即'all in js';
Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,jd写在同一个文件;
4.数据绑定: vue实现了数据的双向绑定,react数据流动是单向的
5.state对象在react应用中不可变的,需要使用setState方法更新状态;
在vue中,state对象不是必须的,数据由data属性在vue对象中管理；

webpack

webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

入门Webpack，看这篇就够了