构建响应式

Vue base::MVVC

梗概

创建响应式变量

child::创建响应式变量

响应式显示(model→view)

对于简单的原生html 标签

child::

组件模板中响应式访问组件中内容

形式

content中

• innerText中使用{{}}包围表达式

Vue 命令

Vue 命令的值

• 整个值都会被看作js表达式看待

实例

• <div :id=“`row-${index}`” />
  • 当index为1时候，渲染出来为：<div id=“row-1” />

命令的键

实例

<a v-bind:[attributeName]="url"> ... </a>
<!-- 简写 -->
<a :[attributeName]="url"> ... </a>

注意

• 不能是表达式，只能是字符串

<!-- 这会触发一个编译器警告 -->
<a :['foo' + bar]="value"> ... </a>

注意

• 直接给属性赋值是不能动态引用组件中的内容的，用Vue v-bind命令 单向加载组件数据到html中是更好、更推荐的

可以访问到的内容

1. 不需要前缀, 可直接访问组件中的data或props或方法
2. child::组件模板自动解构响应式引用

指向原始笔记的链接

对于Vue 组件

将响应式变量传递给目标组件

对于需要使用js来显示的内容

child::

响应式逻辑

前端

梗概

• 当源数据产生变动时，执行对应逻辑

实现方法

• child::Vue watch
• child::Vue computed

区别

child::

watch对比computed

相同点

• 都可以实现响应式逻辑

区别

功能：

• computed是计算属性，根据依赖的数据变化动态更新显示的计算结果。
• watch是监听某个值的变化，然后做出对应的操作

缓存：

• computed:

  Transclude of Vue-computed#^8c8728

  Transclude of Vue-computed#^d7qpea

• watch: 不支持缓存，当监听的值发生变化时，响应执行

异步操作：

• watch:

  • 可以进行异步操作

  指向原始笔记的链接

• computed:

  • 不支持异步操作

  指向原始笔记的链接

使用场景：

• 如果一个属性是由其它属性计算而来的，这个属性依赖其它属性，使用computed。
• 需要在数据变化时执行异步操作或者开销较大的操作时，使用watch

指向原始笔记的链接

指向原始笔记的链接

响应式修改(view→model)

对于原生HTML与VUE组件

child::Vue v-model命令 双向同步html数据与组件数据

对于复杂的非VUE组件

• 添加事件监听器，在需要修改源数据（响应式变量）的时候，直接修改响应式变量

实例

ECharts：

• 监听echarts内的事件，然后使用js修改响应式变量