vue总结

vue

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

一、 v-if和v-show的区别

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

二、v-for使用key

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

无key，逐条更新值

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

三、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；结果是每一次的值

四、命令注意

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

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

字符串模板只能用驼峰。

五、组件之间通信

(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);

六、vue响应式

1.双向绑定

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

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

Vue2.0双向绑定原理

2.数组变异方法

3.存在的问题

深度监听，如果对象很大的话，一次性监听到底
无法监听新增、删除属性（可以通过Vue.set,Vue.delete实现监听），这个问题在vue3中通过proxy解决

七、diff算法

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

• oldVnode是真实dom,创建空的vnode,关联dom元素
• 新不存在，旧存在，删除旧
• 新存在，旧不存在，新增vnode
• 新旧都存在，且是相同节点，调用patchVnode

patchVnode

• 新旧相同，return
• 新旧不同，但都是文本节点，替换文本
• 新有子节点，旧没有，新增子节点
• 旧有子节点，新没有，删除子节点
• 新旧都有子节点，且子节点不同，执行updateChildren

updateChildren
开始是递增，结束是递减
新开始->旧开始
新结束->旧结束
新开始->旧结束
新结束->旧结束
有key就根据key，更新到指定位置
没有key就直接更新
如果旧开始>旧结束，说明旧先遍历完，新增vnode中新开始->新结束之间的节点
如果新开始>新结束，说明新先遍历完，移除oldVnode中旧开始->旧结束之间的节点

八、computed和watch

• computed有缓存，值不变不重新计算
• watch

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

九、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>

十、 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

十一、 data为什么用函数

• 不用function return每个组件的data都在内存的同一个地址，那一个data改变，就会影响其他组件的data
• 用function return相当于新建了个对象，分配新的内存地址，这样每个组件之间的data都是相互独立

十二、$event

• 原生 的event对象
• 事件被挂载到当前元素

event.target在什么地方监听
event.currentTarget在什么地方触发的

十三、v-model

textarea,checkbox,radio也是用v-model