anyxl / vuequestion Goto Github PK

1. 编译器Compiler优化，使用模块化架构，优化 “Block tree”， 静态树提升static tree hoisting ，精简大小；
2. 运行时Runtime的更新，运行速度显著提升；
3. 优化插槽生成，单独重新渲染父组件和子组件；

vue的双向绑定，分为两个方向：

1. 修改view，响应到数据model
   给元素绑定事件，比如input事件，然后在事件里操作model；
2. 修改数据model，更新视图view
   利用了 Object.defineProperty()方法，重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的，通过遍历传入对象的所有属性，将属性变成存储器属性，劫持各个属性的setter和getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

1. 全局前置守卫 beforeEach
2. 全局后置钩子 afterEach
3. 路由独享钩子 beforeEnter
4. 全局解析守卫 beforeResolve
5. 组件内的守卫
   beforeRouteEnter
   beforeRouteUpdate
   beforeRouteLeave

1. Vue组件data选项为什么必须是个函数？
   组件是可复用的Vue实例，当一个组件被复用时应考虑数据的独立性。
   不选择将data选项设置为对象，正是因为对象是引用数据类型，多个实例引用同一data对象，某一实例修改data就会造成其他复用组件实例的数据被修改。而当data选项是一个函数时，因为函数作用域，每个实例可以维护一份被返回对象的独立的拷贝，这样各个实例中的data就不会相互影响了。
2. Vue的根实例则没有此限制？
   因为vue根实例只在init时定义，不用考虑独立性。

Vue提供了Vue.extend方法用于在扩展组件构造器，以及extends选项用于扩展单文件组件。
extends允许声明扩展另一个组件(可以是一个简单的选项对象或构造函数)，而无需使用 Vue.extend。通过外部增加对象的形式，对构造器进行扩展。它和混入mixins非常的类似。只不过接收的参数是简单的选项对象或构造函数,所以extends只能单次扩展一个组件。
var baseComp = {
name: 'baseComp',
template: <div>{{message}}</div>,
data () {
return {
message: 'My is BaseComponent!'
}
}
}
var app = new Vue({
el: '#app',
data: {},
extends: baseComp
})

一、MVC 架构
Model: 数据模型层，保存数据；
View: 视图层，展示用户界面；
Controller: 控制层，处理业务逻辑；

二、MVP 架构
该模式是MVC的一个变种；Model和View层与MVC相同；
Presenter: 可以理解成松散的控制器，其中包括了视图的UI业务逻辑，所有从视图发出的事件，都会通过代理给Presenter进行处理；同时，Presenter也通过视图暴露的接口与其进行通信；

三、MVVM 架构
Model和View层与MVC和MVP相同；
ViewModel: 类似于MVP的Presenter，区别在于，它采用双向绑定，当view变动，会自动反映在ViewModel，反之亦然。

v-for的优先级更高，两者不建议在同一元素上使用；
当两者同时出现，
1.应将v-if写在父级元素上，
2.使用计算属性computed过滤循环数据。

vue生命周期，指vue实例从初始化到销毁的过程。

每个 Vue 实例在被创建时都要经过一系列的初始化过程，在某个时刻自动执行的函数，叫做生命周期函数（钩子函数）。例如，设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等过程中会运行一些生命周期钩子函数。

不同阶段执行的钩子函数：

1. 初始化阶段：
   beforecreated：el 和 data 并未初始化
   created： 完成了 data 数据的初始化
   beforeMount：完成了 el 和 data 初始化 ，未挂载
   mounted ：完成挂载
2. 更新data数据：
   beforeUpdate：组件更新前
   updated：组件更新后
3. 销毁实例
   beforeDestory：组件销毁前调用
   destoryed：组件销毁后调用

watch 与 compute 区别：

1. computed 创建新的属性， watch 监听 data 已有的属性；
2. computed 会产生依赖缓存；
3. 当 watch 监听 computed 时，watch 在这种情况下无效，仅会触发 computed.setter。

watch和computed各自擅长处理的数据关系场景不同：

1. watch：监听某个数据的变化，一个数据影响多个数据。
2. computed：需要复杂逻辑和运算才能得到的值，或某些属性依赖其他数据的结果，那么建议将这个属性放在computed中，一个数据受多个数据影响。

v-for和v-if不要放在同一个元素上使用，可以使用计算属性computed过滤数据；
如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好；
将组建拆分成不同小组件，加快更新渲染速度；
组件的按需加载；
路由懒加载；
减少watch的使用；

$nextTick：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。

原理：
Vue 在观察到数据变化时是异步执行的，并不是直接更新 DOM，而是将这些操作都缓存在一个队列，在一个事件循环结束之后，刷新队列，统一执行dom更新操作。所以当需要操作更新后的dom时，会发现获取不到。
所以，可以在数据变化之后使用 Vue.nextTick(callback)，callback回调函数将在 DOM 更新完成后被调用。 Vue 会根据当前浏览器环境优先使用原生的 Promise.then 和 MutationObserver，如果都不支持，就会采用 setTimeout 代替，达到延迟函数到 DOM 更新后再使用的目的。

diff算法写在vue的patch.js内，用来比较真实dom和虚拟dom的差异，找出需要更新的节点，便于更高效的修改dom。
diff算法通过真实dom和虚拟dom同层级节点首首比较，尾尾比较，交叉比较以及key值查找，找出差异：

1. 对比新旧节点首部，如果找到，把新节点patch到旧节点，首指针后移；’
2. 对比新旧节点尾部，如果找到，把新节点patch到旧节点，尾指针前移；
3. 然后互相交叉对比，旧尾新首，如果找到把新节点patch到旧节点，并插入到正确位置，旧尾指针前移，新首指针后移；继续互相交叉对比，旧首新尾，如果找到，把新节点patch到旧节点，并插入到正确位置，新尾指针前移，旧首指针后移；
4. 都没有，开始用新指针对应节点的key去旧数组中直接找。

组件是可以在它们自己的模板中调用自身的，不过它们只能通过 name 选项来做这件事。另外需要注意的是：必须设置结束条件，不能无限递归，否则会内存溢出“max stack size exceeded”。应用于一些树状菜单等。

1. Vue组件data选项为什么必须是个函数？
   组件是可复用的Vue实例，当一个组件被复用时应考虑数据的独立性。
   不选择将data选项设置为对象，正是因为对象是引用数据类型，多个实例引用同一data对象，某一实例修改data就会造成其他复用组件实例的数据被修改。而当data选项是一个函数时，因为函数作用域，每个实例可以维护一份被返回对象的独立的拷贝，这样各个实例中的data就不会相互影响了。
2. Vue的根实例则没有此限制？
   因为vue根实例只在init时定义，不用考虑独立性。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

对于一些vue大型项目，vuex的使用，非常利于管理多组件间的数据通讯和外部数据状态，比如登录信息，数据字典等。

使用步骤：

1. 创建一个store；
2. 创建state数据交由store来管理；
3. 将创建好的store注入到根实例里；
4. 在组件中使用state中的数据。

核心概念：

1. state
   Vuex中的公共的状态，用于保存所有组件的公共数据
2. getters
   可以理解为store的计算属性。
3. mutations
   mutations是存放处理数据的方法的集合，通过调用this.$store.commit(name,payload)更改state中的数据；
4. actions
   actions类似于mutations，用来操作mutations，且负责做异步操作；组件中通过this.$store.dispatch(type,payload)调用。

组件实例的作用域都是独立的，这意味着不能在某组件的模板内直接引用其他组件的数据，vue的组件通信解决这个问题。一般分为三种通信方式：

1. 父组件传子组件
   父组件通过props属性向下传递数据给子组件；
2. 子组件传父组件
   子组件通过自定义事件，利用$emit()方法触发父组件函数来传递数据；
3. 非父子通信、或其他通信方式
   ① vuex
   vue 的状态管理器，集中式存储管理应用的所有组件的状态，适用于大型项目中的组件通讯；
   ② event bus
   非父子组件通讯，可以使用event bus方法，利用vue实例作为中间桥梁传参；
   ③ $parent / $root
   兄弟组件之间通信可通过共同父组件或根组件作为桥梁传参；
   ④ $attrs / $listeners
   在创建高级别的组件时非常有用的通信属性；
   ⑤ provide / inject
   能够实现祖先和后代之间传值，主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。