模板解析

<template>
  {{a[b][0].c}}
</template>

<script>
export default {
  data: {
    a: {b: [{c: 'hello'}, {c: 'world'}]}
  }	
}
</script>

解析模板

需要注意的是这里的解析只是一个简易的模板解析，实际情况要比这个要复杂很多，尤其是[ ] 这种情况可以多层嵌套且里面的变量也并不固定

// 处理 . 的情况
function getVal(data, expr) {
  const d = expr.split('.')
  return d.reduce((data, current) => data[current], data)
}

// 处理 [] && . 的情况
function getVal2(data, expr) {
  const d = expr.split('.')
  return d.reduce((data, current) => {
    const c = current.split(/\[/)
    if (c.length) {
      return c.reduce((pre, next) => {
        if (next) {
          const n = next.replace(/\]/g, '')
          return pre[n]
        }
      }, data)
    } else {
      return data[current]
    }
  }, data)
}

以上只是对模板解析的一种尝试，还没看源码，如果各位同学有新的解法或者看过源码的欢迎交流