响应式

目录-入口-由此开始-大纲-总览-概括-枢纽-指导-指引-总领

梗概:

• 即类似于js的值引用
  1. 在其他地方被改变了值
  2. 在另一个地方的值也同步改变
• 同时，基于响应式，vue还支持双向绑定

响应式显示

• 变量值的修改会同步修改页面上显示的值
  • 没有响应式的话，需要手动编程刷新页面，显示最新的值

响应式逻辑

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

指向原始笔记的链接

指向原始笔记的链接

使用响应式:

• child::构建响应式
• child::Vue 响应式api
• child::响应式变量语法糖

原理:

child::Vue 响应式原理