Vue单文件组件 (五)

vue中的单文件组件指的是后缀为.vue的文件。
vue文件里由template、script、style三部分组成。
传统文件中经常遇到以下问题，单文件组件主要是为了解决这些等问题。

1. 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
2. 字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
3. 不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
4. 没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如 Pug (formerly Jade) 和 Babel。

完整文件：

<template>
  <div class="container">demo</div>
</template>

<script>
export default {
  // 头部信息 可以添加标题这些 具体看vue-meta文档
  metaInfo: {
    title: 'demo'
  },
  // 组件
  components: {},
  // props 可以是数组或对象，用于接收来自父组件的数据
  // props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义校验和设置默认值。
  props: {
    // page: {
    //   type: Number,
    //   required: true,
    //   default: 1,
    // },
    // page: {
    //   type: [Number, String],
    //   default: () => 1,
    // },
  },
  // Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化
  data() {
    return {
      // a: 1
    }
  },
  // 计算属性
  // 计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
  // 注意如果你为一个计算属性使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。
  // 计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，则计算属性是不会被更新的。
  computed: {},
  // 观察属性
  // 一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。
  // Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。
  watch: {},
  // 实例初始化之后
  // 数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
  beforeCreate() {},
  // 实例初始化完成
  // 实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
  created() {},
  // 挂载开始之前 相关的 render 函数首次被调用
  beforeMount() {},
  // 挂载完成
  // 该钩子在服务器端渲染期间不被调用
  // mounted 不会承诺所有的子组件也都一起被挂载
  // 如果你希望等到整个视图都渲染完毕 可以用 vm.$nextTick 替换掉 mounted
  mounted() {},
  // keep-alive 组件激活时调用。
  // 该钩子在服务器端渲染期间不被调用。
  activated() {},
  // keep-alive 组件停用时调用。
  // 该钩子在服务器端渲染期间不被调用。
  deactivated() {},
  // 数据更新时调用
  // 该钩子在服务器端渲染期间不被调用 因为只有初次渲染会在服务端进行
  // 发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
  beforeUpdate() {},
  // 数据更新完成
  // 数据更改 导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
  // 所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。
  // 如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
  updated() {},
  // 实例销毁之前调用
  // 该钩子在服务器端渲染期间不被调用
  beforeDestroy() {},
  // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  // 该钩子在服务器端渲染期间不被调用
  // destroyed() { },
  // 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。
  // 此钩子可以返回 false 以阻止该错误继续向上传播。
  // errorCaptured(err, vm, info) { },
  // 方法
  methods: {}
}
</script>
<style lang="scss" scoped>
  // lang可以填scss sass less等等预处理器
  // 添加scoped会使css的作用域只在这个组件内
  .container{}
</style>