详述虚拟DOM中的diff算法
什么是diff算法
Web界面由DOM树来构成，当其中某一部分发生变化时，其实就是对应的某个DOM节点发生了变化。在React中，构建UI界面的思路是由当前状态决定界面。前后两个状态就对应两套界面，然后由React来比较两个界面的区别，这就需要对DOM树进行Diff算法分析。
- 当数据发生变化时，vue是怎么更新节点的？
我们先根据真实DOM生成一颗虚拟 DOM，当虚拟 DOM某个节点的数据改变后会生成一个新的Vnode，然后Vnode和oldVnode作对比，发现有不一样的地方就直接修改在真实的DOM上，然后使oldVnode的值为Vnode。 - virtual DOM和真实DOM的区别？
virtual DOM是将真实的DOM的数据抽取出来，以对象的形式模拟树形结构。
swiper获取数据、css都没有问题，但是图片不动，应该怎么解决
1：导致问题的原因
swiper提前初始化了而这个时候数据还没有完全出来
解决方法一
从swiper入手
ajax() // 这里是ajax，异步请求完成以后我们在new swiper
let mySwiper = new Swiper('.swiper-container', {
autoplay: true,
loop: true,
observer: true, // 当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper
observerParents: true // 将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新
})
解决方法二
从Vue入手
在Vue中有一个方法nextTick()，用来解决DOM的先后执行问题，
ajax() // 这里是ajax，异步请求完成以后我们在new swiper
this.$nextTick(() => {
let mySwiper = new Swiper('.swiper-container', {
autoplay: true,
loop: true
})
})
子组件能不能修改父组件传递过来的数据
1: 什么是单向数据流？
数据从父组件传递给子组件，只能单向绑定。在子组件内部不应该修改父组件传递过来的数据。
子组件不能直接修改由父组件传递过来的数据
每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。
如果你这样做了，Vue 会在浏览器的控制台中发出警告。
子组件修改父组件传递过来的数据的两种方式
第一种：子组件通过data修改父组件传递过来的数据，把传递过来的数据作为data中局部数据的初始值使用：
<div id="app">
<custom-com :count="count"></custom-com>
</div>
Vue.component('customCom', {
props: ['count'],
data() {
return {
increment: this.count
}
},
template: `<div>
<h2>我是一个自定义组件</h2>
<p>{{increment}}</p>
<input type="button" value="改变count的值" @click="changeCount"/>
</div>`,
methods: {
changeCount() {
this.increment++;
}
}
});
new Vue({
el: '#app',
data: {
count: 0
}
})
第二种：子组件通过computed计算属性来修改父组件传递过来的数据：
<div id="app">
<custom-com :count="count"></custom-com>
</div>
// Author@SmallFour
Vue.component('customCom', {
props: ['count'],
// 首先作为局部初始值
data() {
return {
increment: this.count
}
},
// 然后才能使用computed
computed: {
incrementCount() {
return this.increment;
}
},
template: `<div>
<h2>我是一个自定义组件</h2>
<p>{{incrementCount}}</p>
<input type="button" value="改变count的值" @click="changeCount"/>
</div>`,
methods: {
changeCount() {
this.increment++;
}
}
});
new Vue({
el: '#app',
data: {
count: 0
}
})
