vue

题目1

问题：模板编译是什么？

浏览器不能解析一些自定义标签属性或模板如v-for,{{}}

问题：vue做了啥？

做了编译工作

根据视图模板编译成render函数：

vue-loader会处理vue组件

vue-template-compiler：编译组件的包，会将视图模板转化为render函数

with语法：改变访问作用域

注意：不但可以访问对象内部属性，如果内部没有声明变量也可以访问外部属性

var obj = {
  name: 'lisi',
  age: 20
}
with(obj){
  console.log(name);
  //lisi
}

render函数里面的with

//this -> vm实例
var this = {
  _c: xxx,
  _v: xxx,
  _s: xxx
  ...
}
with(this){
  return _c('p', [_v(_s(msg))]);
}

问题：_v()/_c()/_s()函数是什么？

• _v:createTextVnode创建文本节点
• _s:toString将内容变为字符串
• _c:createElement创建元素

问题：模板编译的结果有什么？

with(this){
  return _c(
    'div',
    {staticClass:"container",attrs:{"id":"box"}},
    [_c('img',{attrs:{"src":imgUrl}})]
  )
}

问题：vue组件如何渲染和更新？

1. 组件对象里定义的模板template编译成render渲染函数
2. render函数生成虚拟dom树
3. 当数据发生读取时触发getter函数执行内部定义的收集依赖方法，将依赖存入watcher
4. 当数据发送修改时触发setter函数执行内部定义的通知方法，通知watcher并执行底下的依赖实现数据更新和视图重新渲染