打印结果：TEST,TEST,TEST,TEST,3,3,3,1.67,1.33,0.98,2.21TEST打印了4次，因为字符大小为4；3显示3次，就是数字大小上面的例子是这个结果的原因：当值为TEST时，v-for先遍历TEST，结果为T,E,S,T（4次）；执行Array.isArray(TEST)==false，执行v-else，所以当显示4次时TESTvalue为3，v-for全部超过3，结果为：1,2,3（3次）；执行Array.isArray(3)==false；执行v-else，结果为3valueis[1.67,1.33,0.98,2.21]，遍历数组,Array.isArray([1.67,1.33,0.98,2.21])==true;结果就是每次的值4.Command注意vue组件名称和props可以用驼峰和破折号命名，但只能在html中使用Hash（js中的驼峰命名会自动转成破折号命名。）字符串模板可以仅使用驼峰外壳。5、组件间通信（1）父子组件通信父组件：通过v-bind动态绑定来自父组件的内容（count-val，html要用破折号分隔命名）子组件：通过props接收父组件传过来的值props:['countVal']当父组件的prop发生变化时，子组件的prop也会随之变化，但是子组件发生变化，不会影响父组件，子组件通过$emit(事件名称，传递参数)这里的change是自定义事件this.$emit('change',this.count);配合$emit触发自定义事件changeApp.vue(2)通过ref通信，ref在子组件上使用，相当于子组件的索引，通过$refs调用子组件的属性和方法ref在普通DOM上使用元素，DOM元素的集合可以通过$refs获取，类似于jquery的选择器（3）非父子组件的通信在main.js中newVue({render:h=>h(App),data:{eventHub:newVue()//添加一个vue实例到数据}}).$mount('#app')component1methods:{changeFn(count){console.log('count',count);this.count=计数；}},mounted:function(){//绑定this.$root.eventHub.$on('changeEvent',(count)=>{this.changeFn(count);});},beforeDestory:function(){//解除绑定以避免内存泄漏this.$root.eventHub.$off('changeEvent');}Component2this.$root.eventHub.$emit('changeEvent',this.数数）;六、vue响应式1.双向绑定采用数据劫持结合发布订阅者模式，通过Object.defineProperty()劫持各个属性的setter和getter，当数据变化时向订阅者发布消息，触发相应的监听器回调必须实现以下几点：1.实现一个数据监听器Observer，它可以监听数据对象的所有属性。如果有任何变化，您可以获得最新的值并通知订阅者。扫描分析每个元素节点的指令，根据指令模板替换数据，并绑定相应的更新函数3.实现一个Watcher作为连接Observer和Compile的桥梁，可以订阅和接收每个属性变化的通知，以及执行指令绑定对应的回调函数，从而更新视图4、mvvm入口函数，综合以上三种Vue2.0双向绑定原理2.数组变异方式3.存在问题深度监控，如果对象比较大，一-timemonitoring最终无法监控新增和删除的属性（可以通过Vue.set、Vue.delete实现监控）。vue3中通过proxy解决了这个问题。7.diff算法virtualdom是用js模拟dom结构diff算法对于一个空的vnode，新旧关联的dom元素不存在，旧存在，新旧存在，旧不存在，新旧vnode存在，并且是同一个节点，调用patchVnodepatchVnode，新旧相同，返回新旧不同，但是都是文本节点，替换文本有新的子节点，old没有子节点，new子节点有old子节点，new子节点没有新子节点，new子节点有新子节点，子节点不同。执行updateChildrenupdate时，Children以递增开始，以递减结束newstart->oldStartnewend->oldendnewstart->oldendnewend->oldend有key，如果有则根据key更新到指定位置没有key，如果oldstart>oldend，表示先遍历oldend，加入新的vnode如果newstart->newend之间的节点在newstart>newend，表示新节点已经先遍历过了，把oldVnode中oldstart->oldend之间的节点去掉。Recalculationwatchwatch不支持缓存，数据变化直接触发watch监控引用类型，获取不到oldVal。九、vue样式渗透在组件范围内的CSS中。修改外部导入插件样式需要使用样式穿透scss使用：:v-deepstylus使用>>>sassandless使用/deep///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;}