const vm = new Vue(options)
- vm 是Vue对象的实例
- vm 对象封装了对视图的所有操作,包括事件读写、事件绑定、DOM更新
- vm 的构造函数是Vue，vm所属的类是Vue
- options 是new Vue的参数，一般称之为选项或构造选项
options的五类属性
- 数据: data、props、propsData、computed、method、watch
- DOM: el、template、render、renderError
- 生命周期钩子: created、mounted、updated、destroyed、actived...
- 资源: directives、components、fiflter
- 组合:mixins、extends、provide、inject
入门属性
- el - 挂载点
- 可以用
$mount代替- 指定一个DOM元素作为 Vue 实例的挂载目标，常见值包括 "#app" 或者 ".container"
- data - 内部数据
- 定义组件数据,支持对象和函数,优先用函数。
- Vue 会将这个数据对象代理到 Vue 实例上。
- methods - 方法
事件处理函数或者是普通函数
- components
- Vue组件,注意大小写
- 两种引入方式，全局引入和局部引入，推荐局部引入
- 四个钩子
created: 实例出现在内存中mounted: 实例出现在页面中updated: 实例更新了destroyed: 实例从页面和内存中消亡了
- props - 外部数据
- 用来向子组件传递数据，可以是数组或者对象。如果是数组，表示传递的数据类型，如果是对象，则可以定义具体的传递数据
message="n"传入字符串:message="n"传入 this.n 数据:fn="add"传入 this.add 函数
在Vue中，data和props都是用来传递数据的属性，但它们有以下区别：
数据来源不同：data 属性是用于存储组件内部的数据。props 则是从父组件向子组件传递数据。
可否修改数据：data 属性中的数据可以被组件内部的方法和计算属性访问和修改。而 props 中的数据由父组件传递给子组件后就不能再被子组件修改了，也就是单向数据流的思想。
数据类型的限制：props 可以通过类型检查来确保传递的数据类型是正确的。而在 data 中，没有相关限制，我们可以动态地添加、修改和删除数据。
如何在组件中使用：data 中的数据可以通过
this访问。而 props 中的数据必须在组件中先进行解构，例如v-bind:propName="propName"。
综上所述，props主要用于父组件向子组件传递数据，而data主要用于存储组件内部的私有数据。
进阶属性
- computed - 计算属性
- 不需要加括号，根据依赖是否变化来缓存
- watch - 监听
- 一旦
data变化，就执行的函数options.watch用法this.$watch用法deep、immediate含义
- directives - 指令
- 内置指令
v-if/v-for/v-bind(简写为 :) /v-on(简写为 @)- 自定义指令
- 指令是为了减少重复的DOM操作
- mixin - 混入
- 重复三次之后的出路
- 混入 v.s. 全局混入
- 选项自动合并
- 混入就是为了减少重复的构造选项
- extends - 继承
- 也是为了减少重复的构造选项
- provide/inject
- 爷爷想和孙子讲话怎么办，祖宗想和它的所有后代讲话怎么办
- 全局变量，但是全局变量太low
- 所以我们需要局部的全局变量
在 Vue 中，computed 和 watch 都是用于处理数据响应式的，但两者的区别主要在以下几个方面：
声明方式不同：computed 使用声明式的方式来实现依赖追踪，它会根据依赖的属性自动更新值；而 watch 使用命令式的方式来实现，需要明确监听的属性，在数据变化后执行回调。
监听的对象不同：computed 监听的对象是 data 中定义的属性或者是其他 computed 计算属性，它可以基于现有的数据进行计算并且缓存计算结果；而 watch 则可以在 data 中监听任何属性的变化，并触发回调函数。
更新时机不同：computed 的更新是基于它所依赖的属性实时更新的，如果依赖的属性没有变化，则计算属性也不会重新计算；而 watch 则是在侦听到属性变化后才会执行回调函数。
用途不同：computed 主要用于对数据进行复杂的计算，避免在模板中使用复杂的逻辑；而 watch 则主要用于监听某个属性的变化，当需要在某个属性变化时执行异步或复杂的操作时更加方便。
computed 和 watch 都是用于处理数据响应式的，但两者的应用场景、触发方式以及更新时机等方面略有不同，需要开发者根据具体的需求进行选择和使用。
响应式原理
options.data
- 会被 Vue 监听
- 会被 Vue 实例代理
- 每次对 data 的读写都会被Vue监控
- Vue会在 data 变化时更新UI
