剖析vue框架

1. 插槽slot

//father中
<template>
    <div>
        <test-slot>
            <span>会覆盖子组件里slot的部分，当然如果此处没东西，就不覆盖</span>
        </test-slot>
    </div>
</template>
<script>
import testSlot from './components/testSlot'
export default {
  data(){
    return {
    }
  },
  components:{
    testSlot
  }
}
</script>

//son中
<template>
  <div>
    <h3>test-slot</h3>
    <slot>123</slot> //这里的123就会被father中的span所覆盖
  </div> 
</template>

对于具名插槽
参考：https://blog.csdn.net/kingov/article/details/78293384

2. 与react的比较（主要方面）

1）相同：都试用虚拟dom（virtual DOM）

2）不同：

在优化方面：

image.png

也就是说，vue能精确知晓哪个组件确实需要被渲染

image.png

3. 单向数据绑定和双向数据绑定

1）单向数据流：vue在不同组件间强制使用单向数据流，这是让数据流更清晰，数据只能从父组件到子组件或者反向。子组件不能改变父组件的状态，子组件变化不会改变父组件状态，但是父组件状态改变了，其多个子组件会都改变

举例：

image.png

2）双向数据流：

image.png

这里插播一条绑定原理的实现栗子：

<body>
    <div id="app">
        <input type="text" id="txt">
        <p id="show-txt"></p>
    </div>
    <script>
        var obj = {}
        Object.defineProperty(obj, 'txt', {
            get: function () {
                return obj
            },
            set: function (newValue) {
                document.getElementById('txt').value = newValue
                document.getElementById('show-txt').innerHTML = newValue
            }
        })
        document.addEventListener('keyup', function (e) {
            obj.txt = e.target.value
        })
    </script>
</body>

image.png

3）单向和双向优劣对比
单向：vue在不同组件间强制使用单向数据流（父传子，子传父，共享状态和兄弟组件间的通信），容易且清晰。改变修改状态时能让状态变得的可预测和可掌控，容易调试。也是为了组件间更好的解耦
双向：vue实例中的data与其渲染的DOM元素的内容保持一致，无论谁被改变，另一方会相应的更新为相同的数据。这是通过设置属性访问器实现的。一个状态的改变可能触发一连串的状态变化，较难预测，代码也很难调试，因为双向数据的绑定是响应式的。所以多用在组件内的view和model之间的实时更新。常用场景：class和style，表单
参考：https://blog.csdn.net/CystalVon/article/details/78428036

4.计算属性computed

这里有个点可以关注下：

image.png

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

computed计算属性里的值是有缓存的，如果reversedMessage里依赖（message）没有变化，就算计算属性多次访问了reversedMessage函数，返回的依然是之前的计算结果，不会再次执行函数。
但是使用methods就不同了，每次触发重新渲染，methods总会重新执行一遍函数，类似于：

computed: {
  now: function () {
    return Date.now()
  }
}

里面没有依赖，就不会再更新了，因此也就不要放在computed里去计算了。

5. key的作用

给vue一个提示，以便能跟踪每个节点的身份，从而重用和重排现有元素，是vue识别节点的一个通用机制，所以尽可能在v-for中使用key。尤其是在虚拟dom比较时，一般用的是tagName，但是因为v-for循环里都是一个li，因此需要key去区分。
参考：https://blog.csdn.net/qq_27626333/article/details/76130397

6. 生命周期

image.png

为什么每个组件中都要export default且data()是个函数

<template>
</template>
<script>
  export default{
  data(){
    return{
    }
  }
}
</script>
<style>
</style>

（1）export default 是要把组件的vue实例信息暴露出去，然后通过vue.component生成组件实例，统一放到根（main.js里new的vm）的components中，生成一个组件树。

image.png

所以将组件export出来作为components的传入参数，生成一个组件，最后添加到main.js的组件里

image.png

而各个组件是通过路由串起来的。
（2）data必须是个函数，是因为组件是可以复用的，且需要每个组件都要各自独立维护它自身的属性值，每个实例可以维护一份被返回对象的独立的拷贝。如果不是函数而简单是个对象的话，那么每个组件相同的属性值就会共享从而一个组件变化另一个组件也会跟着变化。
参考：https://segmentfault.com/a/1190000011381906