Vue针对性笔记

Github原文阅读

MVVM(Model-View-ViewModel)模型

MVVM分为Model、View、ViewModel三部分。

Model代表数据模型，定义数据和业务逻辑，访问数据层
View代表视图，展示页面结构、布局和外观（UI）
ViewModel代表视图模型，负责监听Model数据变化并更新视图，处理用户交互

Model和View是通过ViewModel，Model的数据变化会触发View的更新，View的交互操作也会使Model的数据发生改变。只需要针对数据进行维护操作，数据的自动同部不需要通过操作dom实现。

Vue指令

指令	作用	期望数值类型
v-text	更新元素文本内容	string
v-html	更新元素的`innerHTML`	string
v-show	条件渲染。根据表达式的真假值，控制元素的显示或隐藏	any
v-if	条件渲染。根据表达式的值的真假条件选择是否渲染元素这个节点	any
v-else	条件渲染。根据`v-if`的相反条件进行元素渲染	any
v-else-if	条件渲染。做`v-if`的链式调用	any
v-for	列表渲染。对数据进行遍历渲染，最好提供`key`值	Array / Object / number / string
v-on	事件处理。绑定事件监听器，事件类型由参数指定，表达式可以是方法名或内联语句。	Function / Inline Statement / Object
v-bind	动态绑定。动态绑定一个或多个特性，或一个组件`prop`到表达式	any (with argument) / Object (without argument)
v-model	表单绑定。在表单或组件是上创建双向绑定	随表单控件类型变化
v-pre	跳过该元素和它的子元素的编译过程
v-cloak	设置 `[v-cloak] { display: none }`可以在渲染时延后加载`Vue`实例，避免闪现
v-once	元素和组件只渲染一次，重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过

Vue响应式原理

Vue实例化时，遍历访问data的所有属性，使用 Object.defineProperty 将其属性全部转换为getter/setter进行依赖追踪以便修改属性时进行变更通知，每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

Vue双向数据绑定

简单实现，有一个子组件输入框，一个按钮，父组件通过props传值给子组件，当按钮增加时，子组件通过$emit通知父组件修改相应的props值。