响应式系统的几个概念

1. 数据模型

Vue 实例在创建过程中，对数据模型data的每一个属性加入到响应式系统中，当数据被更改时，视图将得到响应，同步更新。data必须采用函数的方式 return，不使用 return 包裹的数据会在项目的全局可见，会造成变量污染；使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。

2. 计算属性

computed 基于组件响应式依赖进行计算得到结果并缓存起来。只在相关响应式依赖发生改变时它们才会重新求值，也就是说，只有它依赖的响应式数据（data、prop、computed本身）发生变化了才会重新计算。那什么时候应该使用计算属性呢？模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。对于任何复杂逻辑，你都应当使用计算属性。

3. 监听器

监听器watch作用如其名，它可以监听响应式数据的变化，响应式数据包括 data、prop、computed，当响应式数据发生变化时，可以做出相应的处理。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

渲染函数

jsx语法书写dom

  1. createElement(
  2.   'anchored-heading', {
  3.     props: {
  4.       level: 1
  5.     }
  6.   }, [
  7.     createElement('span', 'Hello'),
  8.     ' world!'
  9.   ]
  10. )

对应的模板如下：

  1. <anchored-heading :level="1">
  2.   <span>Hello</span> world!
  3. </anchored-heading>

如果使用vue render改写上述代码：

  1. import AnchoredHeading from './AnchoredHeading.vue'
  3. new Vue({
  4.   el: '#demo',
  5.   render: function (h) {
  6.     return (
  7.       <AnchoredHeading level={1}>
  8.         <span>Hello</span> world!
  9.       </AnchoredHeading>
  10.     )
  11.   }
  12. })

h 函数说明 将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例，实际上也是 JSX 所要求的。从 Vue 的 Babel 插件的 3.4.0 版本开始，我们会在以 ES2015 语法声明的含有 JSX 的任何方法和 getter 中 (不是函数或箭头函数中) 自动注入 const h = this.$createElement，这样你就可以去掉 (h) 参数了。对于更早版本的插件，如果 h 在当前作用域中不可用，应用会抛错。