Vue双向绑定原理:vue.js2.0:使用数据劫持(Proxy模式)结合发布订阅者模式(PubSub模式)通过Object.defineProperty()来劫持各个属性的setter、getter,当数据发生变化时向订阅者发布消息,并触发相应的监听回调。@1:实现一个数据监听器Observer,可以监听数据对象的所有属性,如果有变化,可以获取最新的值并通知订阅者;@2:实现一个命令解析器Compile,可以控制对每个元素节点的命令扫描分析,根据指令模板替换数据,并绑定相应的更新函数;@3:实现一个Watcher,作为连接Observer和Compile的桥梁,能够订阅和接收每一次属性变化的通知,并执行指令绑定相应的回调函数来更新视图。虚拟DOM、Diff算法:@1:无需直接操作DOM元素,只需操作数据重新渲染页面;@2:虚拟DOM是为了解决浏览器性能问题而设计的。在操作数据时,会将改变的dom元素缓存起来,计算然后通过比较映射到真正的dom树上。@3:diff算法比较新旧虚拟dom。如果节点类型相同,则比较数据并修改数据;如果节点不同,则直接杀掉该节点和所有子节点,插入一个新节点;如果为每个节点设置一个唯一的key,就可以准确的找到需要更改的内容,否则会出现修改一处导致其他地方发生变化的情况。比如a-b-c-d,插入一个新节点a-b-m-c-d,实际上改变了c和d。但是如果设置了key,b和c是可以准确找到并插入的。总结:虚拟dom可以很好的跟踪当前的dom状态,因为它会根据当前的数据生成一个描述当前dom结构的虚拟dom,然后当数据发生变化时,会生成一个新的虚拟dom,而这两个virtualdoms精确保存了变化前后的状态。然后用diff算法计算前后两个虚拟DOM的差异,得到一个最优的更新方式(updatewhichoneschange)。它可以显着提高渲染效率和用户体验。v-if和v-show的区别:v-if是真正的条件渲染,通过销毁和重建节点来实现。·v-if是惰性的,即当初始条件为假时,什么都不做,直到条件第一次为真才渲染。·v-show会一直渲染,它只是简单的基于css实现样式切换。·v-if有更高的切换开销,而v-show有更高的初始渲染开销。所以,如果你需要切换的很频繁,还是用v-show比较好;如果再次运行时条件很少改变,最好使用v-if。·v-if是否根据条件渲染,v-show是块显示还是不显示。v-if与v-for一起使用:当v-if和v-for一起使用时,v-for的优先级高于v-if。(这里是2.x版本,3.x相反)不建议同时使用v-if和v-for(可以在v-for里面加一个template标签来使用v-if).计算属性(computed)vs方法:计算属性的值被缓存。计算属性基于它们的响应依赖被缓存。当依赖发生变化时,计算属性的值会重新计算并继续缓存。·方法不会被缓存,每次调用方法都会重新执行方法体代码块。Computedpropertiesvslisteners:计算属性被缓存;监听器不能被缓存;计算属性通常基于一个或多个现有数据返回一个新值;监听器监听一个数据的变化可能会因为一个数据的变化而引起一个或多个其他数据的变化,或者引起一些其他的副作用。vue.js的两大核心是什么:·数据驱动·组件系统vue常用修饰符:·.prevent:提交事件不再重新加载页面。·.stop:停止冒泡点击事件。·.self:当事件发生在元素本身而不是子元素上时触发。·.capture:事件监听器,当事件发生时会被调用。键值在vue中的作用:js在使用v-for更新渲染元素列表时,默认使用“就地复用”策略。如果数据项的顺序发生变化,vue不会移动DOM元素以匹配数据项的顺序,而是简单地在这里重用每个元素,并确保它显示每个已渲染的元素在特定索引处。·key的作用主要是高效更新模拟DOM。Vue组件间参数传递:父组件与子组件之间传值:父组件传递给子组件:子组件通过props方法接收数据;子组件传递给父组件:$emit方法传递参数。对于非父子组件之间的数据传递,兄弟组件传值:eventBus:创建一个事件中心,相当于一个中转站,可以用来发送事件和接收事件。项目比较小,用这个比较合适。·Vuex·如何在发布订阅模式下监听一个属性值的变化Vue:比如现在需要监听data中obj.a的变化:watch:{'obj.a':{handler(new,old){console.log(new,old)}}}是通过计算属性实现的。当依赖发生变化时,会重新计算一个新的值:computed:{a1(){returnthis.obj.a}}v-model是如何实现的,什么是语法糖:作用于表单元素:v-model="message"相当于v-bind:value="message"v-on:input="message=event.target.value"Function组件方面,本质上是父子组件通信的语法糖,通过props实现和.emit,相当于:value="message"@input="$emit('input',$event.target.value)"data为什么是函数而不是对象:·js中的对象是引用-型数据。当多个实例引用同一个对象时,只要一个实例对这个对象进行操作,其他实例中的数据也会发生变化。·在Vue中,更多的组件被复用,所以每个组件都需要有自己的数据,这样组件之间才不会相互干扰。·因此,组件的数据不能以对象的形式来写,而要以函数的形式来写。数据以函数返回值的形式定义,这样每次复用一个组件,都会返回一个新的数据。也就是说,每个组件都有自己私有的数据空间,各自维护自己的数据,不会干扰其他组件的正常运行。vue的生命周期:每个vue实例从创建到销毁的过程就是这个vue实例的生命周期。从开始创建、初始化数据、编译模板、挂载dom、渲染、更新、渲染、卸载等一系列过程·beforeCreate(初始化界面前)·created(初始化界面后)·beforeMount(渲染界面前)·mounted(渲染界面后)·beforeUpdate(更新数据前)·updated(更新数据后)·beforeDestroy(卸载组件前)·destroyed(卸载组件后)keep-alive:·
