Vue.js 基础回顾（Vue2）

Vue基础结构

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>render</title>
</head>

<body>
    <div id="app">
        <p>公司名称：{{ company.name }}</p>
        <p>公司地址：{{ company.address }}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                company: {
                    name: '小五科技',
                    address: '杭州市拱墅区祥园路33号'
                }
            }
        })
    </script>
</body>

</html>

在上面的代码中，我们在创建Vue实例的时候，传入了el和data选项，Vue内部会把data中的数据填充到el指向的模板中，并把模板渲染到浏览器。

我们再来看下面一段代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>render</title>
</head>

<body>
    <div id="app">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        new Vue({
            data: {
                company: {
                    name: '小五科技',
                    address: '杭州市拱墅区祥园路33号'
                }
            },
            render(h) {
                return h('div', [
                    h('p', '公司名称：' + this.company.name),
                    h('p', '公司地址：' + this.company.address)
                ])
            }
        }).$mount('#app')
    </script>
</body>

</html>

这段代码的执行效果和上一段代码的效果是一样的，不过这里使用了render选项和$mount方法，我们使用vue-cli脚手架创建的结构和这段代码是一样的。render方法接收一个参数，这个参数就是h函数，关于h函数，我们会在后面详细讲解，在这里我们先简单介绍一下。h函数的作用是创建虚拟DOM，render方法把h函数创建的虚拟DOM返回，$mount方法的作用是把虚拟DOM转换为真实DOM渲染到浏览器，后续我们在看源码时也会看到$mount方法内部的实现。而使用el选项和使用render选项在运行时有什么区别，也会在之后文章中具体介绍。

Vue.js 生命周期

Vue 实例生命周期

在创建Vue实例的过程中会发生很多事情，首先会进行初始化，初始化事件以及生命周期相关的成员，包括h函数也都是在这个位置初始化的，后面在看源码的过程中我们就会看到这些事项。

接下来会触发生命周期中的beforeCreate钩子函数，beforeCreate执行完成后，会执行初始化注入的操作，会把props，data，methods等成员注入到Vue实例上。然后会触发created钩子函数，因为刚刚已经初始化了props，data以及methods，所以在created钩子函数中我们就可以访问到这些成员。到此，Vue创建完毕。

接下来，在上图的黄色区域中要做的事是帮我们把模板编译成render函数。首先判断选项中是否设置了el选项，如果没有设置，就调用$mount这个方法，$mount方法其实就是把el转换成相应的template，接下来再把template编译为render函数。之后再判断是否设置了template，也即模板，如果没有设置的话，会把el元素的外层HTML作为模板然后把template模板编译到渲染函数中，渲染函数就是用来生成虚拟DOM的。

之后开始准备挂载DOM，首先会触发beforeMount钩子函数，也即挂载之前所执行的钩子函数，在这个函数中我们无法获取新元素的内容，再往下的话就准备挂载DOM了。接下来把新结构渲染到页面上再触发mounted这个钩子函数，在这个钩子函数中我们可以访问到新DOM结构中的内容。挂载完毕之后，当我们再修改data中的成员时，首先会去触发beforeUpdate这个函数，然后再进行新旧两个虚拟DOM的对比，然后把差异重新渲染到浏览器中最后触发updated钩子函数。在beforeUpdate钩子函数如果直接访问浏览器中的渲染内容，还是上一次的结果。我们想要获取页面最新结果的话，应该在updated这个钩子函数中访问。

最后，是销毁阶段，当我们调用vm.$destroyed函数时，首先会触发beforeDestroy钩子函数然后执行一些清理工作，最后触发destroyed钩子函数。并且在上图最后的*处，我们也可以看到“如果使用构造生成文件（例如构造单文件组件），模板编译将提前执行”，即如果我们使用单文件组件的话，模板编译是在打包或构建的时候完成的，不在运行的时候处理模板编译的工作。Vue始终推荐我们提前去编译模板，这样性能会比较好，不需要在运行期间去编译模板。

Vue 语法和概念

插值表达式（{{ }}）
指令（Vue中的内置指令有14个，另外我们还可以自定义指令，在自定义指令中操作DOM）
计算属性和侦听器（当模板中有太多逻辑需要处理的时候，推荐使用计算属性，计算属性的结果会被缓存，下次再访问该计算属性的时候，会从缓存中获取相应的结果，提高性能。如果需要监听数据的变化，做一些比较复杂的操作，例如异步操作或其他开销比较大的操作，此时就可以使用侦听器。）
Class和Style绑定（当绑定样式的时候，我们可以使用Class或Style，他们分别可以绑定数组或对象。但在实际开发中，我们都推荐使用Class绑定，让样式可以重用）
条件渲染/列表渲染（v-if,v-for）
表单输入绑定（v-model）
组件（组件是可复用的Vue实例，一个组件封装了HTML，CSS，JS，可以实现页面上的一个功能区域，实现重用。）
插槽（如果我们想开发一个自己的组件，有可能就会用到插槽，插槽可以让我们在一个自定义的组件中挖一个坑，在使用这个组件的时候去填坑，这样做的目的是让组件更灵活，比如Vue-router中的route-link组件，他里面的文本是在外部使用的时候被传递进来的，内部就是使用插槽来进行占位的。）
插件（Vue的插件机制我们也都使用过，比如vue-router，vue-x，都是插件，当然我们也可以开发自己的插件。）
混入 mixin（如果多个组件都有相同的选项，就可以使用混入的方式，把相同的选项进行合并让代码进行重用，是让组件重用的一种方式。）
深入响应式原理
不同构建版本的Vue（Vue打包之后，会生成不同版本的Vue，支持不同的模块化方式以及带编译器与不带编译器版本的Vue）