3-1-1-Vue.js 基础回顾

Vue.js 基础回顾

Part 概述

• 快速回顾 Vue.js 基础语法
• Vue Router 原理分析与实现
• 虚拟 DOM 库 Snabbdom 源码分析
• 响应式原理分析与实现
• Vue.js 源码分析

Vue.js 基础结构

<div id="app">
  <p>姓名：{{ host.name }}</p>
  <p>性别：{{ host.gender }}</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      host: {
        name: '丁晓东',
        gender: '男'
      }
    }
  })
</script>

一个最简单的 vue 的应用，在创建 vue 实例的时候，传入 el 和 data 选项，vue 内部会把 data 数据填充到 el 指向的模板中，并把模板渲染到浏览器。

<div id="app"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script>
  new Vue({
    data: {
      host: {
        name: '丁晓东',
        gender: '男'
      }
    },
    render(h) {
      return h('div', [
        h('p', '姓名：' + this.host.name),
        h('p', '性别：' + this.host.gender)
      ])
    }
  }).$mount('#app')
</script>

这段代码和上面的代码实现的效果是一样的，不过这里使用了 render 选项和 $mount 方法，我们使用 vue-cli 创建的结构跟这段代码是一样的。

render 方法接收一个参数，这个参数是 h 函数， h 函数的作用是创建虚拟 DOM ，render 方法把 h 函数创建的虚拟 DOM 返回，$mount 方法把虚拟 DOM　转换成真实 DOM 渲染到浏览器.

Vue.js 生命周期

Vue.js 语法和概念

1. 插值表达式

我们可以使用 {{}} 把 data 中的成员显示在模板中的任何位置,如果内容中有 html 字符串插值表达式会把内部的内容解析为普通文本,html 文本会被转义,如果想作为 html 输出可以使用 v-html 指令.

2. 指令

vue 中一共有14个指令,也可以自定义指令.

3. 计算属性和侦听器

当模板中有太多的逻辑需要处理的时候,推荐使用计算属性,计算属性的结果会被缓存,下次再访问计算属性的时候,会从缓存中获取相应的结果提高性能.

如果需要监听数据的变化,做一些复杂的操作,可以使用侦听器.

4. class 和 style 绑定

当绑定样式的时候可以使用 class 或者 style ,他们分别可以绑定数组和对象,但是实际开发中推荐使用class绑定,让样式可以重用.

5. 条件渲染/列表渲染

可以通过 v-if 或者 v-show 控制元素的显示和隐藏,v-show 是通过样式控制显示和隐藏,v-if 是控制元素是否输出来控制元素的显示和隐藏.

列表渲染使用 v-for ,vue 推荐给每一个循环项设置一个 key 用来跟踪每一个节点的身份,让每一项都能最大程度的被重用,从而提高性能.

6. 表单输入绑定

当使用 v-model 绑定表单元素的时候它负责去监听用户的输入事件以及更新数据,即双向绑定.

7. 组件

组件是可复用的 vue 实例,一个组件中封装了 html js css ,可以实现页面上的一个功能区域,可以无限次的被重用.

8. 插槽

插槽可以让我们在一个自定义组件中挖一个坑,在使用这个组件的时候去填坑,是组件更加的灵活,提高可复用能力.比如 vue-router 中的 router-link 这个组件,它里面的文本时外部在使用的时候被传递进来的,内部就是使用插槽来定位的.

9. 插件

vue-router vuex 都是插件.

10. 混入 mixin

如果多个组件都有相同的选项,就可以使用混入的方式把相同的选项进行合并,将代码重用,这是让组件重用的一种方式.

11. 深入响应式原理

12. 不同构件版本的 vue

vue 打包之后会生成不同版本的 vue ，它支持不同版本的模块化方式以及带编译器和不带编译器版本的 vue 。