Vue Notesdata：相当于MVVM中的model层组件中 data 使用函数的原因：实际.vue文件编译后是一

data：相当于MVVM中的model层组件中 data 使用函数的原因：实际.vue文件编译后是一个 class，其本质是实例化，函数可以让数据在闭包之中，避免全局污染；

template：相当于MVVM中的View层，实际为模板，插值允许使用JS表达式如三元运算

<h2>{{ new Date() }}</h2>
<h2>{{ title.toUpperCase() }}</h2>

原型

Vue函数本身的prototype指向Vue的原型对象
Vue实例对象(vm)的隐式__proto__也指向Vue的原型对象（缔造者）
Vue的原型对象的隐式__proto__指Object原型对象
VueComponent函数本身的prototype指VueComponent的原型对象
VueComponent实例对象(vc)的隐式__proto__本来应该指向VueComponent的原型对象，但作者进行了修改，将VueComponent的隐式__proto__指向Vue的原型对象

v-html 覆盖子元素，有 XSS 风险

v-text 插值 {{}}

v-cloak：由于Vue需要一些时间来编译和渲染模板，让未经解析的模板不显示在页面

<div v-html="rawHtml" v-cloak></div>

v-once：初次动态渲染后视为静态内容，失去响应式

<h2 v-once>{{name}}</h2>

v-pre：不会当作模板去解析，用于静态内容

v-bind：自定义属性

<a v-bind:href="url.toUpperCase()">link</a>

<p :class="[var1, var2]"></p>
<p :class="{ var1: true }"></p>
<p :style="{ backgroundColor: '#ccc' }"></p>

v-for：禁止使用 random（ diff 算法通过 key 来判断是否是 sameNode ）

v-show v-if：v-show 控制 display、v-if 是否渲染，不可一起使用会先处理v-for指令，生成对应数量的DOM元素或组件实例，然后每个生成的元素或组件都会被逐个检查v-if条件，如果条件为false，那么该元素或组件将被销毁，有额外的性能开销；

v-model.trim 过滤输入内容首尾空格

v-model.lazy 防抖

v-model.number 数字相关

双向绑定其实做了一个语法糖

@input = 'val = $event.tartget.value'

beforeCreate: 组件实例创建之前调用响应式数据尚未初始化

setup: 这是在 beforeCreate 阶段前被执行的新钩子，仅适用于 Composition API 。它用于配置整个组件的行为，包括属性声明、事件监听器绑定以及方法定义等操作4。

created: 实例已完成数据观测 (data observer)，属性和方法已设置完成，但还未挂载到DOM上。

beforeMount: 发生在首次渲染之前，虚拟 DOM 已经构建完毕，即将被挂载至页面的真实 DOM 上2。

注意： 其实不存在 beforeCreate / created 概念，setup 取而代之

mounted: 当组件已经完全加载并呈现给用户时触发此回调函数，即真实 DOM 节点已经被更新到了浏览器视窗内。

beforeUpdate: 数据变化导致重新渲染发生在此之后但在实际 DOM 反映更改之前会触发该钩子。（视图更改前）

updated: 组件由于状态改变而进行了重绘后会被激活（视图更改后）

beforeUnmount / beforeDestroy: 即将销毁组件之前的最后一个时刻可以在这里做一些清理工作比如取消定时器或移除全局事件监听等等3。

<template>
	<div></div>
	<div></div>
</template>

 - v-enter --- v-enter-from
 - v-leave-to  --- vl-eave-to 
 - v-leave  ---  v-leave-from
 - v-enter-to  --- v-enter-to