详述虚拟DOM中的diff算法

什么是diff算法

Web界面由DOM树来构成，当其中某一部分发生变化时，其实就是对应的某个DOM节点发生了变化。在React中，构建UI界面的思路是由当前状态决定界面。前后两个状态就对应两套界面，然后由React来比较两个界面的区别，这就需要对DOM树进行Diff算法分析。

1. 当数据发生变化时，vue是怎么更新节点的？
   我们先根据真实DOM生成一颗虚拟 DOM，当虚拟 DOM某个节点的数据改变后会生成一个新的Vnode，然后Vnode和oldVnode作对比，发现有不一样的地方就直接修改在真实的DOM上，然后使oldVnode的值为Vnode。
2. 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
        }
    })