san

第一周：

模板：
插值语法(双大括号): {{ }}
能绑定文本内容、 HTML 标签的 属性(attribute)
s-bind类似vue v-bind的属性绑定
双向绑定语法 {= expression =}

并且期中还能接入各种表达式

<!-- 字符串 + 三元条件 -->
<p>{{item ? ',' + item : ''}}</p>

<!-- 方法调用 -->
<p>{{max(num1, num2)}}</p>

<!-- 括号 -->
<p>{{a * (b + c)}}</p>

数据操作
initData初始化
initData初始化必须返回是一个函数，应该和Vue类似，组件会被多次创建。
对象是引用类型指向的是对象的地址，需返回一个函数作用域每个组件都拥有自己
的作用域。

get this.data.get 从data中获取数据
当this.data.get() 返回的是整个data对象

set this.data.set 数据不能直接更改，否则不会是响应式

assign this.data.assign 合并数据至data

数据校验
我们可以给组件的 data 指定校验规则。如果传入的数据不符合规则，那么 san 会抛出异常。在编写组件时，对参数的限制很有帮助

import san, {DataTypes} from 'san';

let MyComponent = san.defineComponent({

    dataTypes: {
        name: DataTypes.string
    }

});

DOM事件
**on-**绑定事件 如 on-click = ‘xxx’
$event 是 San 保留的一个特殊变量，指定 $event 将引用到 DOM Event 对象

双向绑定 {= =} 类似vue中 v-model 是 on 和 input事件的语法糖

slot 插槽 和vue中 默认slot插槽和具名插槽(slot=“name”)同理

scoped插槽：scoped slot 通常用于组件的视图部分期望由 外部传入视图结构，渲染过程使用组件内部数据 ， scoped slot 中不支持双向绑定。
通过var- 或者 bind 去在slot中绑定数据
和vue中的作用域插槽不同

组件

组件的定义
san.defineComponent()
attach添加的对应的页面位置

组件的生命周期
都是对应的生命周期钩子函数和Vue类似(还未仔细看，看源码时分析)

组件通信方式

父组件更新子组件 props
1、和Vue类似 通过props传值给子组件
语法层面不同  Vue子组件需要绑定props 属性，而san不需要。

2、ref 拿到子组件实例 和Vue同 能够使用组件实例的所有方法
ref也能够绑定到DOM元素上，能够拿到DOM节点的引用
通过ref拿到子组件的实例，通过这个子组件的实例可以手动调用this.data.set来更新子组件的数
据，或者直接调用子组件声明时定义的成员方法。

注意在vue中 $refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直
接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。

3、除了ref外，父组件在接收子组件向上传递的消息的时候，也可以拿到子组件的实例

语法 (option) {
	option.target //子组件实例
}

子组件通信父组件
fire 派发自定义事件+ 父组件 on 监听捕获事件
类似Vue中  emit + bind

更多层级组件通信 
子组件通过dispatch方法向组件树上层派发消息
父组件通过 messages 可以声明组件要处理的消息
类似于Vue中的EventBus事件总线

第一周总结：
采用和vue对比的方式，文档基本能够过的很快，除了部分语法不同，其余的作用
类似。组件的第一个练习 智能小程序示例平台 大致完成，
文档部分动画的实践和理解还有待加高。
第二周的计划和后续小程序内部组件封装的计划
第二周：文档归纳结束(还未结束的部分有 动画控制器 主模块API 组件部分的owner、source 动态子组件和异步)
从button组件开始封装。
后续计划 第三周开始san源码的分析。
在原来的计划中增加每周封装一个组件(具体工作量具体预估)

第二周

san动态子组件

createComponentLoader 方法返回一个组件加载器。components 中的声明为组件加载器时，将进行异步渲染：在 attach 过程中将不渲染该组件，组件将在加载完成后进行渲染。
返回一个Promise
但是对同一个createComponentLoader 方法返回的组件加载器，只会进行一次加载。换句话说，load 方法只会调用一次