Vue针对性笔记

Github原文阅读

MVVM(Model-View-ViewModel)模型

Vue针对性笔记_第1张图片

MVVM分为ModelViewViewModel三部分。

  • Model代表数据模型,定义数据和业务逻辑,访问数据层
  • View代表视图,展示页面结构、布局和外观(UI)
  • ViewModel代表视图模型,负责监听Model数据变化并更新视图,处理用户交互 ModelView是通过ViewModelModel的数据变化会触发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 元素和组件只渲染一次,重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过  

自定义指令

不是刚需,和生命周期有很大关系,可见五个生命周期钩子。

  • bind
  • inserted
  • update
  • componentUpdated
  • unbind

Vue响应式原理

Vue针对性笔记_第2张图片

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

Vue双向数据绑定

什么是双向数据绑定

model的更新会触发view的更新,view的更新也会触发model的更新

什么是单向数据流

model的更新会触发view的更新,但是view的更新不会触发model的更新

双向绑定 or 单向数据流

  • Vue是单向数据流,不是双向绑定
  • Vue的双向绑定不过是语法糖
  • Object.defineProperty是用来做响应式更新的,和双向绑定没关系

简单实现一个响应式双向数据绑定

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

Vue针对性笔记_第3张图片

你可能感兴趣的:(Vue针对性笔记)