vue面试题目|mvvm,extend,vue初始化页面
# template和jsx的有什么分别 对于 runtime 来说，只需要保证组件存在 render 函数即可，而有了预编译之后，只需要保证构建过程中生成 render 函数就可以。在 webpack 中，使用vue-loader编译.vue文件，内部依赖的vue-template-compiler模块，在 webpack 构建过程中，将template预编译成 render 函数。与 react 类似，在添加了jsx的语法糖解析器babel-plugin-transform-vue-jsx之后，就可以直接手写render函数。 所以，template和jsx的都是render的一种表现形式，不同的是：JSX相对于template而言，具有更高的灵活性，在复杂的组件中，更具有优势，而 template 虽然显得有些呆滞。但是 template 在代码结构上更符合视图与逻辑分离的习惯，更简单、更直观、更好维护
只要保证组件存在render函数就可以了，有了预编译之后只需要保证构建过程当中生成render函数就可以了，再webpack当中，使用vue-loeader编译vue文件，内部依赖的vue-template-compilee模块，再webpack构建过程当中，将template预编译成render函数，再添加了jsx语法糖解析器bable-plugin-transform-vue-jsx之后就可以直接手写redenr函数了
所以template和jsx都是render的一种表现形式，不同的是jsx相对于template而言具有更高的灵活性，
39. vue初始化页面闪动问题
使用vue开发时，在vue初始化之前，由于div是不归vue管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于{{message}}的字样，虽然一般情况下这个时间很短暂，但是还是有必要让解决这个问题的。首先：在css里加上以下代码
[v-cloak] {
display: none;
}
如果没有彻底解决问题，则在根元素加上style="display: none;" :style="{display: 'block'}"
40. extend 有什么作用
这个 API 很少用到，作用是扩展组件生成一个构造器，通常会与 $mount 一起使用。
// 创建组件构造器
let Component = Vue.extend({
template: '<div>test</div>'
})
// 挂载到 #app 上
new Component().$mount('#app')
// 除了上面的方式，还可以用来扩展已有的组件
let SuperComponent = Vue.extend(Component)
new SuperComponent({
created() {
console.log(1)
}
})
new SuperComponent().$mount('#app')
由于div是不贵vue管的所有写的代码还没有解析的情况下容易出现花瓶的现象，
extends有什么作用
42. MVVM的优缺点?
优点:●分离视图（View）和模型（Model），降低代码耦合，提⾼视图或者逻辑的重⽤性: ⽐如视图（View）可以独⽴于Model变化和修改，⼀个ViewModel可以绑定不同的"View"上，当View变化的时候Model不可以不变，当Model变化的时候View也可以不变。你可以把⼀些视图逻辑放在⼀个ViewModel⾥⾯，让很多view重⽤这段视图逻辑●提⾼可测试性: ViewModel的存在可以帮助开发者更好地编写测试代码●⾃动更新dom: 利⽤双向绑定,数据更新后视图⾃动更新,让开发者从繁琐的⼿动dom中解放缺点:●Bug很难被调试: 因为使⽤双向绑定的模式，当你看到界⾯异常了，有可能是你View的代码有Bug，也可能是Model的代码有问题。数据绑定使得⼀个位置的Bug被快速传递到别的位置，要定位原始出问题的地⽅就变得不那么容易了。另外，数据绑定的声明是指令式地写在View的模版当中的，这些内容是没办法去打断点debug的●⼀个⼤的模块中model也会很⼤，虽然使⽤⽅便了也很容易保证了数据的⼀致性，当时⻓期持有，不释放内存就造成了花费更多的内存●对于⼤型的图形应⽤程序，视图状态较多，ViewModel的构建和维护的成本都会⽐较⾼。
降低代码耦合，提供视图或者瑞吉的重用性，比如视图可以独立于model的变化或者修改，一个viewmodel可以绑定不同的view上，当vuew变化的时候model不可以不变，当model变化的时候view可以不变，
另外数据绑定的生命是指令时写在view的模板当中的，这些内容是没办法去打断点debug的