有关Vue的一些基本原理和常识

Posted by Mars . Modified at Apr 20, 2021

Vue的各部分是如何在一起工作的？各个API和配置项都代表什么含义？实际内部是怎样运行的？

有关这些基本原理和常识的问题，有结论都记在这里。

Vue中各种变量名形式的含义

DEV: 这种前后有两个下划线的大写变量名，表示环境标志。在一个环境中如果这个环境标志为真(truthy)，则代表这里是相应的环境。（__DEV__代表开发环境）
__v_isReadonly: 这种前面为__v_开头的属性，代表Vue的内部标志或属性

一个Vue组件就是一个JS对象，就像.vue文件中
组件对象（或组合式setup()函数）可以被传入component() API用来在各个组件内部注册（或全局注册）；
一个.vue文件叫做单文件组件，包含<template>、<style>、<script>三部分，它就定义了一个Vue组件。这里<template>和<style>都是为了书写方便才这样显示，最后在使用import引入的时候，这两个标签内内容都会被添加到组件对象中(template和style属性)，整个组件解析为一个纯JS的对象；`

一个手写JS Vue组件对象基本结构类似如下：

{
  name: '',
  props: [],
  data(){},
  methods: {},
  components: {},
  template: ``,
  style: '',
  emits: [],
}

Vue应用的本质就是层层嵌套的组件树。使用createApp()创建的app应用实例，使用的App.vue就是一个Vue组件，它叫做根组件。其他组件都是注册在它内部或者在app实例上全局注册的，在根组件内部使用。

Keywords: Vue