vue问题总结

1. 响应式原理

一句话：vue使用object.defineProperty()对data中的变量进行遍历，通过其setter、getter属性劫持数据，使用watcher对其进行监听，当数据发生变化时，会触发watcher，watcher会告知视图层，数据发生了变化，重新渲染。

• object.defineProperty(obj,data,{})
  还有两个属性：
  • Configurable：默认为true，是否可以通过delete删除对象的属性；
  • Enumerable：默认为true，表示能否通过for…in…循环遍历返回该属性；

Object.defineProperty(obj,"name",{
	get:function(){
		return value
	},
	set:function(newValue){
		value=newValue
	}
})
//监听obj对象的name属性

• 对data中的变量进行遍历
  源码部分：

 var keys = Object.keys(data);                     //获取data的所有键名
  var props = vm.$options.props;
  var methods = vm.$options.methods;
  var i = keys.length;                              //键的个数
  while (i--) {                                     //遍历data的每个属性
    var key = keys[i];
    {
      if (methods && hasOwn(methods, key)) {
        warn(
          ("Method \"" + key + "\" has already been defined as a data property."),
          vm
        );
      }
    }

可以看出，是通过object.keys()来获取data中的属性名，进而遍历其中的属性值。

• watch监听
  https://cloud.tencent.com/developer/article/1479300

2. MVVM模式
   Module=>view=>viewModule

特点:
1.低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
2. 可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
3. 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xaml代码。
4. 可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

4. 如何遍历data，data为什么是函数形式返回一个return？
5. keep-alive
6. 生命周期
   
7. 在哪个生命周期可以调用ajax，为什么？

在created、beforeMount、mounted

• 如果是需要在页面加载前就调用好自己已有的数据，则需要在created中使用
• 如果需要操作到dom元素，则在mounted中

9. 在created可以操作dom吗？

当然不可以了！！！created阶段：初始化与依赖注入相关的操作，会遍历传入methods的选项，初始化选项数据，从$options获取数据选项(vm.$options.data)，给数据添加‘观察器’对象并创建观察器，定义getter、setter存储器属性。在实例创建之后被调用，该阶段可以访问data，使用watcher、events、methods，也就是说 数据观测(data observer) 和event/watcher 事件配置 已完成。但是此时dom还没有被挂载。该阶段允许执行http请求操作。

10. vue-router原理，hash、history区别
11. 父子组件传值、非父子组件传值
12. 自定义命令
13. vue的命令有哪些？

• v-if、v-else、v-else-if
• v-show
• v-for:优先级高于v-if，一般不要与v-if一起使用，因为在每一次的for循环时，都会执行一次v-if；
• v-on：缩写@，绑定事件，用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
• v-bind：缩写：，绑定数据，绑定class（对象绑定法，数组绑定法），style，src等
• v-module：表单的双向绑定
• v-once：元素和组件只渲染一次，包括其子节点，在之后都会被视为静态组件不再重新渲染。

14. v-if、v-show
15. vue中key的作用

主要作用在虚拟dom的计算上，当数据发生改变时，会根据虚拟dom的key值判断哪个dom发生了变化，进而进行更改。
如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

16. computed、watch
17. vuex

• state
• gettter
• mutation
• actions

18. $ router、$route的区别
19. v-model
20. 为什么vue是单项数据流
21. 虚拟dom的原理
22. 虚拟dom的优缺点
23. vue的更新